page: add redemption page

pages/redeem.vue

@@ -0,0 +1,94 @@
+<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?.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>

pages/registration.vue

@@ -80,7 +80,7 @@ const formSubmitted = ref(false);
 const handleResponse = async (response, form$) => {
   if (response.status <= 201) {
     formSubmitted.value = true;
-  } else {
+  } else if (response.status >= 400) {
     form$.messageBag.append(response.data?.message);
     if (Object.keys(response.data.data)[0]?.message) {
       form$.messageBag.append(

pages/transaction.vue

@@ -115,7 +115,8 @@ const formSubmitted = ref(false);
 const handleResponse = async (response, form$) => {
   if (response.status <= 201) {
     formSubmitted.value = true;
-  } else {
+  } 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(

vueform.config.js

@@ -5,7 +5,7 @@ import { Validator } from '@vueform/vueform'
 
 const phoneRule = class extends Validator {
   get message() {
-    return 'The What is your primary phone number? filed requires a valid phone number'
+    return 'The phone field requires a valid phone number'
   }
 
   check(value) {
@@ -37,6 +37,10 @@ export default {
     distributor: {
       url: `${process.env.BASE_URL}/distributor`,
       method: 'post'
+    },
+    redeem: {
+      url: `${process.env.BASE_URL}/redeem`,
+      method: 'post'
     }
   }
 }