@licklist/design 0.58.6-dev.11 → 0.58.6-dev.3

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

@@ -8,8 +8,6 @@ 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,
@@ -24,10 +22,6 @@ 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();
@@ -42,18 +36,11 @@ export const BookingSummary = ({
 
   return (
     <div className="payment-booking-summary">
-      <BookingSummaryAccordion
-        isPaymentPage={isPaymentPage}
-        hasPeopleInput={hasPeopleInput}
-        headerComponent={headerComponent}
-      >
+      <BookingSummaryAccordion hasPeopleInput={hasPeopleInput}>
         <div className="event-info">
-          <EventInfo
-            eventName={eventName}
-            isPaymentPage={isPaymentPage}
-            date={date}
-            time={time}
-          />
+          <p className="m-0 title event-name">{eventName}</p>
+          <p className="m-0">{date}</p>
+          {time && <p className="m-0">{time}</p>}
         </div>
         <hr />
 
@@ -75,8 +62,8 @@ export const BookingSummary = ({
               {!shouldHidePeopleAmount && peopleAmount > 0 && (
                 <>
                   <hr />
-                  <div className="d-flex justify-content-between mt-3 people">
-                    <p className="m-0 payment-metadata">{t("people")}:</p>
+                  <div className="d-flex justify-content-between mt-3">
+                    <p className="m-0">{t("people")}:</p>
                     <p className="price">{peopleAmount}</p>
                   </div>
                 </>
@@ -86,9 +73,7 @@ export const BookingSummary = ({
                 <>
                   <hr />
                   <div className="d-flex justify-content-between mt-3">
-                    <p className="m-0 payment-metadata">
-                      {t("transactionFee")}:
-                    </p>
+                    <p className="m-0">{t("transactionFee")}:</p>
                     <p className="price">
                       {formatNumber(transactionFee, {
                         style: "currency",
@@ -99,7 +84,6 @@ export const BookingSummary = ({
                 </>
               )}
             </div>
-            {footer}
           </div>
         ) : (
           <div className="cart-items">
@@ -113,38 +97,3 @@ 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,7 +3,6 @@ import React, {
   useCallback,
   PropsWithChildren,
   useEffect,
-  ReactElement,
 } from "react";
 import { Accordion } from "react-bootstrap";
 import { useWindowDimensions } from "@licklist/plugins/dist/hooks/Media/useWindowDimensions";
@@ -21,9 +20,6 @@ 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 = ({
@@ -31,8 +27,6 @@ export const BookingSummaryAccordion = ({
   title,
   showTitleOnlyOnMobile = false,
   hasPeopleInput,
-  isPaymentPage,
-  headerComponent,
 }: BookingSummaryAccordionProps) => {
   const { width } = useWindowDimensions();
   const [isExpanded, setIsExpanded] = useState(width <= MOBILE_WIDTH);
@@ -74,12 +68,10 @@ 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">
-      {label && <div>{label}</div>}
-      <div className="m-0 price">
+      <p className="m-0">{label}</p>
+      <p className="m-0 price">
         {formatNumber(amount, {
           style: "currency",
           currency: Config.Currency.GBP,
         })}
-      </div>
+      </p>
     </div>
   );
 };

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

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

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

@@ -1,7 +1,6 @@
 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";
@@ -21,7 +20,4 @@ export type BookingSummaryProps = {
   isLoading?: boolean;
   peopleAmount: number;
   isPaymentLink?: boolean;
-  isPaymentPage?: boolean;
-  headerComponent?: ReactElement;
-  footer?: ReactElement;
 };

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

@@ -25,6 +25,4 @@ 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,7 +16,6 @@ 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";
 
@@ -47,19 +46,10 @@ 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 -