refactor: rename voucher to coupon

apps/web/__tests__/support/pageObjects/CartPageObject.ts

@@ -62,29 +62,29 @@ export class CartPageObject {
     return this;
   }
 
-  openVoucherAccordion() {
-    cy.getByTestId('voucherZone').click();
+  openCouponAccordion() {
+    cy.getByTestId('couponZone').click();
     return this;
   }
 
-  addVoucher(voucherCode: string) {
-    cy.getByTestId('voucherCode').find('[data-testid="input-field"]').type(voucherCode);
-    cy.getByTestId('voucherAdd').click();
+  addCoupon(couponCode: string) {
+    cy.getByTestId('couponCode').find('[data-testid="input-field"]').type(couponCode);
+    cy.getByTestId('couponAdd').click();
     return this;
   }
 
-  orderSummayAfterVoucherApplyed(discount: string, total: string) {
+  orderSummayAfterCouponApplyed(discount: string, total: string) {
     cy.getByTestId('coupon-label').should('be.visible');
     cy.getByTestId('coupon-value').contains(discount);
     cy.getByTestId('total').contains(total);
   }
 
-  removeVoucher() {
-    cy.getByTestId('voucherRemove').click();
+  removeCoupon() {
+    cy.getByTestId('couponRemove').click();
     return this;
   }
 
-  orderSummayAfterVoucherRemoved(total: string) {
+  orderSummayAfterCouponRemoved(total: string) {
     cy.getByTestId('coupon-label').should('not.exist');
     cy.getByTestId('total').contains(total);
   }

apps/web/__tests__/test/smoke/voucher.cy.ts → apps/web/__tests__/test/smoke/coupon.cy.ts

@@ -3,23 +3,23 @@ import { paths } from '../../../utils/paths';
 
 const cart = new CartPageObject();
 
-describe('Smoke: Voucher test', () => {
+describe('Smoke: Coupon test', () => {
   beforeEach(() => {
     cy.setCookie('vsf-locale', 'en');
     cy.setCookie('consent-cookie', '{"Essentials":{"Session":true,"Consent":true,"Session2":true},"External Media":{"Session":false,"Consent":false,"Session2":false},"Functional":{"Session":false,"Consent":false,"Session2":false},"Marketing":{"Session":false,"Consent":false,"Session2":false}}')
   });
 
-  it('[smoke] Add voucher to cart and check order summary then remove voucher and check order summary', () => {
+  it('[smoke] Add coupon to cart and check order summary then remove coupon and check order summary', () => {
     cy.visitAndHydrate('/study-room-office/office-chair/design-chair-brookhaven-leather-black_105_1003');
     cy.intercept('/plentysystems/doAddCartItem').as('doAddCartItem');
     cy.wait(1000);
     cy.getByTestId('add-to-cart').click();
     cy.wait('@doAddCartItem');
     cy.visitAndHydrate(paths.cart);
-    cart.openVoucherAccordion();
-    cart.addVoucher('KB82AZ');
-    cart.orderSummayAfterVoucherApplyed('-£12.95','£119.99');
-    cart.removeVoucher();
-    cart.orderSummayAfterVoucherRemoved('£132.94');
+    cart.openCouponAccordion();
+    cart.addCoupon('KB82AZ');
+    cart.orderSummayAfterCouponApplyed('-£12.95','£119.99');
+    cart.removeCoupon();
+    cart.orderSummayAfterCouponRemoved('£132.94');
   });
 });

apps/web/components/CartPageContent/CartPageContent.vue

@@ -4,12 +4,12 @@
       <div v-for="cartItem in cart?.items" :key="cartItem.id">
         <UiCartProductCard :cart-item="cartItem" />
       </div>
-      <Voucher class="mb-2" v-if="!isDesktop" />
+      <Coupon class="mb-2" v-if="!isDesktop" />
     </div>
     <div class="relative col-span-5 md:sticky md:top-10 h-fit" :class="{ 'pointer-events-none opacity-50': loading }">
       <SfLoaderCircular v-if="loading" class="absolute top-[130px] right-0 left-0 m-auto z-[999]" size="2xl" />
       <OrderSummary v-if="cart" :cart="cart">
-        <Voucher v-if="isDesktop" class="mb-5" />
+        <Coupon v-if="isDesktop" class="mb-5" />
         <SfButton
           data-testid="checkout-button"
           :tag="NuxtLink"

apps/web/components/Voucher/Voucher.vue → apps/web/components/Coupon/Coupon.vue

@@ -1,24 +1,24 @@
 <template>
   <div class="border-b border-neutral-200">
-    <SfAccordionItem v-if="!cartGetters.getCouponDiscount(cart)" data-testid="voucherZone" v-model="openedVoucher">
+    <SfAccordionItem v-if="!cartGetters.getCouponDiscount(cart)" data-testid="couponZone" v-model="openedCoupon">
       <template #summary>
         <div
           class="flex justify-between font-medium p-3 border-2 border-solid border-transparent"
-          :class="{ 'mb-3 bg-gray-100 !border-dashed !border-red-200': openedVoucher }"
+          :class="{ 'mb-3 bg-gray-100 !border-dashed !border-red-200': openedCoupon }"
         >
           <p class="pl-3">{{ $t('coupon.title') }}</p>
           <SfIconChevronLeft
-            :class="['text-neutral-500', { 'rotate-90': openedVoucher, '-rotate-90': !openedVoucher }]"
+            :class="['text-neutral-500', { 'rotate-90': openedCoupon, '-rotate-90': !openedCoupon }]"
           />
         </div>
       </template>
       <div class="flex mb-2">
-        <div class="flex-grow mr-2" data-testid="voucherCode">
+        <div class="flex-grow mr-2" data-testid="couponCode">
           <SfInput :placeholder="$t('coupon.enterCode')" type="text" v-model="couponCode" required />
         </div>
         <SfButton
-          data-testid="voucherAdd"
-          @click="addVoucher({ couponCode })"
+          data-testid="couponAdd"
+          @click="addCoupon({ couponCode })"
           class="ml-2"
           type="reset"
           variant="primary"
@@ -35,8 +35,8 @@
       <div class="text-primary-800 pl-3 pt-2 font-medium">{{ couponCode }}</div>
       <div>
         <SfButton
-          data-testid="voucherRemove"
-          @click="handleDeleteVoucher"
+          data-testid="couponRemove"
+          @click="handleDeleteCoupon"
           variant="tertiary"
           class="text-stone-800"
           :disabled="loading"
@@ -64,18 +64,18 @@ import {
 } from '@storefront-ui/vue';
 import { ref, onMounted } from 'vue';
 import { useCart } from '~/composables';
-const openedVoucher = ref(false);
+const openedCoupon = ref(false);
 const couponCode = ref('');
-const { addVoucher, deleteVoucher, loading } = useVoucher();
+const { addCoupon, deleteCoupon, loading } = useCoupon();
 const { data: cart } = useCart();
 
-const handleDeleteVoucher = async () => {
-  await deleteVoucher({ couponCode: couponCode.value });
+const handleDeleteCoupon = async () => {
+  await deleteCoupon({ couponCode: couponCode.value });
   couponCode.value = '';
 };
 
 onMounted(() => {
   couponCode.value = cartGetters.getCouponCode(cart.value);
-  openedVoucher.value = cartGetters.getCouponDiscount(cart.value) !== 0;
+  openedCoupon.value = cartGetters.getCouponDiscount(cart.value) !== 0;
 });
 </script>

apps/web/composables/index.ts

@@ -29,5 +29,5 @@ export * from './useProductReviewAverage';
 export * from './useProductReviews';
 export * from './useProducts';
 export * from './useSearch';
-export * from './useVoucher';
+export * from './useCoupon';
 export * from './useStructuredData';

apps/web/composables/useCoupon/index.ts

@@ -0,0 +1,3 @@
+export * from './useCoupon';
+
+export * from './types';

apps/web/composables/useCoupon/types.ts

@@ -0,0 +1,17 @@
+import { Ref } from 'vue';
+import { DoAddCouponParams, Cart } from '@plentymarkets/shop-api';
+
+export interface UseCouponState {
+  loading: boolean;
+}
+
+export type AddCoupon = (params: DoAddCouponParams) => Promise<Cart>;
+export type DeleteCoupon = (params: DoAddCouponParams) => Promise<Cart>;
+
+export interface UseCoupon {
+  loading: Readonly<Ref<boolean>>;
+  addCoupon: AddCoupon;
+  deleteCoupon: DeleteCoupon;
+}
+
+export type UseCouponReturn = () => UseCoupon;

apps/web/composables/useVoucher/useVoucher.ts → apps/web/composables/useCoupon/useCoupon.ts

@@ -1,31 +1,31 @@
-import { UseVoucherReturn, UseVoucherState, AddVoucher, DeleteVoucher } from './types';
+import { UseCouponReturn, UseCouponState, AddCoupon, DeleteCoupon } from './types';
 import { useSdk } from '~/sdk';
 import { DoAddCouponParams } from '@plentymarkets/shop-api';
 /**
- * @description Composable for managing vouchers.
- * @returns UseVoucherReturn
+ * @description Composable for managing coupons.
+ * @returns UseCouponReturn
  * @example
  * ``` ts
- * const { addVoucher, deleteVoucher, loading } = useVoucher();
+ * const { addCoupon, deleteCoupon, loading } = useCoupon();
  * ```
  */
-export const useVoucher: UseVoucherReturn = () => {
-  const state = useState<UseVoucherState>('voucher', () => ({
+export const useCoupon: UseCouponReturn = () => {
+  const state = useState<UseCouponState>('coupon', () => ({
     loading: false,
   }));
 
   /**
-   * @description Function for adding a voucher to curent cart.
+   * @description Function for adding a coupon to curent cart.
    * @param params { DoAddCouponParams }
    * @return Cart
    * @example
    * ``` ts
-   * addVoucher({
+   * addCoupon({
       couponCode: 'KB82AZ'
     })
    * ```
    */
-  const addVoucher: AddVoucher = async (params: DoAddCouponParams) => {
+  const addCoupon: AddCoupon = async (params: DoAddCouponParams) => {
     const { $i18n } = useNuxtApp();
     const { send } = useNotification();
     const { getCart } = useCart();
@@ -34,7 +34,7 @@ export const useVoucher: UseVoucherReturn = () => {
     state.value.loading = false;
     if (response.data.value.data) {
       getCart();
-      send({ message: $i18n.t('coupon.voucherApplied'), type: 'positive' });
+      send({ message: $i18n.t('coupon.couponApplied'), type: 'positive' });
     } else if (response.data.value.error) {
       const error = {
         status: 500,
@@ -46,7 +46,7 @@ export const useVoucher: UseVoucherReturn = () => {
     return response.data.value.data;
   };
 
-  const deleteVoucher: DeleteVoucher = async (params: DoAddCouponParams) => {
+  const deleteCoupon: DeleteCoupon = async (params: DoAddCouponParams) => {
     state.value.loading = true;
     const { $i18n } = useNuxtApp();
     const { send } = useNotification();
@@ -56,7 +56,7 @@ export const useVoucher: UseVoucherReturn = () => {
     state.value.loading = false;
     if (response.data.value.data) {
       getCart();
-      send({ message: $i18n.t('coupon.voucherRemoved'), type: 'positive' });
+      send({ message: $i18n.t('coupon.couponRemoved'), type: 'positive' });
     } else if (response.data.value.error) {
       const error = {
         status: 500,
@@ -70,8 +70,8 @@ export const useVoucher: UseVoucherReturn = () => {
   };
 
   return {
-    addVoucher,
-    deleteVoucher,
+    addCoupon,
+    deleteCoupon,
     ...toRefs(state.value),
   };
 };

apps/web/lang/de.json

@@ -499,9 +499,9 @@
     "title": "Haben sie einen Gutscheincode?",
     "enterCode": "Gutschein-Code eingeben",
     "apply": "Einlösen",
-    "voucherApplied": "Der Gutschein wurde erfolgreich eingelöst.",
-    "voucherRemoved": "Der Gutschein wurde erfolgreich entfernt.",
-    "voucherInvalid": "Der Gutschein wurde bereits verwendet oder ist ungültig."
+    "couponApplied": "Der Gutschein wurde erfolgreich eingelöst.",
+    "couponRemoved": "Der Gutschein wurde erfolgreich entfernt.",
+    "couponInvalid": "Der Gutschein wurde bereits verwendet oder ist ungültig."
   },
   "error": {
     "errorActionIsNotExecuted": "Die Aktion konnte nicht ausgeführt werden.",

apps/web/lang/en.json

@@ -499,9 +499,9 @@
     "title": "Have a coupon code?",
     "enterCode": "Enter code",
     "apply": "Apply",
-    "voucherApplied": "The coupon has been added successfully",
-    "voucherRemoved": "The coupon has been removed successfully.",
-    "voucherInvalid": "The coupon has already been used or is invalid."
+    "couponApplied": "The coupon has been added successfully",
+    "couponRemoved": "The coupon has been removed successfully.",
+    "couponInvalid": "The coupon has already been used or is invalid."
   },
   "error": {
     "errorActionIsNotExecuted": "This action could not be executed.",

apps/web/pages/checkout.vue

@@ -58,7 +58,7 @@
         </div>
         <div class="relative md:sticky mt-4 md:top-20 h-fit" :class="{ 'pointer-events-none opacity-50': cartLoading }">
           <SfLoaderCircular v-if="cartLoading" class="absolute top-[130px] right-0 left-0 m-auto z-[999]" size="2xl" />
-          <Voucher class="my-5"></Voucher>
+          <Coupon class="my-5"/>
           <OrderSummary v-if="cart" :cart="cart">
             <PayPalExpressButton
               type="Checkout"