farmstar-survey-ui/pages/transaction.vue

<template>
  <div class="lg:flex items-start justify-center mt-4">
    <FormSheet class="mx-2 lg:w-3/4">
      <ClientOnly>
        <Vueform
          v-if="!formSubmitted"
          ref="form$"
          validate-on="change"
          :form-data="(form$) => form$.requestData"
          @response="handleResponse"
          endpoint="transaction"
        >
          <div class="text-xl mb-4 col-span-12">
            <div class="border-b border-gray-300 pb-2">Record a purchase</div>
          </div>
          <TextElement
            name="phone"
            label="What is your phone number?"
            description="Enter a valid Kenyan phone number starting with 07 or 01 that you registered with."
            rules="required|phone"
          />
          <SelectElement
            name="tx"
            :native="false"
            label="Did you buy or sell EverGrow Organic Fertilizer?"
            :items="{
              buy: 'Buy',
              sell: 'Sell',
            }"
          />
          <SelectElement
            name="distributor_name"
            label="Select the name of the distributor you purchased EverGrow from."
            :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"
            :conditions="[['tx', 'buy']]"
          />
          <TextElement
            name="buy"
            label="Enter the phone number of the counter agent you bought EverGrow from."
            rules="required|phone"
            description="Enter a valid Kenyan phone number starting with 07 or 01 that you registered with."
            :conditions="[['tx', 'buy']]"
          />
          <TextElement
            name="sell"
            label="Enter the phone number of the customer you sold EverGrow to."
            rules="required|phone"
            description="Enter a valid Kenyan phone number starting with 07 or 01 that you registered with."
            :conditions="[['tx', 'sell']]"
          />
          <DateElement
            :min="new Date(2024, 0, 23)"
            name="buy_date"
            label="When did you make this purchase?"
            rules="required"
            :conditions="[['tx', 'buy']]"
          />
          <DateElement
            :min="new Date(2024, 0, 23)"
            name="sell_date"
            label="When did you make this sale?"
            rules="required"
            :conditions="[['tx', 'sell']]"
          />
          <TextElement
            name="evergrow_quantity_purchase"
            label="How much EverGrow did you purchase?"
            description="in 50kg bags of EverGrow. 1x50kg bag = 1, 2x50kg bags = 2, etc."
            rules="required|numeric|min:1|max:20"
            input-type="number"
            :conditions="[['tx', 'buy']]"
          />
          <TextElement
            name="evergrow_quantity_sale"
            label="How much EverGrow did you sell?"
            description="in 50kg bags of EverGrow. 1x50kg bag = 1, 2x50kg bags = 2, etc."
            rules="required|numeric|min:1|max:20"
            input-type="number"
            :conditions="[['tx', 'sell']]"
          />
          <TextareaElement
            name="feedback"
            :conditions="[['tx', ['sell', 'buy']]]"
            rules="max:300"
            label="Do you have any comments or feedback for FarmStar?"
          />
          <ButtonElement name="submit" add-class="mt-2" submits>
            Submit
          </ButtonElement>
        </Vueform>
        <SuccessAlert
          v-else
          title="Submission Successful"
          subtitle="Transaction details submitted successfully."
          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>