@licklist/design 0.58.11-dev.0 → 0.58.11

package/src/iframe/event/event-card/IframeEventCard.tsx

@@ -29,7 +29,6 @@ interface IframeEventCardProps {
   titleId?: string;
   descriptionId?: string;
   imageClassName?: string;
-  showMoreInfo?: boolean;
 }
 
 export function IframeEventCard({
@@ -47,7 +46,6 @@ export function IframeEventCard({
   titleId,
   descriptionId,
   imageClassName,
-  showMoreInfo,
 }: IframeEventCardProps) {
   const { formatNumber } = useIntl();
   const { t } = useTranslation("Design");
@@ -72,7 +70,6 @@ export function IframeEventCard({
       )}
       onClick={goToDetails ? onClick : undefined}
     >
-      {showMoreInfo && <div className="iframe-event-card__info-icon">i</div>}
       {imageSrc && (
         <Card.Img
           className={imageClassName ?? "card-image"}
@@ -94,8 +91,12 @@ export function IframeEventCard({
               <div className="icon-wrapper">
                 <CalendarSvg />
               </div>
-              <p className="m-0 list-view-hided">{date}</p>
-              <p className="m-0 grid-view-hided">{shortDate}</p>
+              <p className="iframe-event-card__bold m-0 list-view-hided">
+                {date}
+              </p>
+              <p className="iframe-event-card__bold m-0 grid-view-hided">
+                {shortDate}
+              </p>
             </div>
           </Card.Text>
 
@@ -105,7 +106,7 @@ export function IframeEventCard({
                 <div className="icon-wrapper">
                   <ClockSvg />
                 </div>
-                <p className="m-0">{type}</p>
+                <p className="iframe-event-card__bold m-0">{type}</p>
               </div>
             </Card.Text>
           )}
@@ -116,7 +117,7 @@ export function IframeEventCard({
                 <div className="icon-wrapper">
                   <TicketSvg />
                 </div>
-                <p className="m-0">
+                <p className="iframe-event-card__bold m-0">
                   {t("from")}{" "}
                   {formatNumber(cost, { style: "currency", currency: "GBP" })}
                 </p>

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

@@ -1,7 +1,6 @@
 import React from "react";
 import { Meta } from "@storybook/react";
 import { BookingSummary } from "./BookingSummary";
-import { SummaryTotalBlock } from "./components/SummaryTotal";
 
 export default {
   title: "Iframe/Order-Process/BookingSummary",
@@ -139,14 +138,6 @@ export function Default() {
     <div className="payment-process">
       <div className="col-lg-4">
         <BookingSummary
-          isPaymentPage
-          eventName="new Event"
-          footer={
-            <div className="d-flex flex-column justify-content-between">
-              <SummaryTotalBlock label={"Total"} amount={2} />
-              <SummaryTotalBlock label={"Total with discount"} amount={1} />
-            </div>
-          }
           date="29 Sept 2022 at 09:00"
           menuSteps={menuSteps as any}
           peopleAmount={5}

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/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={0}
+          min={min}
           max={max}
           defaultValue={defaultValue}
           placeholder={placeholder}

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

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

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 -

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: order.totalToPayAmount,
+      price: totalWithDiscount < 0 ? 0 : totalWithDiscount,
     });
   }
 
@@ -84,17 +84,17 @@ const processedPaymentSummary = ({
 
   summaryItems.push({
     translateKey: TOTAL_PAID,
-    price: order.paidAmount,
+    price: totalWithDiscount <= 0 ? 0 : order.totalAmount,
   });
-  if (order.totalToPayAmount <= 0) {
+  if (totalWithDiscount <= 0) {
     return summaryItems;
   }
   summaryItems = [...summaryItems, ...externalPaymentDetail];
 
-  if (order.remainingToPay) {
+  if (totalWithDiscount > order.totalAmount) {
     summaryItems.push({
       translateKey: REMAINING_TO_PAY,
-      price: order.remainingToPay,
+      price: totalWithDiscount - order.totalAmount,
     });
   }
   return summaryItems;