@licklist/design 0.68.1 → 0.68.2-dev.2

package/src/iframe/payment/payment-page/PaymentPage.stories.tsx

@@ -1,18 +1,18 @@
-import { Meta } from "@storybook/react";
-import { PaymentPage } from "./PaymentPage";
+import { Meta } from '@storybook/react'
+import { PaymentPage } from './PaymentPage'
 
 const paymentMetadata = {
   paid: 2,
   total: 4,
-};
+}
 
 export default {
-  title: "Iframe/PaymentPage",
+  title: 'Iframe/PaymentPage',
   component: Default,
-} as Meta;
+} as Meta
 
 export function Default(props) {
-  return <PaymentPage {...props} />;
+  return <PaymentPage {...props} />
 }
 
 Default.args = {
@@ -21,18 +21,18 @@ Default.args = {
   data: {
     amount: 3,
     order_id: 1584,
-    order_token: "token",
+    order_token: 'token',
     provider_country: null,
     provider_id: 16,
-    provider_name: "Festival",
+    provider_name: 'Festival',
   },
   isCreateLoading: false,
   accountId: 15,
   initRyft: () => Promise.resolve(null),
   onSubmit: () => Promise.resolve(null),
   bookingSummaryProps: {
-    date: "2023-09-30_08-24-00",
-    eventName: "alex test",
+    date: '2023-09-30_08-24-00',
+    eventName: 'alex test',
     formValues: {
       1274: {
         id: 1274,
@@ -40,7 +40,7 @@ Default.args = {
         price: 5,
         productCategoryId: 821,
         hasDeposit: true,
-        name: "deposit 1",
+        name: 'deposit 1',
         deposit: 3,
       },
       1275: {
@@ -49,7 +49,7 @@ Default.args = {
         price: 10,
         productCategoryId: 821,
         hasDeposit: true,
-        name: "deposit 2",
+        name: 'deposit 2',
         deposit: 4,
       },
       1711: {
@@ -58,7 +58,7 @@ Default.args = {
         price: 2,
         productCategoryId: 1113,
         hasDeposit: false,
-        name: "Product 4",
+        name: 'Product 4',
         deposit: 0,
       },
       1712: {
@@ -67,7 +67,7 @@ Default.args = {
         price: 4,
         productCategoryId: 1113,
         hasDeposit: false,
-        name: "Product 5",
+        name: 'Product 5',
         deposit: 0,
       },
       1713: {
@@ -76,7 +76,7 @@ Default.args = {
         price: 1,
         productCategoryId: 1113,
         hasDeposit: false,
-        name: "Product 6",
+        name: 'Product 6',
         deposit: 0,
       },
       1714: {
@@ -85,7 +85,7 @@ Default.args = {
         price: 2,
         productCategoryId: 1113,
         hasDeposit: false,
-        name: "Product 7",
+        name: 'Product 7',
         deposit: 0,
         1715: {
           id: 1715,
@@ -93,7 +93,7 @@ Default.args = {
           price: 3,
           productCategoryId: 1113,
           hasDeposit: false,
-          name: "Product 8",
+          name: 'Product 8',
           deposit: 0,
         },
         1716: {
@@ -102,7 +102,7 @@ Default.args = {
           price: 6,
           productCategoryId: 1113,
           hasDeposit: false,
-          name: "Product 9",
+          name: 'Product 9',
           deposit: 0,
         },
         1717: {
@@ -111,7 +111,7 @@ Default.args = {
           price: 2,
           productCategoryId: 1113,
           hasDeposit: false,
-          nam: "Product 10",
+          nam: 'Product 10',
           deposit: 0,
         },
       },
@@ -121,14 +121,14 @@ Default.args = {
     menuSteps: [
       {
         id: 955,
-        name: "Step 1",
+        name: 'Step 1',
         productCategories: [
           {
             id: 821,
-            name: "deposits",
+            name: 'deposits',
             minSubItems: null,
             maxSubItems: null,
-            type: "menuItems",
+            type: 'menuItems',
             collectUserInfo: false,
             isTimeRelated: false,
             hasTicket: false,
@@ -146,10 +146,10 @@ Default.args = {
                 id: 1274,
                 productCategoryId: 821,
                 productGroupId: null,
-                name: "deposit 1",
-                description: "",
+                name: 'deposit 1',
+                description: '',
                 minSpend: null,
-                type: "sale",
+                type: 'sale',
                 capacity: null,
                 duration: null,
                 weight: 0,
@@ -163,15 +163,15 @@ Default.args = {
                   {
                     id: 824,
                     imageableId: 1274,
-                    imageableType: "product",
-                    path: "images/original/000/000/000/000/824-3b3039714d7bb1fa.jpeg",
-                    imageType: "image",
-                    hash: "3b3039714d7bb1fa",
-                    url: "https://cdn.lickli.st/YQKp7HjHgvfGSLKj3WXOmFYseUUeCcaC/images/original/000/000/000/000/824-3b3039714d7bb1fa.jpeg",
+                    imageableType: 'product',
+                    path: 'images/original/000/000/000/000/824-3b3039714d7bb1fa.jpeg',
+                    imageType: 'image',
+                    hash: '3b3039714d7bb1fa',
+                    url: 'https://cdn.lickli.st/YQKp7HjHgvfGSLKj3WXOmFYseUUeCcaC/images/original/000/000/000/000/824-3b3039714d7bb1fa.jpeg',
                   },
                 ],
                 productCategory: null,
-                uuid: "46abf3fa-a7d8-4043-a09d-f7b4ea464cec",
+                uuid: '46abf3fa-a7d8-4043-a09d-f7b4ea464cec',
                 subSlots: 0,
                 pause: 0,
                 offset: 0,
@@ -192,10 +192,10 @@ Default.args = {
                 id: 1275,
                 productCategoryId: 821,
                 productGroupId: null,
-                name: "deposit 2",
-                description: "",
+                name: 'deposit 2',
+                description: '',
                 minSpend: null,
-                type: "sale",
+                type: 'sale',
                 capacity: null,
                 duration: null,
                 weight: 0,
@@ -207,7 +207,7 @@ Default.args = {
                 subProducts: [],
                 images: [],
                 productCategory: null,
-                uuid: "f0182699-adf8-497c-b6c4-3d43bdee93e9",
+                uuid: 'f0182699-adf8-497c-b6c4-3d43bdee93e9',
                 subSlots: 0,
                 pause: 0,
                 offset: 0,
@@ -228,10 +228,10 @@ Default.args = {
                 id: 1736,
                 productCategoryId: 821,
                 productGroupId: null,
-                name: "0 deposit",
-                description: "",
+                name: '0 deposit',
+                description: '',
                 minSpend: null,
-                type: "sale",
+                type: 'sale',
                 capacity: 0,
                 duration: null,
                 weight: 0,
@@ -243,7 +243,7 @@ Default.args = {
                 subProducts: [],
                 images: [],
                 productCategory: null,
-                uuid: "8d65e23e-65f0-4028-941a-755a68ecfdee",
+                uuid: '8d65e23e-65f0-4028-941a-755a68ecfdee',
                 subSlots: 0,
                 pause: 0,
                 offset: 0,
@@ -266,14 +266,14 @@ Default.args = {
       },
       {
         id: 1182,
-        name: "Step 2",
+        name: 'Step 2',
         productCategories: [
           {
             id: 1113,
-            name: "Test",
+            name: 'Test',
             minSubItems: 0,
             maxSubItems: 12,
-            type: "tickets",
+            type: 'tickets',
             collectUserInfo: false,
             isTimeRelated: false,
             hasTicket: true,
@@ -290,10 +290,10 @@ Default.args = {
                 id: 1703,
                 productCategoryId: 1113,
                 productGroupId: null,
-                name: "Test prod",
-                description: "",
+                name: 'Test prod',
+                description: '',
                 minSpend: null,
-                type: "sale",
+                type: 'sale',
                 capacity: 0,
                 duration: null,
                 weight: 0,
@@ -305,7 +305,7 @@ Default.args = {
                 subProducts: [],
                 images: [],
                 productCategory: null,
-                uuid: "1bc542ee-d998-4699-9889-5e8e16e52bb2",
+                uuid: '1bc542ee-d998-4699-9889-5e8e16e52bb2',
                 subSlots: 0,
                 pause: 0,
                 offset: 0,
@@ -326,10 +326,10 @@ Default.args = {
                 id: 1711,
                 productCategoryId: 1113,
                 productGroupId: null,
-                name: "Product 4",
-                description: "",
+                name: 'Product 4',
+                description: '',
                 minSpend: null,
-                type: "sale",
+                type: 'sale',
                 capacity: 0,
                 duration: null,
                 weight: 0,
@@ -341,7 +341,7 @@ Default.args = {
                 subProducts: [],
                 images: [],
                 productCategory: null,
-                uuid: "52b40cf2-b0aa-4dac-b8c7-900d722f0010",
+                uuid: '52b40cf2-b0aa-4dac-b8c7-900d722f0010',
                 subSlots: 0,
                 pause: 0,
                 offset: 0,
@@ -362,10 +362,10 @@ Default.args = {
                 id: 1712,
                 productCategoryId: 1113,
                 productGroupId: null,
-                name: "Product 5",
-                description: "",
+                name: 'Product 5',
+                description: '',
                 minSpend: null,
-                type: "sale",
+                type: 'sale',
                 capacity: 0,
                 duration: null,
                 weight: 0,
@@ -377,7 +377,7 @@ Default.args = {
                 subProducts: [],
                 images: [],
                 productCategory: null,
-                uuid: "f5410c89-afa0-4010-9386-cf3f630f74f0",
+                uuid: 'f5410c89-afa0-4010-9386-cf3f630f74f0',
                 subSlots: 0,
                 pause: 0,
                 offset: 0,
@@ -398,10 +398,10 @@ Default.args = {
                 id: 1713,
                 productCategoryId: 1113,
                 productGroupId: null,
-                name: "Product 6",
-                description: "",
+                name: 'Product 6',
+                description: '',
                 minSpend: null,
-                type: "sale",
+                type: 'sale',
                 capacity: 0,
                 duration: null,
                 weight: 0,
@@ -413,7 +413,7 @@ Default.args = {
                 subProducts: [],
                 images: [],
                 productCategory: null,
-                uuid: "4539eb35-17a4-4270-8569-5b9ad87354b7",
+                uuid: '4539eb35-17a4-4270-8569-5b9ad87354b7',
                 subSlots: 0,
                 pause: 0,
                 offset: 0,
@@ -434,10 +434,10 @@ Default.args = {
                 id: 1714,
                 productCategoryId: 1113,
                 productGroupId: null,
-                name: "Product 7",
-                description: "",
+                name: 'Product 7',
+                description: '',
                 minSpend: null,
-                type: "sale",
+                type: 'sale',
                 capacity: 0,
                 duration: null,
                 weight: 0,
@@ -449,7 +449,7 @@ Default.args = {
                 subProducts: [],
                 images: [],
                 productCategory: null,
-                uuid: "aa40d36f-dd17-4604-86d5-5eb331944fc0",
+                uuid: 'aa40d36f-dd17-4604-86d5-5eb331944fc0',
                 subSlots: 0,
                 pause: 0,
                 offset: 0,
@@ -470,10 +470,10 @@ Default.args = {
                 id: 1715,
                 productCategoryId: 1113,
                 productGroupId: null,
-                name: "Product 8",
-                description: "",
+                name: 'Product 8',
+                description: '',
                 minSpend: null,
-                type: "sale",
+                type: 'sale',
                 capacity: 0,
                 duration: null,
                 weight: 0,
@@ -485,7 +485,7 @@ Default.args = {
                 subProducts: [],
                 images: [],
                 productCategory: null,
-                uuid: "160849ed-f058-4102-845c-00fdae702d7d",
+                uuid: '160849ed-f058-4102-845c-00fdae702d7d',
                 subSlots: 0,
                 pause: 0,
                 offset: 0,
@@ -506,10 +506,10 @@ Default.args = {
                 id: 1716,
                 productCategoryId: 1113,
                 productGroupId: null,
-                name: "Product 9",
-                description: "",
+                name: 'Product 9',
+                description: '',
                 minSpend: null,
-                type: "sale",
+                type: 'sale',
                 capacity: 0,
                 duration: null,
                 weight: 0,
@@ -521,7 +521,7 @@ Default.args = {
                 subProducts: [],
                 images: [],
                 productCategory: null,
-                uuid: "934ad342-9f08-4f40-b814-9f74a56e9a58",
+                uuid: '934ad342-9f08-4f40-b814-9f74a56e9a58',
                 subSlots: 0,
                 pause: 0,
                 offset: 0,
@@ -542,10 +542,10 @@ Default.args = {
                 id: 1717,
                 productCategoryId: 1113,
                 productGroupId: null,
-                name: "Product 10",
-                description: "",
+                name: 'Product 10',
+                description: '',
                 minSpend: null,
-                type: "sale",
+                type: 'sale',
                 capacity: 0,
                 duration: null,
                 weight: 0,
@@ -557,7 +557,7 @@ Default.args = {
                 subProducts: [],
                 images: [],
                 productCategory: null,
-                uuid: "9c00e536-4e57-43ef-8b50-8552b0f5181c",
+                uuid: '9c00e536-4e57-43ef-8b50-8552b0f5181c',
                 subSlots: 0,
                 pause: 0,
                 offset: 0,
@@ -580,4 +580,4 @@ Default.args = {
       },
     ],
   },
-};
+}

package/src/iframe/payment/payment-page/PaymentPage.tsx

@@ -1,35 +1,35 @@
-import { useContext, useEffect } from "react";
-import { useLocation } from "react-router-dom";
-import { useTranslation } from "react-i18next";
-import { Button, Col } from "react-bootstrap";
-import { PaymentSessionContext } from "@licklist/plugins/dist/context/payment/PaymentSessionContext";
-import { PaymentLinkResponse } from "@licklist/plugins/dist/hooks/Api/usePaymentApi";
-import { BookingSummaryProps } from "src/iframe/order-process/components/BookingSummary/types";
+import { useContext, useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+import { Button, Col } from 'react-bootstrap'
+import { PaymentSessionContext } from '@licklist/plugins/dist/context/payment/PaymentSessionContext'
+import { PaymentLinkResponse } from '@licklist/plugins/dist/hooks/Api/usePaymentApi'
+import { BookingSummaryProps } from 'src/iframe/order-process/components/BookingSummary/types'
 // eslint-disable-next-line max-len
-import { SummaryTotalBlock } from "../../order-process/components/BookingSummary/components/SummaryTotal/components/SummaryTotalBlock";
-import { LoaderIndicator } from "../../../static";
+import { SummaryTotalBlock } from '../../order-process/components/BookingSummary/components/SummaryTotal/components/SummaryTotalBlock'
+import { LoaderIndicator } from '../../../static'
 import {
   RyftPaymentForm,
   RyftPaymentFormProps,
-} from "../../ryft/RyftPaymentForm";
-import { PaymentTimer } from "./PaymentTimer";
-import { Page, PageBody } from "../../page";
-import { BookingSummary } from "../../order-process";
-import { cartSumByOrderProducts } from "../../order-process/components/BookingSummary/utils";
-import { PAGE_BODY_WITH_SCROLL } from "../../page/components/PageBody/constants";
+} from '../../ryft/RyftPaymentForm'
+import { PaymentTimer } from './PaymentTimer'
+import { Page, PageBody } from '../../page'
+import { BookingSummary } from '../../order-process'
+import { cartSumByOrderProducts } from '../../order-process/components/BookingSummary/utils'
+import { PAGE_BODY_WITH_SCROLL } from '../../page/components/PageBody/constants'
 
 export interface PaymentMetadata {
-  total: number;
-  paid: number;
+  total: number
+  paid: number
 }
 
 interface PaymentProps extends RyftPaymentFormProps {
-  onCloseIframePayment?: () => void;
-  onFailIframePayment?: () => void;
-  data?: PaymentLinkResponse | null;
-  isLoading: boolean;
-  bookingSummaryProps: Omit<BookingSummaryProps, "totallWithDiscount">;
-  paymentMetadata?: PaymentMetadata;
+  onCloseIframePayment?: () => void
+  onFailIframePayment?: () => void
+  data?: PaymentLinkResponse | null
+  isLoading: boolean
+  bookingSummaryProps: Omit<BookingSummaryProps, 'totallWithDiscount'>
+  paymentMetadata?: PaymentMetadata
 }
 
 export const PaymentPage = ({
@@ -41,19 +41,19 @@ export const PaymentPage = ({
   paymentMetadata,
   ...ryftPaymentFormProps
 }: PaymentProps) => {
-  const { t } = useTranslation("Design");
-  const { search } = useLocation();
+  const { t } = useTranslation('Design')
+  const { search } = useLocation()
 
-  const { isPaymentSessionExpired } = useContext(PaymentSessionContext);
+  const { isPaymentSessionExpired } = useContext(PaymentSessionContext)
 
   const isIframePayment = Boolean(
-    new URLSearchParams(search).get("isIframePayment"),
-  );
+    new URLSearchParams(search).get('isIframePayment'),
+  )
 
   const onCloseWindow = () => {
     // TODO discuss redirect to site
-    window.location.href = "https://booked.it/";
-  };
+    window.location.href = 'https://booked.it/'
+  }
 
   // TODO wait for Brad's design for close and go back buttons
   // const onGoBack = () => {
@@ -62,24 +62,24 @@ export const PaymentPage = ({
 
   useEffect(() => {
     if (!isIframePayment || !onCloseIframePayment) {
-      return;
+      return
     }
-    window.addEventListener("beforeunload", () => {
-      onCloseIframePayment();
-    });
+    window.addEventListener('beforeunload', () => {
+      onCloseIframePayment()
+    })
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [])
 
   useEffect(() => {
     if (!isPaymentSessionExpired || !isIframePayment || !onFailIframePayment) {
-      return;
+      return
     }
-    onFailIframePayment();
+    onFailIframePayment()
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isPaymentSessionExpired]);
+  }, [isPaymentSessionExpired])
 
   if (isLoading) {
-    return <LoaderIndicator isLoaded={false} />;
+    return <LoaderIndicator isLoaded={false} />
   }
 
   if (data === null) {
@@ -89,10 +89,10 @@ export const PaymentPage = ({
           leftBlock={
             <PageBody.LeftBlock>
               <div className="d-flex h-100 w-100 justify-content-center align-items-center flex-column">
-                <h6>{t("linkNotActiveOrExpired")}</h6>
+                <h6>{t('linkNotActiveOrExpired')}</h6>
                 <Col xs={12} md={3}>
                   <Button className="mt-5 w-20" onClick={onCloseWindow}>
-                    {t("backToSite")}
+                    {t('backToSite')}
                   </Button>
                 </Col>
               </div>
@@ -100,20 +100,20 @@ export const PaymentPage = ({
           }
         />
       </Page>
-    );
+    )
   }
 
   const orderTotalAmountByFormValues = cartSumByOrderProducts(
     bookingSummaryProps?.formValues &&
       Object.values(bookingSummaryProps?.formValues),
-  );
+  )
 
   // User can fill promo code only in iframe application.
   // It isn't possible via payment link. This check will
   // be applied when there is no metadata and in case when
   // orderValues sum is greater than amount in order.
   const isCalculatedAmountGreaterThanOrderAmount =
-    orderTotalAmountByFormValues > data?.amount;
+    orderTotalAmountByFormValues > data?.amount
 
   return (
     <Page className="payment_link">
@@ -155,15 +155,15 @@ export const PaymentPage = ({
                   {paymentMetadata ? (
                     <>
                       <SummaryTotalBlock
-                        label={t("total")}
+                        label={t('total')}
                         amount={paymentMetadata.total || 0}
                       />
                       <SummaryTotalBlock
-                        label={t("paidSum")}
+                        label={t('paidSum')}
                         amount={paymentMetadata.paid || 0}
                       />
                       <SummaryTotalBlock
-                        label={t("remaining")}
+                        label={t('remaining')}
                         amount={
                           paymentMetadata.total - paymentMetadata.paid || 0
                         }
@@ -173,7 +173,7 @@ export const PaymentPage = ({
                     <>
                       {isCalculatedAmountGreaterThanOrderAmount && (
                         <SummaryTotalBlock
-                          label={t("total")}
+                          label={t('total')}
                           amount={
                             orderTotalAmountByFormValues +
                             (bookingSummaryProps?.transactionFee || 0)
@@ -184,8 +184,8 @@ export const PaymentPage = ({
                       <SummaryTotalBlock
                         label={t(
                           isCalculatedAmountGreaterThanOrderAmount
-                            ? "totalWithDiscount"
-                            : "total",
+                            ? 'totalWithDiscount'
+                            : 'total',
                         )}
                         amount={
                           data?.amount +
@@ -201,5 +201,5 @@ export const PaymentPage = ({
         }
       />
     </Page>
-  );
-};
+  )
+}