@licklist/design 0.58.6-dev.0 → 0.58.6-dev.10

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

@@ -2,6 +2,11 @@ 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,
@@ -12,6 +17,7 @@ export function Default(props) {
 }
 
 Default.args = {
+  paymentMetadata: paymentMetadata,
   isLoading: false,
   data: {
     amount: 3,
@@ -29,16 +35,550 @@ Default.args = {
     date: "2023-09-30_08-24-00",
     eventName: "alex test",
     formValues: {
-      348: {
-        id: 348,
+      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,
         quantity: 1,
-        price: 3,
-        productCategoryId: 216,
-        name: "test",
+        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,
+        },
       },
       numberOfPeople: 1,
     },
     shouldHidePeopleAmount: true,
-    menuSteps: [],
+    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,
+              },
+            ],
+          },
+        ],
+      },
+    ],
   },
 };

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

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