farmstar-survey-ui/pages/redeem.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="redeem"
        >
          <div class="text-xl mb-4 col-span-12">
            <div class="border-b border-gray-300 pb-2">Redeem your points</div>
          </div>
          <GroupElement name="redeem_points">
            <TextElement
              name="distributor_phone"
              label="What is your phone number?"
              description="Enter a valid Kenyan phone number starting with 07 or 01."
              rules="required|phone"
            />
            <SelectElement
              name="distributor"
              label="Which distributor are points being redeemed at?"
              :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"
            />
            <TextElement
              name="farmer_phone"
              label="Enter the phone number of the farmer who is redeeming FarmStar Points for EverGrow at your store"
              description="Enter a valid Kenyan phone number starting with 07 or 01."
              rules="required|phone"
            />
            <div class="col-span-12">
              <Notice
                subtitle="Please ensure that the customer has sufficient FSP to complete this transaction. The customer can check their FSP balance by dialing the USSD code *384*96# for Safaricom users, and *483*96# for other cell carriers."
              />
            </div>
            <SelectElement
              name="redemption_options"
              label="How many FarmStar Points are being redeemed?"
              :native="false"
              :items="{
                60: '60 FSP (25% discount on a 50kg bag of EverGrow)',
                120: '120 FSP (50% discount on a 50kg bag of EverGrow)',
                180: '180 FSP (75% discount on a 50kg bag of EverGrow)',
                240: '240 FSP (1 free 50kg bag of  EverGrow)',
              }"
              rules="required"
            />
          </GroupElement>
          <ButtonElement name="submit" add-class="mt-2" submits>
            Register
          </ButtonElement>
        </Vueform>
        <SuccessAlert
          v-else
          title="Submission Successful"
          subtitle="Your customer has received a promp to send their FSP to XXXX-XXX-XXX. Please confirm the SMS receipt of the FSP being sent by the customer before providing them with the discounted EverGrow."
          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>