Skip to content

Commit

Permalink
Merge pull request #958 from AbleKSaju/feat-pos-loyalty-program
Browse files Browse the repository at this point in the history
feat: Loyalty program functionality in POS
  • Loading branch information
akshayitzme authored Oct 3, 2024
2 parents 5b564c2 + c25fa0a commit 20a4a8c
Show file tree
Hide file tree
Showing 3 changed files with 303 additions and 11 deletions.
2 changes: 1 addition & 1 deletion src/components/POS/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export type ItemSerialNumbers = { [item: string]: string };

export type DiscountType = "percent" | "amount";

export type ModalName = 'ShiftOpen' | 'ShiftClose' | 'Payment'
export type ModalName = 'ShiftOpen' | 'ShiftClose' | 'Payment' | 'LoyaltyProgram'

export interface POSItem {
image?:string,
Expand Down
166 changes: 166 additions & 0 deletions src/pages/POS/LoyaltyprogramModal.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,166 @@
<template>
<Modal class="h-96 w-96" :set-close-listener="false">
<p class="text-center py-4">Redeem Loyalty Points</p>

<hr class="dark:border-gray-800" />

<div class="flex gap-2 p-3 justify-end pt-10">
<svg
xmlns="http://www.w3.org/2000/svg"
height="20px"
viewBox="0 -960 960 960"
width="20px"
fill="#F19E39"
>
<path
d="M480-60q-117 0-217.22-65.23T108.33-287.77v133.92H58.08v-220h220v50.26H146.05q44.87 89.95 137.44 151.64 92.56 61.69 196.51 61.69 74.95 0 141.19-27.89 66.25-27.9 116.04-76.35 49.8-48.45 79.81-114.31 30.01-65.86 32.32-141.19h50.25q-1.92 85.23-35.65 159.85-33.73 74.61-90.46 130.38Q716.77-124 641.19-92 565.61-60 480-60Zm-24.92-144.31v-51.54q-42.85-10.64-72.5-35.38-29.66-24.74-48.58-68.21l43.44-16.41q14.3 37.85 43.39 58.77 29.09 20.93 65.58 20.93 37.8 0 66.31-18.94 28.51-18.94 28.51-56.14 0-33.21-23.55-53.89t-89.22-46.62q-62.36-24.06-90.82-51.52-28.46-27.46-28.46-73.61 0-40.18 28.54-71.05 28.54-30.87 79.36-38.49v-48.87h47.43v48.87q34.51 3.03 62.12 22.91 27.6 19.88 43.11 51.81l-41.53 18.36q-13.7-24.54-34.75-38.53-21.05-13.99-51.46-13.99-39.21 0-62.42 19.18-23.22 19.18-23.22 49.8 0 31.28 22.18 48.95 22.18 17.66 84.43 41.1 70.52 27.49 97.72 58.31 27.21 30.82 27.21 77.28 0 26.97-10.17 47.92-10.17 20.95-27.12 35.48-16.94 14.52-39.7 23.06t-48.4 10.92v49.54h-47.43ZM60.39-490q2.69-87.15 36.8-161.96 34.12-74.81 91.23-130.19 57.12-55.39 132.12-86.62Q395.54-900 480-900q115.85 0 217.22 65.43 101.37 65.42 154.45 163.88v-135.46h50.25v220h-220v-50.26h132.03q-43.72-88.15-136.14-150.74-92.42-62.59-197.81-62.59-73.41 0-139.59 27.51t-116.23 75.58q-50.05 48.06-80.64 113.92-30.59 65.86-32.9 142.73H60.39Z"
/>
</svg>

<p>{{ loyaltyPoints }}</p>
</div>

<Data
v-if="sinvDoc.fieldMap"
class="flex-shrink-0 px-10 pb-10"
:show-label="true"
:border="true"
:value="sinvDoc.loyaltyPoints"
:df="sinvDoc.fieldMap.loyaltyPoints"
@change="updateLoyaltyPoints"
/>

<div class="row-start-6 grid grid-cols-2 gap-4 mt-auto mb-2 px-10">
<div class="col-span-2">
<Button
class="w-full bg-green-500"
style="padding: 1.35rem"
:disabled="validationError"
@click="setLoyaltyPoints()"
>
<slot>
<p class="uppercase text-lg text-white font-semibold">
{{ t`Save` }}
</p>
</slot>
</Button>
</div>
</div>

<div class="row-start-6 grid grid-cols-2 gap-4 mt-auto px-10">
<div class="col-span-2">
<Button
class="w-full bg-red-500"
style="padding: 1.35rem"
@click="$emit('toggleModal', 'LoyaltyProgram')"
>
<slot>
<p class="uppercase text-lg text-white font-semibold">
{{ t`Cancel` }}
</p>
</slot>
</Button>
</div>
</div>
</Modal>
</template>

<script lang="ts">
import Button from 'src/components/Button.vue';
import Data from 'src/components/Controls/Data.vue';
import Modal from 'src/components/Modal.vue';
import { SalesInvoice } from 'models/baseModels/SalesInvoice/SalesInvoice';
import { defineComponent, inject } from 'vue';
import { t } from 'fyo';
import { showToast } from 'src/utils/interactive';
import { ModelNameEnum } from 'models/types';
export default defineComponent({
name: 'LoyaltyProgramModal',
components: {
Modal,
Button,
Data,
},
props: {
loyaltyPoints: {
type: Number,
required: true,
},
loyaltyProgram: {
type: String,
required: true,
},
},
emits: ['setLoyaltyPoints', 'toggleModal'],
setup() {
return {
sinvDoc: inject('sinvDoc') as SalesInvoice,
};
},
data() {
return {
validationError: false,
};
},
methods: {
async updateLoyaltyPoints(newValue: number) {
try {
if (this.loyaltyPoints >= newValue) {
this.sinvDoc.loyaltyPoints = newValue;
} else {
throw new Error(
`${this.sinvDoc.party as string} only has ${
this.loyaltyPoints
} points`
);
}
const loyaltyProgramDoc = await this.fyo.db.getAll(
ModelNameEnum.LoyaltyProgram,
{
fields: ['conversionFactor'],
filters: { name: this.loyaltyProgram },
}
);
const loyaltyPoint =
newValue * ((loyaltyProgramDoc[0]?.conversionFactor as number) || 0);
if (this.sinvDoc.baseGrandTotal?.lt(loyaltyPoint)) {
throw new Error(t`no need ${newValue} points to purchase this item`);
}
this.validationError = false;
} catch (error) {
this.validationError = true;
showToast({
type: 'error',
message: t`${error as string}`,
});
return;
}
},
setLoyaltyPoints() {
try {
if (!this.sinvDoc.loyaltyPoints || this.sinvDoc.loyaltyPoints < 0) {
throw new Error(t`Points must be greater than 0`);
}
this.$emit('setLoyaltyPoints', this.sinvDoc.loyaltyPoints);
this.$emit('toggleModal', 'LoyaltyProgram');
this.validationError = false;
} catch (error) {
this.validationError = true;
showToast({
type: 'error',
message: t`${error as string}`,
});
}
},
},
});
</script>
146 changes: 136 additions & 10 deletions src/pages/POS/POS.vue
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,14 @@
@toggle-modal="toggleModal"
/>

<LoyaltyProgramModal
:open-modal="openLoyaltyProgramModal"
:loyalty-points="loyaltyPoints"
:loyalty-program="loyaltyProgram"
@set-loyalty-points="setLoyaltyPoints"
@toggle-modal="toggleModal"
/>

<PaymentModal
:open-modal="openPaymentModal"
@create-transaction="createTransaction"
Expand Down Expand Up @@ -92,14 +100,92 @@
:item-qty-map="itemQtyMap"
@add-item="addItem"
/>
<div
class="bg-gray-100 p-2 fixed bottom-0 mb-7 rounded-md"
@click="toggleView"
>
<FeatherIcon
:name="tableView ? 'grid' : 'list'"
class="w-6 h-6 text-black"
/>

<div class="flex fixed bottom-0 p-1 mb-7 gap-x-3">
<div class="relative group">
<div class="bg-gray-100 p-1 rounded-md" @click="toggleView">
<FeatherIcon
:name="tableView ? 'grid' : 'list'"
class="w-6 h-6 text-black"
/>
</div>
<span
class="
absolute
bottom-full
left-1/2
transform
-translate-x-1/2
mb-2
bg-gray-100
dark:bg-gray-850 dark:text-white
text-black text-xs
rounded-md
p-2
w-20
text-center
opacity-0
group-hover:opacity-100
transition-opacity
duration-300
"
>
{{ tableView ? 'Grid View' : 'List View' }}
</span>
</div>

<div class="relative group">
<div
class="p-1 rounded-md bg-gray-100"
:class="{
hidden: !fyo.singles.AccountingSettings?.enableLoyaltyProgram,
'bg-gray-100': loyaltyPoints,
'dark:bg-gray-600 cursor-not-allowed':
!loyaltyPoints || !sinvDoc.party || !sinvDoc.items?.length,
}"
@click="
loyaltyPoints && sinvDoc.party && sinvDoc.items?.length
? toggleModal('LoyaltyProgram', true)
: null
"
>
<svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 -960 960 960"
width="26px"
fill="#000"
>
<path
d="M100-180v-600h760v600H100Zm50.26-50.26h659.48v-499.48H150.26v499.48Zm0 0v-499.48 499.48Zm181.64-56.77h50.25v-42.56h48.67q14.37 0 23.6-10.38 9.22-10.38 9.22-24.25v-106.93q0-14.71-9.22-24.88-9.23-10.17-23.6-10.17H298.77v-73.95h164.87v-50.26h-81.49v-42.56H331.9v42.56h-48.41q-14.63 0-24.8 10.38-10.18 10.38-10.18 25v106.27q0 14.62 10.18 23.71 10.17 9.1 24.8 9.1h129.9v76.1H248.51v50.26h83.39v42.56Zm312.97-27.94L705.9-376H583.85l61.02 61.03ZM583.85-574H705.9l-61.03-61.03L583.85-574Z"
/>
</svg>
</div>

