farmstar-survey-ui/pages/distributor.vue

<template>
  <div class="lg:flex items-start justify-center mt-4">
    <FormSheet class="mx-2 mb-4 lg:w-3/4">
      <ClientOnly>
        <Vueform
          v-if="!formSubmitted"
          ref="form$"
          validate-on="change"
          :form-data="(form$) => form$.requestData"
          @response="handleResponse"
          endpoint="distributor"
        >
          <div class="text-xl mb-1 col-span-12">
            <div class="border-b border-gray-300 pb-2">
              Distributor onboarding survey
            </div>
          </div>
          <TextElement
            name="phone"
            label="What is your primary phone number?"
            description="Enter a valid Kenyan phone number starting with 07 or 01 that you registered with."
            rules="required|phone"
          />
          <SelectElement
            name="distributor_name"
            label="What is the name of the agri-input distributor you work with?"
            :native="false"
            :items="{
              maraba_investments: 'Maraba Investments',
              farmers_center: 'Farmers Center',
              farmers_world: 'Farmers World',
              farmers_desk: 'Farmers Desk',
              mazao_na_afya: 'Mazao na Afya',
            }"
            rules="required"
          />
          <SelectElement
            name="type"
            label="What types of fertilizers do you current stock at your distributor?"
            :native="false"
            :items="{
              synthetic: 'Synthetic/Chemical',
              organic: 'Organic',
              both: 'Both',
            }"
            rules="required"
          />
          <TextElement
            name="synthetic_percentage"
            label="In the past six months, what percentage of your fertilizer sales comprised synthetic fertilizers?"
            description="Enter a percentage value"
            rules="required|min:0|numeric|max:100"
            input-type="number"
            :conditions="[['type', 'both']]"
          />
          <TextElement
            name="organic_percentage"
            label="In the past six months, what percentage of your fertilizer sales comprised organic fertilizers?"
            description="Enter a percentage value"
            rules="required|min:0|numeric|max:100"
            input-type="number"
            :conditions="[['type', 'both']]"
          />
          <TagsElement
            name="synthetic_factors"
            label="What factors do you believe influence farmers' preferences for synthetic fertilizers? (Select all that apply)"
            :items="{
              increased_crop_yield: 'Increased Crop Yield',
              cost_effective: 'Cost-effectiveness',
              ease_of_application: 'Ease of application',
              availability: 'Availability',
              marketing: 'Marketing/Advertising',
              govt_incentives: 'Government Incentives',
              other: 'Other',
            }"
            rules="required"
            :conditions="[['type', ['both', 'synthetic']]]"
          />
          <TagsElement
            name="organic_factors"
            label="What factors do you believe influence farmers' preferences for organic fertilizers? (Select all that apply)"
            :items="{
              increased_crop_yield: 'Increased Crop Yield',
              cost_effective: 'Cost-effectiveness',
              ease_of_application: 'Ease of application',
              availability: 'Availability',
              marketing: 'Marketing/Advertising',
              govt_incentives: 'Government Incentives',
              other: 'Other',
              environmental_concerns: 'Environmental concerns',
              soil_health: 'Soil health improvement',
              consumer_demand: 'Consumer demand for organic produce',
            }"
            rules="required"
            :conditions="[['type', ['both', 'organic']]]"
          />
          <TextareaElement
            name="trends"
            rules="required|max:250"
            label="Have you noticed any specific trends or patterns in farmers' choices between synthetic and organic fertilizers?"
          />
          <TextareaElement
            name="obstacles"
            rules="required|max:250"
            :conditions="[['type', ['both', 'organic']]]"
            label="Are there any obstacles faced in promoting or selling organic fertilizers compared to synthetic fertilizers? If yes, please specify."
          />
          <SelectElement
            name="need_education"
            label="Do farmers express a need for more education or information about the benefits of organic fertilizers compared to synthetic ones?"
            :native="false"
            :items="{
              yes: 'Yes',
              no: 'No',
            }"
            rules="required"
            :conditions="[['type', ['both', 'organic']]]"
          />
          <TextareaElement
            name="organic_strategies"
            rules="required|max:250"
            :conditions="[['type', ['both', 'organic']]]"
            label="What strategies have been most effective in encouraging the adoption of organic fertilizers among walk-in farmers?"
          />
          <TextareaElement
            name="farmstar_strategies"
            rules="required|max:500"
            :conditions="[['type', ['both', 'organic']]]"
            label="In your opinion, what strategies could Farm Star use to encourage an increased adoption of organic fertilizers among farmers?"
          />
          <ButtonElement name="submit" add-class="mt-2" submits>
            Submit
          </ButtonElement>
        </Vueform>
        <SuccessAlert
          v-else
          title="Submission Successful"
          subtitle="Thank you for submitting the form."
          link="/"
          action="Home"
        />
      </ClientOnly>
    </FormSheet>
  </div>
</template>

<script setup>
const form$ = ref(null);
const formSubmitted = ref(false);

const handleResponse = async (response, form$) => {
  if (response.status <= 201) {
    formSubmitted.value = true;
  } else if (response.status >= 400) {
    form$.messageBag.append(response.data?.message);
    form$.messageBag.append(response.data?.error);
    if (Object.keys(response.data.data)[0]?.message) {
      form$.messageBag.append(
        Object.keys(response.data.data)[0] +
          ": " +
          Object.values(response.data.data)[0]?.message
      );
    }
  }
};
</script>