@licklist/design 0.58.6-dev.6 → 0.58.6-dev.7

package/dist/styles/ryft-payment-form/RyftPaymentForm.scss

@@ -1,10 +1,52 @@
 .payment_link {
+  padding: 0 0 1rem 0;
+
+  .button-wrapper {
+    top: 2rem;
+    right: 2rem;
+    position: absolute;
+    z-index: 100;
+  }
+
   .page-body {
+    padding: 0;
+    height: calc(100vh - 2rem) !important;
+
+    .navigation {
+      display: block;
+      @include media-breakpoint-down(sm) {
+        padding: 0;
+      }
+    }
+
+    .right-block {
+      margin-left: 0;
+      height: calc(100vh - 2rem);
+      max-height: calc(100vh - 1rem);
+      @include media-breakpoint-down(sm) {
+        width: calc(100% - 2rem);
+        max-width: unset;
+        position: inherit;
+        overflow: visible;
+        margin: 0 1rem 1rem;
+        height: unset;
+        min-height: unset;
+        max-height: 100%;
+      }
+    }
+
     .left-block {
       .left-block-container {
         position: relative;
         max-height: 100%;
 
+        .payment-title {
+          font-size: 0.875rem;
+          font-weight: 600;
+          align-items: center;
+          margin-left: 0.5rem;
+        }
+
         .ryft-payment-form {
           .submit-button-wrapper {
             margin: -1rem 0 1rem;
@@ -13,7 +55,55 @@
               width: 100%;
             }
           }
+          #mobile-pay-divider-container {
+            display: flex;
+            position: relative;
+            margin-bottom: 1rem;
+            #mobile-pay-divider-text {
+              margin-right: 1rem;
+              font-size: 0.875rem;
+              font-weight: 600;
+            }
+            #mobile-pay-divider {
+              width: 100%;
+              border-bottom: 1px #dfdfdf solid;
+              margin-bottom: 0.6rem;
+            }
+          }
 
+          #card-title-container {
+            height: auto;
+            border: none;
+            margin-bottom: 0.5rem;
+            text-align: left;
+            :first-child {
+              font-size: 1rem;
+              font-weight: 600;
+              margin-bottom: 1rem;
+            }
+
+            .form-label {
+              margin-bottom: 0.5rem;
+            }
+          }
+          .mobile-pay-title {
+            display: block;
+            font-weight: 600;
+            font-size: 1rem;
+            color: black;
+            padding: 0;
+            font-style: normal;
+            font-family: inherit;
+            margin-bottom: 1rem;
+          }
+        }
+        .form {
+          .input {
+            border: 2px solid #525252 !important;
+          }
+        }
+
+        .ryft-payment-form {
           @include media-breakpoint-up(md) {
             .submit-button-wrapper {
               max-width: 15.5rem;
@@ -22,10 +112,9 @@
 
           // it's style for Google and Apple pay container, for unknown reasons we can't move this html elements with appendChild or replaceChild
           .ryft-pay-grid {
-            position: absolute !important;
-            top: 10rem;
             width: 100%;
             max-width: 15.5rem;
+            margin-bottom: 1rem;
           }
           .ryft-pay-apple-pay-button {
             border-radius: 0.25rem;
@@ -36,6 +125,36 @@
           display: none !important;
         }
       }
+      @include media-breakpoint-down(sm) {
+        .left-block-container {
+          max-height: 100%;
+          overflow: visible;
+        }
+      }
+    }
+
+    @include media-breakpoint-down(sm) {
+      flex-direction: column-reverse;
+      overflow: scroll;
+
+      @include media-breakpoint-down(sm) {
+        .left-block {
+          min-height: 100%;
+        }
+        .right-block {
+          margin: 0 auto;
+          width: 100%;
+          .children-wrapper {
+            .accordion {
+              .collapse {
+                overflow: visible;
+                overflow-x: unset;
+                scrollbar-width: unset;
+              }
+            }
+          }
+        }
+      }
     }
   }
   ::-webkit-scrollbar {
@@ -62,3 +181,7 @@
     }
   }
 }
+
+#ryft-threeDSMethodIframe {
+  display: none;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.58.6-dev.6",
+  "version": "0.58.6-dev.7",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"

package/src/assets/iframe/calendar.svg

@@ -1,3 +1,3 @@
-<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4 0C3.44772 0 3 0.447715 3 1H1C0.447715 1 0 1.44772 0 2V4H16V2C16 1.44772 15.5523 1 15 1H13C13 0.447715 12.5523 0 12 0C11.4477 0 11 0.447715 11 1H5C5 0.447715 4.55228 0 4 0ZM16 6C16 5.44772 15.5523 5 15 5H1C0.447715 5 0 5.44772 0 6V12C0 13.6569 1.34315 15 3 15H13C14.6569 15 16 13.6569 16 12V6ZM2 7H14V12C14 12.5523 13.5523 13 13 13H3L2.88338 12.9933C2.38604 12.9355 2 12.5128 2 12V7ZM10.5 9C10.2239 9 10 9.22386 10 9.5V11.5C10 11.7761 10.2239 12 10.5 12H12.5C12.7761 12 13 11.7761 13 11.5V9.5C13 9.22386 12.7761 9 12.5 9H10.5Z" fill="#979797"/>
+<svg width="16" height="15" viewBox="0 0 16 15" fill="#979797" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 0C3.44772 0 3 0.447715 3 1H1C0.447715 1 0 1.44772 0 2V4H16V2C16 1.44772 15.5523 1 15 1H13C13 0.447715 12.5523 0 12 0C11.4477 0 11 0.447715 11 1H5C5 0.447715 4.55228 0 4 0ZM16 6C16 5.44772 15.5523 5 15 5H1C0.447715 5 0 5.44772 0 6V12C0 13.6569 1.34315 15 3 15H13C14.6569 15 16 13.6569 16 12V6ZM2 7H14V12C14 12.5523 13.5523 13 13 13H3L2.88338 12.9933C2.38604 12.9355 2 12.5128 2 12V7ZM10.5 9C10.2239 9 10 9.22386 10 9.5V11.5C10 11.7761 10.2239 12 10.5 12H12.5C12.7761 12 13 11.7761 13 11.5V9.5C13 9.22386 12.7761 9 12.5 9H10.5Z" />
 </svg>