<span
class="
absolute
bottom-full
left-1/2
transform
-translate-x-1/2
mb-2
bg-gray-100
dark:bg-gray-850 dark:text-white
text-black text-xs
rounded-md
p-2
w-28
text-center
opacity-0
group-hover:opacity-100
transition-opacity
duration-300
"
>
Loyalty Program
</span>
</div>
</div>
</div>
</div>
Expand All @@ -125,7 +211,7 @@
:border="true"
:value="sinvDoc.party"
:df="sinvDoc.fieldMap.party"
@change="(value:string) => (sinvDoc.party = value)"
@change="(value:string) => setCustomer(value)"
/>

<SelectedItemTable />
Expand Down Expand Up @@ -270,7 +356,8 @@ import {
validateSinv,
} from 'src/utils/pos';
import Barcode from 'src/components/Controls/Barcode.vue';
import { getPricingRule } from 'models/helpers';
import { getAddedLPWithGrandTotal, getPricingRule } from 'models/helpers';
import LoyaltyProgramModal from './LoyaltyprogramModal.vue';
export default defineComponent({
name: 'POS',
Expand All @@ -285,6 +372,7 @@ export default defineComponent({
OpenPOSShiftModal,
PageHeader,
PaymentModal,
LoyaltyProgramModal,
SelectedItemTable,
Barcode,
},
Expand All @@ -311,6 +399,7 @@ export default defineComponent({
isItemsSeeded: false,
openPaymentModal: false,
openLoyaltyProgramModal: false,
openShiftCloseModal: false,
openShiftOpenModal: false,
Expand All @@ -322,6 +411,10 @@ export default defineComponent({
totalQuantity: 0,
loyaltyPoints: 0,
appliedLoyaltyPoints: 0,
loyaltyProgram: '' as string,
defaultCustomer: undefined as string | undefined,
itemSearchTerm: '',
transferRefNo: undefined as string | undefined,
Expand Down Expand Up @@ -385,6 +478,22 @@ export default defineComponent({
toggleSidebar(true);
},
methods: {
async setCustomer(value: string) {
if (!value) {
this.sinvDoc.party = '';
return;
}
this.sinvDoc.party = value;
const party = await this.fyo.db.getAll(ModelNameEnum.Party, {
fields: ['loyaltyProgram', 'loyaltyPoints'],
filters: { name: value },
});
this.loyaltyProgram = party[0]?.loyaltyProgram as string;
this.loyaltyPoints = party[0].loyaltyPoints as number;
},
async setItems() {
const items = (await fyo.db.getAll(ModelNameEnum.Item, {
fields: [],
Expand Down Expand Up @@ -447,6 +556,23 @@ export default defineComponent({
setTotalTaxedAmount() {
this.totalTaxedAmount = getTotalTaxedAmount(this.sinvDoc as SalesInvoice);
},
async setLoyaltyPoints(value: number) {
this.appliedLoyaltyPoints = value;
this.sinvDoc.redeemLoyaltyPoints = true;
const totalLotaltyAmount = await getAddedLPWithGrandTotal(
this.fyo,
this.loyaltyProgram,
value
);
const total = totalLotaltyAmount
.sub(this.sinvDoc.baseGrandTotal as Money)
.abs();
this.sinvDoc.grandTotal = total;
},
setTransferAmount(amount: Money = fyo.pesa(0)) {
this.transferAmount = amount;
},
Expand Down

0 comments on commit 20a4a8c

Please sign in to comment.