mirror of
https://github.com/grassrootseconomics/farmstar-survey-ui.git
synced 2024-10-02 05:57:21 +02:00
96 lines
3.5 KiB
Vue
96 lines
3.5 KiB
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>
|