package/src/assets/iframe/ticket.svg

@@ -1,3 +1,3 @@
-<svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M18 2.00002C18 0.89543 17.1046 0 16 0H2C0.89543 0 0 0.89543 0 2L0.000956201 4.35567C0.00105503 4.59911 0.0899525 4.83415 0.250979 5.01672C0.731269 5.56128 1 6.25846 1 7C1 7.74154 0.731269 8.43872 0.250979 8.98328C0.0899525 9.16585 0.00105503 9.4009 0.000956201 9.64433L0 11.9996C0 13.1046 0.89543 14 2 14H16C17.1046 14 18 13.1046 18 12L17.9999 9.64574C17.9999 9.40205 17.9109 9.16675 17.7497 8.98404C17.269 8.43938 17 7.7419 17 7C17 6.2581 17.269 5.56062 17.7497 5.01596C17.9109 4.83325 17.9999 4.59795 17.9999 4.35426L18 2.00002ZM2.07187 4.09764L2 4.002L1.999 2H5C5 2.55228 5.44772 3 6 3C6.55228 3 7 2.55228 7 2H16L15.999 4.002L15.929 4.09646C15.3306 4.93393 15 5.94228 15 7L15.0069 7.26333C15.057 8.22459 15.3805 9.13586 15.929 9.90354L15.999 9.997L16 12H7C7 11.4477 6.55228 11 6 11C5.44772 11 5 11.4477 5 12H2V9.996L2.07187 9.90236C2.66972 9.06511 3 8.05722 3 7C3 5.94278 2.66972 4.93489 2.07187 4.09764ZM6 6C6.55228 6 7 5.55228 7 5C7 4.44772 6.55228 4 6 4C5.44772 4 5 4.44772 5 5C5 5.55228 5.44772 6 6 6ZM7 9C7 9.55229 6.55228 10 6 10C5.44772 10 5 9.55229 5 9C5 8.44771 5.44772 8 6 8C6.55228 8 7 8.44771 7 9Z" fill="#979797"/>
+<svg width="18" height="14" viewBox="0 0 18 14" fill="#979797" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18 2.00002C18 0.89543 17.1046 0 16 0H2C0.89543 0 0 0.89543 0 2L0.000956201 4.35567C0.00105503 4.59911 0.0899525 4.83415 0.250979 5.01672C0.731269 5.56128 1 6.25846 1 7C1 7.74154 0.731269 8.43872 0.250979 8.98328C0.0899525 9.16585 0.00105503 9.4009 0.000956201 9.64433L0 11.9996C0 13.1046 0.89543 14 2 14H16C17.1046 14 18 13.1046 18 12L17.9999 9.64574C17.9999 9.40205 17.9109 9.16675 17.7497 8.98404C17.269 8.43938 17 7.7419 17 7C17 6.2581 17.269 5.56062 17.7497 5.01596C17.9109 4.83325 17.9999 4.59795 17.9999 4.35426L18 2.00002ZM2.07187 4.09764L2 4.002L1.999 2H5C5 2.55228 5.44772 3 6 3C6.55228 3 7 2.55228 7 2H16L15.999 4.002L15.929 4.09646C15.3306 4.93393 15 5.94228 15 7L15.0069 7.26333C15.057 8.22459 15.3805 9.13586 15.929 9.90354L15.999 9.997L16 12H7C7 11.4477 6.55228 11 6 11C5.44772 11 5 11.4477 5 12H2V9.996L2.07187 9.90236C2.66972 9.06511 3 8.05722 3 7C3 5.94278 2.66972 4.93489 2.07187 4.09764ZM6 6C6.55228 6 7 5.55228 7 5C7 4.44772 6.55228 4 6 4C5.44772 4 5 4.44772 5 5C5 5.55228 5.44772 6 6 6ZM7 9C7 9.55229 6.55228 10 6 10C5.44772 10 5 9.55229 5 9C5 8.44771 5.44772 8 6 8C6.55228 8 7 8.44771 7 9Z" />
 </svg>

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

@@ -1,6 +1,7 @@
 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",
@@ -138,6 +139,14 @@ 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,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 PAYMENT_LINK_PAGE_BODY = "payment_link_page_body";
+
 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,
+  PAYMENT_LINK_PAGE_BODY,
 } 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(PAYMENT_LINK_PAGE_BODY);
+    if (paymentLinkPageBody) {
+      paymentLinkPageBody.scroll({
+        top: -rightBlockHeight,
+        behavior: "smooth",
+      });
+    }
+
     return {
       maxHeight:
         height -