@licklist/design 0.58.6-dev.9 → 0.58.7

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

@@ -2,11 +2,6 @@ import { Meta } from "@storybook/react";
 import React from "react";
 import { PaymentPage } from "./PaymentPage";
 
-const paymentMetadata = {
-  paid: 2,
-  total: 4,
-};
-
 export default {
   title: "Iframe/PaymentPage",
   component: Default,
@@ -17,7 +12,6 @@ export function Default(props) {
 }
 
 Default.args = {
-  paymentMetadata: paymentMetadata,
   isLoading: false,
   data: {
     amount: 3,
@@ -35,550 +29,16 @@ Default.args = {
     date: "2023-09-30_08-24-00",
     eventName: "alex test",
     formValues: {
-      1274: {
-        id: 1274,
-        quantity: 1,
-        price: 5,
-        productCategoryId: 821,
-        hasDeposit: true,
-        name: "deposit 1",
-        deposit: 3,
-      },
-      1275: {
-        id: 1275,
-        quantity: 1,
-        price: 10,
-        productCategoryId: 821,
-        hasDeposit: true,
-        name: "deposit 2",
-        deposit: 4,
-      },
-      1711: {
-        id: 1711,
-        quantity: 1,
-        price: 2,
-        productCategoryId: 1113,
-        hasDeposit: false,
-        name: "Product 4",
-        deposit: 0,
-      },
-      1712: {
-        id: 1712,
-        quantity: 1,
-        price: 4,
-        productCategoryId: 1113,
-        hasDeposit: false,
-        name: "Product 5",
-        deposit: 0,
-      },
-      1713: {
-        id: 1713,
+      348: {
+        id: 348,
         quantity: 1,
-        price: 1,
-        productCategoryId: 1113,
-        hasDeposit: false,
-        name: "Product 6",
-        deposit: 0,
-      },
-      1714: {
-        id: 1714,
-        quantity: 1,
-        price: 2,
-        productCategoryId: 1113,
-        hasDeposit: false,
-        name: "Product 7",
-        deposit: 0,
-        1715: {
-          id: 1715,
-          quantity: 1,
-          price: 3,
-          productCategoryId: 1113,
-          hasDeposit: false,
-          name: "Product 8",
-          deposit: 0,
-        },
-        1716: {
-          id: 1716,
-          quantity: 1,
-          price: 6,
-          productCategoryId: 1113,
-          hasDeposit: false,
-          name: "Product 9",
-          deposit: 0,
-        },
-        1717: {
-          id: 1717,
-          quantity: 1,
-          price: 2,
-          productCategoryId: 1113,
-          hasDeposit: false,
-          nam: "Product 10",
-          deposit: 0,
-        },
+        price: 3,
+        productCategoryId: 216,
+        name: "test",
       },
       numberOfPeople: 1,
     },
     shouldHidePeopleAmount: true,
-    menuSteps: [
-      {
-        id: 955,
-        name: "Step 1",
-        productCategories: [
-          {
-            id: 821,
-            name: "deposits",
-            minSubItems: null,
-            maxSubItems: null,
-            type: "menuItems",
-            collectUserInfo: false,
-            isTimeRelated: false,
-            hasTicket: false,
-            hasSubEvents: false,
-            weight: 0,
-            isReusable: false,
-            menuStepId: 955,
-            remainderExpireAfter: 4,
-            zoneId: null,
-            sort: 0,
-            zone: {},
-            allowDeposits: true,
-            products: [
-              {
-                id: 1274,
-                productCategoryId: 821,
-                productGroupId: null,
-                name: "deposit 1",
-                description: "",
-                minSpend: null,
-                type: "sale",
-                capacity: null,
-                duration: null,
-                weight: 0,
-                isAvailable: true,
-                isRequired: false,
-                quantitySelector: 1,
-                hasSpecialNotes: false,
-                termsAndConditions: null,
-                subProducts: [],
-                images: [
-                  {
-                    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",
-                  },
-                ],
-                productCategory: null,
-                uuid: "46abf3fa-a7d8-4043-a09d-f7b4ea464cec",
-                subSlots: 0,
-                pause: 0,
-                offset: 0,
-                serviceTime: 0,
-                sort: 0,
-                isUnlimited: true,
-                minQuantity: 0,
-                maxQuantity: 0,
-                availableQuantity: null,
-                totalQuantity: 0,
-                price: 5,
-                minAmount: 0,
-                maxAmount: 0,
-                isSoldOut: false,
-                deposit: 3,
-              },
-              {
-                id: 1275,
-                productCategoryId: 821,
-                productGroupId: null,
-                name: "deposit 2",
-                description: "",
-                minSpend: null,
-                type: "sale",
-                capacity: null,
-                duration: null,
-                weight: 0,
-                isAvailable: true,
-                isRequired: false,
-                quantitySelector: 1,
-                hasSpecialNotes: false,
-                termsAndConditions: null,
-                subProducts: [],
-                images: [],
-                productCategory: null,
-                uuid: "f0182699-adf8-497c-b6c4-3d43bdee93e9",
-                subSlots: 0,
-                pause: 0,
-                offset: 0,
-                serviceTime: 0,
-                sort: 0,
-                isUnlimited: false,
-                minQuantity: 0,
-                maxQuantity: 0,
-                availableQuantity: 22222,
-                totalQuantity: 22222,
-                price: 10,
-                minAmount: 0,
-                maxAmount: 22222,
-                isSoldOut: false,
-                deposit: 4,
-              },
-              {
-                id: 1736,
-                productCategoryId: 821,
-                productGroupId: null,
-                name: "0 deposit",
-                description: "",
-                minSpend: null,
-                type: "sale",
-                capacity: 0,
-                duration: null,
-                weight: 0,
-                isAvailable: true,
-                isRequired: false,
-                quantitySelector: 1,
-                hasSpecialNotes: false,
-                termsAndConditions: null,
-                subProducts: [],
-                images: [],
-                productCategory: null,
-                uuid: "8d65e23e-65f0-4028-941a-755a68ecfdee",
-                subSlots: 0,
-                pause: 0,
-                offset: 0,
-                serviceTime: 0,
-                sort: 0,
-                isUnlimited: true,
-                minQuantity: 0,
-                maxQuantity: 0,
-                availableQuantity: null,
-                totalQuantity: 0,
-                price: 4,
-                minAmount: 0,
-                maxAmount: 0,
-                isSoldOut: false,
-                deposit: 0,
-              },
-            ],
-          },
-        ],
-      },
-      {
-        id: 1182,
-        name: "Step 2",
-        productCategories: [
-          {
-            id: 1113,
-            name: "Test",
-            minSubItems: 0,
-            maxSubItems: 12,
-            type: "tickets",
-            collectUserInfo: false,
-            isTimeRelated: false,
-            hasTicket: true,
-            hasSubEvents: false,
-            weight: 0,
-            isReusable: false,
-            menuStepId: 1182,
-            zoneId: null,
-            sort: 0,
-            zone: {},
-            allowDeposits: false,
-            products: [
-              {
-                id: 1703,
-                productCategoryId: 1113,
-                productGroupId: null,
-                name: "Test prod",
-                description: "",
-                minSpend: null,
-                type: "sale",
-                capacity: 0,
-                duration: null,
-                weight: 0,
-                isAvailable: true,
-                isRequired: false,
-                quantitySelector: 1,
-                hasSpecialNotes: false,
-                termsAndConditions: null,
-                subProducts: [],
-                images: [],
-                productCategory: null,
-                uuid: "1bc542ee-d998-4699-9889-5e8e16e52bb2",
-                subSlots: 0,
-                pause: 0,
-                offset: 0,
-                serviceTime: 0,
-                sort: 0,
-                isUnlimited: false,
-                minQuantity: 1,
-                maxQuantity: 12,
-                availableQuantity: 21,
-                totalQuantity: 21,
-                price: 2,
-                minAmount: 1,
-                maxAmount: 12,
-                isSoldOut: false,
-                deposit: 0,
-              },
-              {
-                id: 1711,
-                productCategoryId: 1113,
-                productGroupId: null,
-                name: "Product 4",
-                description: "",
-                minSpend: null,
-                type: "sale",
-                capacity: 0,
-                duration: null,
-                weight: 0,
-                isAvailable: true,
-                isRequired: false,
-                quantitySelector: 1,
-                hasSpecialNotes: false,
-                termsAndConditions: null,
-                subProducts: [],
-                images: [],
-                productCategory: null,
-                uuid: "52b40cf2-b0aa-4dac-b8c7-900d722f0010",
-                subSlots: 0,
-                pause: 0,
-                offset: 0,
-                serviceTime: 0,
-                sort: 0,
-                isUnlimited: true,
-                minQuantity: 0,
-                maxQuantity: 0,
-                availableQuantity: null,
-                totalQuantity: 0,
-                price: 2,
-                minAmount: 0,
-                maxAmount: 0,
-                isSoldOut: false,
-                deposit: 0,
-              },
-              {
-                id: 1712,
-                productCategoryId: 1113,
-                productGroupId: null,
-                name: "Product 5",
-                description: "",
-                minSpend: null,
-                type: "sale",
-                capacity: 0,
-                duration: null,
-                weight: 0,
-                isAvailable: true,
-                isRequired: false,
-                quantitySelector: 1,
-                hasSpecialNotes: false,
-                termsAndConditions: null,
-                subProducts: [],
-                images: [],
-                productCategory: null,
-                uuid: "f5410c89-afa0-4010-9386-cf3f630f74f0",
-                subSlots: 0,
-                pause: 0,
-                offset: 0,
-                serviceTime: 0,
-                sort: 0,
-                isUnlimited: true,
-                minQuantity: 0,
-                maxQuantity: 0,
-                availableQuantity: null,
-                totalQuantity: 0,
-                price: 4,
-                minAmount: 0,
-                maxAmount: 0,
-                isSoldOut: false,
-                deposit: 0,
-              },
-              {
-                id: 1713,
-                productCategoryId: 1113,
-                productGroupId: null,
-                name: "Product 6",
-                description: "",
-                minSpend: null,
-                type: "sale",
-                capacity: 0,
-                duration: null,
-                weight: 0,
-                isAvailable: true,
-                isRequired: false,
-                quantitySelector: 1,
-                hasSpecialNotes: false,
-                termsAndConditions: null,
-                subProducts: [],
-                images: [],
-                productCategory: null,
-                uuid: "4539eb35-17a4-4270-8569-5b9ad87354b7",
-                subSlots: 0,
-                pause: 0,
-                offset: 0,
-                serviceTime: 0,
-                sort: 0,
-                isUnlimited: true,
-                minQuantity: 0,
-                maxQuantity: 0,
-                availableQuantity: null,
-                totalQuantity: 0,
-                price: 1,
-                minAmount: 0,
-                maxAmount: 0,
-                isSoldOut: false,
-                deposit: 0,
-              },
-              {
-                id: 1714,
-                productCategoryId: 1113,
-                productGroupId: null,
-                name: "Product 7",
-                description: "",
-                minSpend: null,
-                type: "sale",
-                capacity: 0,
-                duration: null,
-                weight: 0,
-                isAvailable: true,
-                isRequired: false,
-                quantitySelector: 1,
-                hasSpecialNotes: false,
-                termsAndConditions: null,
-                subProducts: [],
-                images: [],
-                productCategory: null,
-                uuid: "aa40d36f-dd17-4604-86d5-5eb331944fc0",
-                subSlots: 0,
-                pause: 0,
-                offset: 0,
-                serviceTime: 0,
-                sort: 0,
-                isUnlimited: true,
-                minQuantity: 0,
-                maxQuantity: 0,
-                availableQuantity: null,
-                totalQuantity: 0,
-                price: 2,
-                minAmount: 0,
-                maxAmount: 0,
-                isSoldOut: false,
-                deposit: 0,
-              },
-              {
-                id: 1715,
-                productCategoryId: 1113,
-                productGroupId: null,
-                name: "Product 8",
-                description: "",
-                minSpend: null,
-                type: "sale",
-                capacity: 0,
-                duration: null,
-                weight: 0,
-                isAvailable: true,
-                isRequired: false,
-                quantitySelector: 1,
-                hasSpecialNotes: false,
-                termsAndConditions: null,
-                subProducts: [],
-                images: [],
-                productCategory: null,
-                uuid: "160849ed-f058-4102-845c-00fdae702d7d",
-                subSlots: 0,
-                pause: 0,
-                offset: 0,
-                serviceTime: 0,
-                sort: 0,
-                isUnlimited: true,
-                minQuantity: 0,
-                maxQuantity: 0,
-                availableQuantity: null,
-                totalQuantity: 0,
-                price: 3,
-                minAmount: 0,
-                maxAmount: 0,
-                isSoldOut: false,
-                deposit: 0,
-              },
-              {
-                id: 1716,
-                productCategoryId: 1113,
-                productGroupId: null,
-                name: "Product 9",
-                description: "",
-                minSpend: null,
-                type: "sale",
-                capacity: 0,
-                duration: null,
-                weight: 0,
-                isAvailable: true,
-                isRequired: false,
-                quantitySelector: 1,
-                hasSpecialNotes: false,
-                termsAndConditions: null,
-                subProducts: [],
-                images: [],
-                productCategory: null,
-                uuid: "934ad342-9f08-4f40-b814-9f74a56e9a58",
-                subSlots: 0,
-                pause: 0,
-                offset: 0,
-                serviceTime: 0,
-                sort: 0,
-                isUnlimited: true,
-                minQuantity: 0,
-                maxQuantity: 0,
-                availableQuantity: null,
-                totalQuantity: 0,
-                price: 6,
-                minAmount: 0,
-                maxAmount: 0,
-                isSoldOut: false,
-                deposit: 0,
-              },
-              {
-                id: 1717,
-                productCategoryId: 1113,
-                productGroupId: null,
-                name: "Product 10",
-                description: "",
-                minSpend: null,
-                type: "sale",
-                capacity: 0,
-                duration: null,
-                weight: 0,
-                isAvailable: true,
-                isRequired: false,
-                quantitySelector: 1,
-                hasSpecialNotes: false,
-                termsAndConditions: null,
-                subProducts: [],
-                images: [],
-                productCategory: null,
-                uuid: "9c00e536-4e57-43ef-8b50-8552b0f5181c",
-                subSlots: 0,
-                pause: 0,
-                offset: 0,
-                serviceTime: 0,
-                sort: 0,
-                isUnlimited: true,
-                minQuantity: 0,
-                maxQuantity: 0,
-                availableQuantity: null,
-                totalQuantity: 0,
-                price: 2,
-                minAmount: 0,
-                maxAmount: 0,
-                isSoldOut: false,
-                deposit: 0,
-              },
-            ],
-          },
-        ],
-      },
-    ],
+    menuSteps: [],
   },
 };

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

@@ -13,10 +13,9 @@ import {
   RyftPaymentFormProps,
 } from "../../ryft/RyftPaymentForm";
 import { PaymentTimer } from "./PaymentTimer";
-import { Page, PageBody } from "../../page";
-import { BookingSummary } from "../../order-process";
+import { Page, PageBody, PageHeader } from "../../page";
+import { BookingSummary, BookingSummaryFooter } from "../../order-process";
 import { cartSumByOrderProducts } from "../../order-process/components/BookingSummary/utils";
-import { PAYMENT_LINK_PAGE_BODY } from "../../page/components/PageBody/constants";
 
 export interface PaymentMetadata {
   total: number;
@@ -45,7 +44,6 @@ export const PaymentPage = ({
   const { search } = useLocation();
 
   const { isPaymentSessionExpired } = useContext(PaymentSessionContext);
-
   const isIframePayment = Boolean(
     new URLSearchParams(search).get("isIframePayment")
   );
@@ -55,10 +53,9 @@ export const PaymentPage = ({
     window.location.href = "https://booked.it/";
   };
 
-  // TODO wait for Brad's design for close and go back buttons
-  // const onGoBack = () => {
-  //   window.close();
-  // };
+  const onGoBack = () => {
+    window.close();
+  };
 
   useEffect(() => {
     if (!isIframePayment || !onCloseIframePayment) {
@@ -116,41 +113,32 @@ export const PaymentPage = ({
     orderTotalAmountByFormValues > data?.amount;
 
   return (
-    <Page className="payment_link">
-      {/* TODO wait for Brad's design for close and go back buttons */}
-      {/* <PageHeader
-        className="no-page-header"
-        showBackButton={isIframePayment}
-        onBackButtonClick={isIframePayment ? onGoBack : undefined}
-        showCloseButton={isIframePayment}
-        onCloseButtonClick={isIframePayment ? onGoBack : undefined}
-      /> */}
+    <Page
+      className="payment_link"
+      headerBlock={
+        <PageHeader
+          showBackButton={isIframePayment}
+          onBackButtonClick={isIframePayment ? onGoBack : undefined}
+          showCloseButton={isIframePayment}
+          onCloseButtonClick={isIframePayment ? onGoBack : undefined}
+        >
+          <PaymentTimer />
+          <div className="d-flex align-items-center justify-content-center w-100">
+            {t("paymentDetails")}
+          </div>
+        </PageHeader>
+      }
+    >
       <PageBody
-        id={PAYMENT_LINK_PAGE_BODY}
         leftBlock={
           <PageBody.LeftBlock>
-            <div className="d-flex align-items-center mb-5">
-              <PaymentTimer />
-            </div>
             <RyftPaymentForm {...ryftPaymentFormProps} />
           </PageBody.LeftBlock>
         }
         rightBlock={
-          <PageBody.RightBlock>
-            <BookingSummary
-              {...bookingSummaryProps}
-              isPaymentPage
-              headerComponent={
-                <SummaryTotalBlock
-                  amount={
-                    paymentMetadata
-                      ? paymentMetadata.total
-                      : orderTotalAmountByFormValues +
-                        (bookingSummaryProps?.transactionFee || 0)
-                  }
-                />
-              }
-              footer={
+          <PageBody.RightBlock
+            bottomBlock={
+              <BookingSummaryFooter showButton={false}>
                 <div className="d-flex flex-column justify-content-between">
                   {paymentMetadata ? (
                     <>
@@ -195,8 +183,11 @@ export const PaymentPage = ({
                     </>
                   )}
                 </div>
-              }
-            />
+              </BookingSummaryFooter>
+            }
+          >
+            <h6>{t("paymentDetails")}</h6>
+            <BookingSummary {...bookingSummaryProps} />
           </PageBody.RightBlock>
         }
       />