@licklist/design 0.58.11 → 0.59.0-dev.1

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/order-process/components/CategoryProduct/components/NumberInput/NumberInput.tsx

@@ -90,7 +90,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
           type="number"
           onChange={(e) => handleChangeValue(Number(e.target.value))}
           value={value}
-          min={min}
+          min={0}
           max={max}
           defaultValue={defaultValue}
           placeholder={placeholder}

package/src/iframe/page/components/PageBody/components/LeftBlock/LeftBlock.tsx

@@ -28,7 +28,9 @@ export const LeftBlock = ({
         {pageTitle && (
           <>
             {typeof pageTitle === "string" ? (
-              <div className="title">{pageTitle}</div>
+              <div className="title" id="navigation-title">
+                {pageTitle}
+              </div>
             ) : (
               pageTitle
             )}

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 -

package/src/iframe/payment/order-items-table/utils/paymentSummary.tsx

@@ -63,7 +63,7 @@ const processedPaymentSummary = ({
   const total = calculateTotalPrice(order, externalPaymentDetail);
 
   const totalDiscount = calculateTotalDiscount(order.payments);
-  const totalWithDiscount = total - Number(totalDiscount);
+
   let summaryItems: SummaryItem[] = [
     {
       translateKey: AMOUNT_TOTAL,
@@ -74,7 +74,7 @@ const processedPaymentSummary = ({
   if (totalDiscount) {
     summaryItems.push({
       translateKey: AMOUNT_WITH_DISCOUNT,
-      price: totalWithDiscount < 0 ? 0 : totalWithDiscount,
+      price: order.totalToPayAmount,
     });
   }
 
@@ -84,17 +84,17 @@ const processedPaymentSummary = ({
 
   summaryItems.push({
     translateKey: TOTAL_PAID,
-    price: totalWithDiscount <= 0 ? 0 : order.totalAmount,
+    price: order.paidAmount,
   });
-  if (totalWithDiscount <= 0) {
+  if (order.totalToPayAmount <= 0) {
     return summaryItems;
   }
   summaryItems = [...summaryItems, ...externalPaymentDetail];
 
-  if (totalWithDiscount > order.totalAmount) {
+  if (order.remainingToPay) {
     summaryItems.push({
       translateKey: REMAINING_TO_PAY,
-      price: totalWithDiscount - order.totalAmount,
+      price: order.remainingToPay,
     });
   }
   return summaryItems;