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

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 -