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

package/src/iframe/order-process/components/BookingSummary/BookingSummary.tsx

@@ -8,6 +8,8 @@ import { ProductsByMenuStep } from "./components/ProductsByMenuStep";
 import { BookingSummaryProps } from "./types";
 import { SummaryTotal } from "./components/SummaryTotal";
 import { BookingSummaryAccordion } from "./components/BookingSummaryAccordion";
+import { ReactComponent as TicketIcon } from "../../../../assets/iframe/ticket.svg";
+import { ReactComponent as CalendarIcon } from "../../../../assets/iframe/calendar.svg";
 
 export const BookingSummary = ({
   date,
@@ -22,6 +24,10 @@ export const BookingSummary = ({
   hasPeopleInput,
   isPaymentLink,
   peopleAmount,
+  footer,
+  headerComponent,
+  // TODO Remove this, when all iframe pages will be ready
+  isPaymentPage,
 }: Omit<BookingSummaryProps, "totallWithDiscount">) => {
   const { t } = useTranslation("Design");
   const { formatNumber } = useIntl();
@@ -36,11 +42,18 @@ export const BookingSummary = ({
 
   return (
     <div className="payment-booking-summary">
-      <BookingSummaryAccordion hasPeopleInput={hasPeopleInput}>
+      <BookingSummaryAccordion
+        isPaymentPage={isPaymentPage}
+        hasPeopleInput={hasPeopleInput}
+        headerComponent={headerComponent}
+      >
         <div className="event-info">
-          <p className="m-0 title event-name">{eventName}</p>
-          <p className="m-0">{date}</p>
-          {time && <p className="m-0">{time}</p>}
+          <EventInfo
+            eventName={eventName}
+            isPaymentPage={isPaymentPage}
+            date={date}
+            time={time}
+          />
         </div>
         <hr />
 
@@ -62,8 +75,8 @@ export const BookingSummary = ({
               {!shouldHidePeopleAmount && peopleAmount > 0 && (
                 <>
                   <hr />
-                  <div className="d-flex justify-content-between mt-3">
-                    <p className="m-0">{t("people")}:</p>
+                  <div className="d-flex justify-content-between mt-3 people">
+                    <p className="m-0 payment-metadata">{t("people")}:</p>
                     <p className="price">{peopleAmount}</p>
                   </div>
                 </>
@@ -73,7 +86,9 @@ export const BookingSummary = ({
                 <>
                   <hr />
                   <div className="d-flex justify-content-between mt-3">
-                    <p className="m-0">{t("transactionFee")}:</p>
+                    <p className="m-0 payment-metadata">
+                      {t("transactionFee")}:
+                    </p>
                     <p className="price">
                       {formatNumber(transactionFee, {
                         style: "currency",
@@ -84,6 +99,7 @@ export const BookingSummary = ({
                 </>
               )}
             </div>
+            {footer}
           </div>
         ) : (
           <div className="cart-items">
@@ -97,3 +113,38 @@ export const BookingSummary = ({
 
 BookingSummary.SummaryTotal = SummaryTotal;
 BookingSummary.Accordion = BookingSummaryAccordion;
+
+const EventInfo = ({
+  isPaymentPage,
+  eventName,
+  date,
+  time,
+}: Pick<
+  BookingSummaryProps,
+  "date" | "time" | "eventName" | "isPaymentPage"
+>) => {
+  if (isPaymentPage) {
+    return (
+      <>
+        <div className="d-flex align-items-center mb-5">
+          <TicketIcon height={16} width={20} fill="black" />
+          <div className="m-0 pl-2 title event-name metadata">{eventName}</div>
+        </div>
+
+        <div className="d-flex align-items-center mb-5">
+          <CalendarIcon height={16} width={20} fill="black" />
+          <div className="m-0 pl-2 metadata">{date}</div>
+        </div>
+        {time && <div className="mb-5 metadata">{time}</div>}
+      </>
+    );
+  }
+
+  return (
+    <>
+      <p className="m-0 title event-name">{eventName}</p>
+      <p className="m-0">{date}</p>
+      {time && <p className="m-0">{time}</p>}
+    </>
+  );
+};

package/src/iframe/order-process/components/BookingSummary/components/BookingSummaryAccordion/BookingSummaryAccordion.tsx

@@ -3,6 +3,7 @@ import React, {
   useCallback,
   PropsWithChildren,
   useEffect,
+  ReactElement,
 } from "react";
 import { Accordion } from "react-bootstrap";
 import { useWindowDimensions } from "@licklist/plugins/dist/hooks/Media/useWindowDimensions";
@@ -20,6 +21,9 @@ export type BookingSummaryAccordionProps = PropsWithChildren<{
   title?: string;
   showTitleOnlyOnMobile?: boolean;
   hasPeopleInput?: boolean;
+  // TODO Remove this, when all iframe pages will be ready
+  isPaymentPage?: boolean;
+  headerComponent?: ReactElement;
 }>;
 
 export const BookingSummaryAccordion = ({
@@ -27,6 +31,8 @@ export const BookingSummaryAccordion = ({
   title,
   showTitleOnlyOnMobile = false,
   hasPeopleInput,
+  isPaymentPage,
+  headerComponent,
 }: BookingSummaryAccordionProps) => {
   const { width } = useWindowDimensions();
   const [isExpanded, setIsExpanded] = useState(width <= MOBILE_WIDTH);
@@ -68,10 +74,12 @@ export const BookingSummaryAccordion = ({
   return (
     <Accordion defaultActiveKey={ACCORDION_KEY} onSelect={onSelect}>
       <ToggleHeader
+        isPaymentPage={isPaymentPage}
         showExpandButton={showExpandButton}
         isExpanded={isExpanded}
         title={title}
         hideComponent={!showToggleHeader}
+        headerComponent={headerComponent}
       />
       <Accordion.Collapse
         eventKey={ACCORDION_KEY}

package/src/iframe/order-process/components/BookingSummary/components/SummaryTotal/components/SummaryTotalBlock.tsx

@@ -3,7 +3,7 @@ import { useIntl } from "react-intl";
 import * as Config from "@licklist/core/dist/Config";
 
 export type SummaryTotalBlockProps = {
-  label: string;
+  label?: string;
   amount: number;
 };
 
@@ -15,13 +15,13 @@ export const SummaryTotalBlock = ({
 
   return (
     <div className="total">
-      <p className="m-0">{label}</p>
-      <p className="m-0 price">
+      {label && <div>{label}</div>}
+      <div className="m-0 price">
         {formatNumber(amount, {
           style: "currency",
           currency: Config.Currency.GBP,
         })}
-      </p>
+      </div>
     </div>
   );
 };

package/src/iframe/order-process/components/BookingSummary/components/ToggleHeader/ToggleHeader.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect } from "react";
+import React, { ReactElement, useContext, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useAccordionToggle } from "react-bootstrap/AccordionToggle";
 import AccordionContext from "react-bootstrap/AccordionContext";
@@ -11,15 +11,23 @@ type ToggleHeaderProps = {
   isExpanded: boolean;
   title?: string;
   hideComponent?: boolean;
+  headerComponent?: ReactElement;
+  isPaymentPage: boolean;
 };
 
+interface HeaderContentProps
+  extends Omit<ToggleHeaderProps, "hideComponent" | "isExpanded"> {
+  currentEventKey: string;
+}
+
 export const ToggleHeader = ({
   showExpandButton,
   isExpanded,
   title,
   hideComponent,
+  isPaymentPage,
+  headerComponent,
 }: ToggleHeaderProps) => {
-  const { t } = useTranslation("Design");
   const currentEventKey = useContext(AccordionContext);
 
   const decoratedOnClick = useAccordionToggle(ACCORDION_KEY);
@@ -46,14 +54,41 @@ export const ToggleHeader = ({
       onKeyPress={(event) => showExpandButton && decoratedOnClick(event)}
       role="button"
       tabIndex={0}
-      className="d-flex flex-column"
+      className={clsx(
+        "d-flex flex-column",
+        isPaymentPage && "payment-page-toggle"
+      )}
     >
       <h6 className={clsx("title", showExpandButton && "pointer")}>
         <div className="d-flex w-100 align-content-center justify-content-between">
-          <div className="d-flex">
-            <p className="m-0">{title || t("yourBooking")}</p>
-          </div>
+          <HeaderContent
+            showExpandButton={showExpandButton}
+            title={title}
+            currentEventKey={currentEventKey}
+            isPaymentPage={isPaymentPage}
+            headerComponent={headerComponent}
+          />
+        </div>
+      </h6>
+      {isExpanded && <hr className="mt-3" />}
+    </div>
+  );
+};
 
+const HeaderContent = ({
+  title,
+  showExpandButton,
+  currentEventKey,
+  isPaymentPage,
+  headerComponent,
+}: HeaderContentProps) => {
+  const { t } = useTranslation("Design");
+
+  if (isPaymentPage) {
+    return (
+      <>
+        <div className="d-flex">
+          <p className="m-0 mr-2 toggle-title">{title || t("yourBooking")}</p>
           {showExpandButton && (
             <div className="expand-button">
               <Icon
@@ -62,13 +97,31 @@ export const ToggleHeader = ({
                     ? "chevron-up"
                     : "chevron-down"
                 }
-                width="1rem"
+                width="0.5rem"
               />
             </div>
           )}
         </div>
-      </h6>
-      {isExpanded && <hr className="mt-3" />}
-    </div>
+        {headerComponent}
+      </>
+    );
+  }
+  return (
+    <>
+      <div className="d-flex">
+        <p className="m-0">{title || t("yourBooking")}</p>
+      </div>
+
+      {showExpandButton && (
+        <div className="expand-button">
+          <Icon
+            type={
+              currentEventKey === ACCORDION_KEY ? "chevron-up" : "chevron-down"
+            }
+            width="1rem"
+          />
+        </div>
+      )}
+    </>
   );
 };

package/src/iframe/order-process/components/BookingSummary/types/index.ts

@@ -1,6 +1,7 @@
 import { QuantityCheckProductInfo } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { OrderItems } from "@licklist/plugins/dist/types/context/Iframe/orderItems";
 import { MenuStep } from "@licklist/plugins/dist/types/context/sale/menuSteps";
+import { ReactElement } from "react";
 
 export const MOBILE_WIDTH = 576;
 export const ACCORDION_KEY = "booking-summary";
@@ -20,4 +21,7 @@ export type BookingSummaryProps = {
   isLoading?: boolean;
   peopleAmount: number;
   isPaymentLink?: boolean;
+  isPaymentPage?: boolean;
+  headerComponent?: ReactElement;
+  footer?: ReactElement;
 };

package/src/iframe/page/components/PageBody/constants.ts

@@ -25,4 +25,6 @@ export const COLLAPSE_MARGIN = 36;
 
 export const PAGE_LEFT_BLOCK_CONTAINER_ID = "page-left-block-container";
 export const PAGE_CALENDAR_SELECT_WRAPPER = "calendar-select-wrapper";
+export const PAGE_BODY_WITH_SCROLL = "page-body-with-scroll";
+
 export const PAGE_LEFT_BLOCK_MAP_DEFAULT_SIZE = 300;

package/src/iframe/page/components/PageBody/hooks/useResizePageBody.ts

@@ -16,6 +16,7 @@ import {
   PAGE_LEFT_BLOCK_CONTAINER_ID,
   PAGE_LEFT_BLOCK_MAP_DEFAULT_SIZE,
   PAGE_CALENDAR_SELECT_WRAPPER,
+  PAGE_BODY_WITH_SCROLL,
 } from "../constants";
 import { ChangeRightBlockHeightEvent } from "../types";
 
@@ -46,10 +47,19 @@ export const useResizePageBody = () => {
     const calenderWrapper = document.getElementById(
       PAGE_CALENDAR_SELECT_WRAPPER
     );
+
     const CALENDAR_WRAPPER_HEIGHT = calenderWrapper
       ? calenderWrapper.clientHeight
       : 0;
 
+    const paymentLinkPageBody = document.getElementById(PAGE_BODY_WITH_SCROLL);
+    if (paymentLinkPageBody) {
+      paymentLinkPageBody.scroll({
+        top: -height,
+        behavior: "smooth",
+      });
+    }
+
     return {
       maxHeight:
         height -