mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git
synced 2026-08-19 04:23:55 +00:00
Sorry Voucher with new features enhancement requested by KS
This commit is contained in:
@@ -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
+110
@@ -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;
|
||||
},
|
||||
|
||||
+5
@@ -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">
|
||||
|
||||
+23
@@ -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>
|
||||
+42
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user