Sorry Voucher with new features enhancement requested by KS

This commit is contained in:
Dillon Ngo
2024-07-23 19:11:36 +08:00
parent c3961d102e
commit 0d60226c44
49 changed files with 1325 additions and 103 deletions
@@ -5,11 +5,13 @@
<div class="row text-left no-margin bg-white p-b-10" v-if="!isLoading" v-for="item in vouchers" v-bind:key="item.id" >
<div id="select-option" name="select-option" class="col b-b b-grey p-t-10 p-b-10 pointer p-t-10 p-b-10" @click="selectVoucher(item)">
<div class="row">
<!-- <div class="col">
<p v-if="item.voucher.type == 'AMOUNT'">RM{{ item.voucher.value/100 }} Discount</p>
<p v-if="item.voucher.type == 'PERCENT'">{{ item.voucher.value }}% Discount</p>
<div class="col text-left no-padding">{{ item.voucher.code }}</div>
<div class="col text-right no-padding" v-if="item.voucher.type == 'AMOUNT'">
RM{{ item.voucher.value/100 }} Discount
</div>
<!-- <div class="col text-right no-padding" v-if="item.voucher.type == 'PERCENT'">
{{ item.voucher.value }}% Discount
</div> -->
<span>{{ item.voucher.code }}</span>
</div>
<div class="row">
<span v-if="item.voucher.end_date">
@@ -697,6 +697,7 @@
this.submit(route('api.voucher.validate'), 'post', '', false, false);
}
else{
this.voucherCodeFailedReason = 'Please enter voucher code';
this.voucherValidated = true;
this.voucherIsChecking = false;
}
File diff suppressed because one or more lines are too long
@@ -0,0 +1,110 @@
<template>
<div class="row">
<div class="col">
<div class="row">
<div class="col ml-md-3 ml-0 mt-md-0 mt-3 bg-white padding-15">
<div class="row">
<div class="col">
<div class="row m-b-10">
<div class="col">
<div class="font-heading fs-16 all-caps bold m-b-15">Add Sorry Voucher</div>
</div>
</div>
<div class="row">
<div class="col">
<validation-wrapper-component selectable :validator="$v.voucherCode">
<label>Voucher Options</label>
<selectable-hard-coded-component section="rewardisActiveOptions" :selectable-options="options" v-model="voucherCode"></selectable-hard-coded-component >
</validation-wrapper-component>
</div>
</div>
<div class="row m-l-0 m-r-0" style="height: 20px">
<i class="fa fa-spinner fa-spin m-b-5" v-show="$store.getters.isLoading(section) && voucherIsChecking"></i>
<span class="text-danger" v-if="voucherCodeFailedReason">{{ voucherCodeFailedReason }}</span>
<span class="text-success" v-if="voucherCodeFailedReason === '' && voucherFetched">Voucher added</span>
</div>
<div class="row m-t-20">
<div class="col">
<button type="button" class="btn btn-block p-t-10 p-b-10 p-r-35 p-l-35 btn-success b-rad-none" @click="submitForm">Add Voucher</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { required } from "vuelidate/lib/validators";
export default {
props: {
id: {
type: String,
required: true
},
section:{
type: String,
required: true
},
options: {
type: Array,
required: true
},
},
data(){
return {
parameters: {
voucherCode: '',
},
voucherCode: '',
voucherCodeFailedReason: '',
voucherFetched: false,
voucherIsChecking: false,
}
},
validations: {
voucherCode: {
required
},
},
methods: {
successHandler(response){
if(response.payload.data && response.payload.data.voucher_id !== undefined){
this.voucherFetched = true;
this.$store.dispatch('reloadList', {'name': "customerVouchersListSection"});
this.voucherCode = '';
this.$v.$reset();
}
else{
this.voucherFetched = false;
this.voucherCodeFailedReason = 'Voucher Invalid';
if(response.payload.data && response.payload.data.reason){
this.voucherCodeFailedReason = response.payload.data.reason;
}
}
this.$store.dispatch('reloadList', {'name': "voucherCampaignsSection"});
this.voucherIsChecking = false;
},
submitForm(){
this.reset();
this.voucherIsChecking = true;
this.parameters = {
voucherCode: this.voucherCode,
userId: this.id
};
this.submit(this.route('api.voucher.create'), 'post', this.section, false, false);
},
errorHandler(error){
this.voucherCodeFailedReason = 'Some went wrong, please report this to tech';
this.voucherFetched = false;
this.voucherIsChecking = false;
},
reset(){
this.voucherFetched = false;
this.voucherCodeFailedReason = "";
}
}
}
</script>
@@ -75,12 +75,10 @@
}
else{
this.voucherFetched = false;
this.voucherCodeFailedReason = 'Voucher Invalid';
if(response.payload.data && response.payload.data.reason){
this.voucherCodeFailedReason = response.payload.data.reason;
}
else{
this.voucherCodeFailedReason = 'Voucher Invalid';
}
}
this.voucherIsChecking = false;
},
@@ -94,6 +92,7 @@
this.submit(this.route('api.voucher.create'), 'post', this.section, false, false);
},
errorHandler(error){
this.voucherCodeFailedReason = 'Something went wrong, please report this to our customer service';
this.voucherFetched = false;
this.voucherIsChecking = false;
},
@@ -1,6 +1,11 @@
<template>
<div class="row d-none" :class="[{'d-flex': $store.getters.isAdmin}]" v-if="$store.getters.isAdmin" >
<div class="col-md-12 col-lg col-xl">
<div class="row m-b-10">
<div class="col">
<div class="font-heading fs-16 all-caps bold m-b-15">Customer Vouchers</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="row tabsContainer">
@@ -0,0 +1,23 @@
<template>
<div class="row bg-white padding-10 m-b-10 rounded">
<div class="col-2 fs-12">{{data.name}}</div>
<div class="col-1 text-success text-center">{{data.metadata && data.metadata.length > 0 ? data.metadata[0].value : 0 }}</div>
<div class="col-1 text-center">{{data.limit_per_month}}</div>
<div class="col-3 fs-12">{{data.campaign_id}}</div>
</div>
</template>
<script>
import componentHandler from '../../../general/mixins/componentHandler';
export default {
props: {
data: {
required: true,
type: Object
},
},
methods: {
},
mixins: [componentHandler],
}
</script>
@@ -0,0 +1,42 @@
<template>
<div class="row">
<div class="col">
<div class="row m-b-10">
<div class="col">
<div class="font-heading fs-16 all-caps bold m-b-15">Voucher Campaigns ALL CUSTOMERS</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="row padding-10">
<div class="col-2 fs-10">Name</div>
<div class="col-1 fs-10 text-center">Issued (this month)</div>
<div class="col-1 fs-10 text-center">Limit Per Month</div>
<div class="col-3 fs-10">Campaign Id</div>
</div>
<list-component section="voucherCampaignsSection" :endpoint="route('api.voucher.campaigns.list')" :options="options">
<template slot="list" slot-scope="{data}">
<single-voucher-campaign-item-component :data="data"></single-voucher-campaign-item-component>
</template>
</list-component>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
},
data(){
return {
options: {
include_metadata: true,
}
}
},
methods: {
},
}
</script>
@@ -3,11 +3,9 @@
<div class="row">
<div class="col-12 col-md-8 bg-white p-l-25 p-r-25 p-t-15 p-b-15">
<loading-component style="height: 200px; top: 0;" key="1" color="success" v-show="$store.getters.isLoading('rewardProfileSection')"></loading-component>
<div class="row p-b-5 m-b-20 b-b b-grey align-items-center parentContainer">
<div class="row">
<div class="col">
<div class="font-heading all-caps fs-10 hint-text">
Vouchers
</div>
<voucher-campaigns-section-component></voucher-campaigns-section-component>
</div>
</div>
<div class="row">
@@ -22,6 +20,11 @@
<add-voucher-section-component id="{{$id}}" section="addVoucherSection"></add-voucher-section-component>
</div>
</div>
<div class="row">
<div class="col">
<add-voucher-options-section-component id="{{$id}}" section="addSorryVoucherSection" :options="{{ json_encode(\App\Classes\ValueObjects\Constants\Vouchers::OPTIONS_SORRY) }}" ></add-voucher-options-section-component>
</div>
</div>
</div>
</div>
@endsection