@licklist/design 0.44.485-dev.8 → 0.44.485-dev.81

package/src/iframe/payment/payment-page/PaymentPage.tsx

@@ -15,6 +15,7 @@ import {
 import { PaymentTimer } from "./PaymentTimer";
 import { Page, PageBody, PageHeader } from "../../page";
 import { BookingSummary, BookingSummaryFooter } from "../../order-process";
+import { cartSumByOrderProducts } from "../../order-process/components/BookingSummary/utils";
 
 export interface PaymentMetadata {
   total: number;
@@ -24,7 +25,7 @@ export interface PaymentMetadata {
 interface PaymentProps extends RyftPaymentFormProps {
   onCloseIframePayment?: () => void;
   onFailIframePayment?: () => void;
-  data?: PaymentLinkResponse;
+  data?: PaymentLinkResponse | null;
   isLoading: boolean;
   bookingSummaryProps: Omit<BookingSummaryProps, "totallWithDiscount">;
   paymentMetadata?: PaymentMetadata;
@@ -99,6 +100,19 @@ export const PaymentPage = ({
     );
   }
 
+  const orderTotalAmounByFormValues = cartSumByOrderProducts(
+    bookingSummaryProps && bookingSummaryProps?.formValues
+      ? Object.values(bookingSummaryProps?.formValues)
+      : undefined
+  );
+
+  // User can fill promocode only in iframe appcliation.
+  // It didn't possible via payment link. This check will
+  // be applied when there are no metadata and in case when
+  // orderValues sum is greater than amount in order.
+  const isCalculatedAmountGreaterThanOrderAmount =
+    orderTotalAmounByFormValues > data?.amount;
+
   return (
     <Page
       className="payment_link"
@@ -127,7 +141,7 @@ export const PaymentPage = ({
             bottomBlock={
               <BookingSummaryFooter showButton={false}>
                 <div className="d-flex flex-column justify-content-between">
-                  {paymentMetadata && (
+                  {paymentMetadata ? (
                     <>
                       <SummaryTotalBlock
                         label={t("total")}
@@ -137,14 +151,38 @@ export const PaymentPage = ({
                         label={t("paidSum")}
                         amount={paymentMetadata.paid || 0}
                       />
+                      <SummaryTotalBlock
+                        label={t("remaining")}
+                        amount={
+                          paymentMetadata.total - paymentMetadata.paid || 0
+                        }
+                      />
+                    </>
+                  ) : (
+                    <>
+                      {isCalculatedAmountGreaterThanOrderAmount && (
+                        <SummaryTotalBlock
+                          label={t("total")}
+                          amount={
+                            orderTotalAmounByFormValues +
+                            (bookingSummaryProps?.transactionFee || 0)
+                          }
+                        />
+                      )}
+
+                      <SummaryTotalBlock
+                        label={t(
+                          isCalculatedAmountGreaterThanOrderAmount
+                            ? "totalWithDiscount"
+                            : "total"
+                        )}
+                        amount={
+                          data?.amount +
+                          (bookingSummaryProps?.transactionFee || 0)
+                        }
+                      />
                     </>
                   )}
-                  <SummaryTotalBlock
-                    label={t(paymentMetadata ? "remaining" : "total")}
-                    amount={
-                      data?.amount + (bookingSummaryProps?.transactionFee || 0)
-                    }
-                  />
                 </div>
               </BookingSummaryFooter>
             }

package/src/iframe/payment/payment-page/PaymentTimer.tsx

@@ -1,16 +1,41 @@
-import React, { useContext, useLayoutEffect } from "react";
+import React, { useContext, useEffect, useLayoutEffect } from "react";
 import { PaymentSessionContext } from "@licklist/plugins/dist/context/payment/PaymentSessionContext";
+import { useTimer } from "@licklist/plugins/dist";
 import { Timer } from "../../order-process";
 
+// 10 minutes in ms
+export const PAYMENT_TIMER_TOTAL_TIME = 600000;
+
 export const PaymentTimer = () => {
-  const { timer, startPaymentSessionTimer, isTimerStarted, setTimer } =
-    useContext(PaymentSessionContext);
+  const { timer, startTimer, isTimerStarted, resetTimer } = useTimer({
+    timerTime: PAYMENT_TIMER_TOTAL_TIME,
+  });
+
+  const { setIsPaymentSessionExpired, isResetTimer } = useContext(
+    PaymentSessionContext
+  );
+
+  useEffect(() => {
+    if (!isResetTimer) {
+      return;
+    }
+    resetTimer();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isResetTimer]);
+
+  useEffect(() => {
+    // Sometimes we can get not round time in ms
+    if (timer > 1000) {
+      return;
+    }
+    setIsPaymentSessionExpired(true);
+    resetTimer();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [timer]);
 
   useLayoutEffect(() => {
-    setTimer(600);
     if (isTimerStarted) return;
-
-    startPaymentSessionTimer();
+    startTimer();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

package/src/iframe/payment/payment-status-page/PaymentStatusPage.tsx

@@ -9,6 +9,8 @@ import { BookingSummary, BookingSummaryFooter } from "../../order-process";
 import { PaymentStatusHeader } from "../payment-status-header/PaymentStatusHeader";
 import { SummaryTotalBlock } from "../../order-process/components/BookingSummary/components/SummaryTotal";
 import { BookingSummaryProps } from "../../order-process/components/BookingSummary/types";
+import { PaymentMetadata } from "../payment-page/PaymentPage";
+import { cartSumByOrderProducts } from "../../order-process/components/BookingSummary/utils";
 
 export const ORDER_STATUS_FAILED = "failed";
 export const ORDER_STATUS_SUCCESS = "success";
@@ -23,7 +25,6 @@ interface PaymentStatusComponentProps {
   onCloseWindow: () => void;
   onBack?: () => void;
   onTryAgain?: () => void;
-  totalAmount?: number;
   isLoading?: boolean;
   status: OrderStatusPrefix;
   isAppUsingInIframe?: boolean;
@@ -31,6 +32,8 @@ interface PaymentStatusComponentProps {
   EventCardComponent?: ReactNode;
   showCloseButton?: boolean;
   email?: string;
+  totalAmount?: number;
+  paymentMetadata?: PaymentMetadata;
 }
 
 // @TODO In future think, how to reuse this component in Iframe Pending, Success and Failed Pages
@@ -38,7 +41,6 @@ export const PaymentStatusPage = ({
   onCloseWindow,
   onBack,
   onTryAgain,
-  totalAmount,
   isLoading,
   status,
   isAppUsingInIframe,
@@ -46,6 +48,8 @@ export const PaymentStatusPage = ({
   EventCardComponent,
   showCloseButton = false,
   email,
+  totalAmount = 0,
+  paymentMetadata,
 }: PaymentStatusComponentProps) => {
   const { t } = useTranslation("Design");
 
@@ -65,6 +69,22 @@ export const PaymentStatusPage = ({
   if (isLoading) {
     return <LoaderIndicator isLoaded={false} />;
   }
+
+  const orderTotalAmounByFormValues = cartSumByOrderProducts(
+    bookingSummaryProps && bookingSummaryProps?.formValues
+      ? Object.values(bookingSummaryProps?.formValues)
+      : undefined
+  );
+
+  // User can fill promocode only in iframe appcliation.
+  // It didn't possible via payment link. This check will
+  // be applied when there are no metadata and in case when
+  // orderValues sum is greater than amount in order.
+  // For payment status page booking summary props can be empty
+  // so we should also check for them
+  const isCalculatedAmountGreaterThanOrderAmount =
+    bookingSummaryProps && orderTotalAmounByFormValues > totalAmount;
+
   return (
     <Page
       className="payment-status-page"
@@ -98,16 +118,50 @@ export const PaymentStatusPage = ({
           <PageBody.RightBlock
             bottomBlock={
               <BookingSummaryFooter showButton={false}>
-                {bookingSummaryProps?.formValues ? (
-                  <BookingSummary.SummaryTotal
-                    formValues={bookingSummaryProps?.formValues}
-                  />
-                ) : (
-                  <SummaryTotalBlock
-                    label={t("total")}
-                    amount={totalAmount || 0}
-                  />
-                )}
+                <div className="d-flex flex-column justify-content-between">
+                  {paymentMetadata ? (
+                    <>
+                      <SummaryTotalBlock
+                        label={t("total")}
+                        amount={paymentMetadata.total || 0}
+                      />
+                      <SummaryTotalBlock
+                        label={t("paidSum")}
+                        amount={paymentMetadata.paid || 0}
+                      />
+                      <SummaryTotalBlock
+                        label={t("remaining")}
+                        amount={
+                          paymentMetadata.total - paymentMetadata.paid || 0
+                        }
+                      />
+                    </>
+                  ) : (
+                    <>
+                      {isCalculatedAmountGreaterThanOrderAmount && (
+                        <SummaryTotalBlock
+                          label={t("total")}
+                          amount={
+                            orderTotalAmounByFormValues +
+                            (bookingSummaryProps?.transactionFee || 0)
+                          }
+                        />
+                      )}
+
+                      <SummaryTotalBlock
+                        label={t(
+                          isCalculatedAmountGreaterThanOrderAmount
+                            ? "totalWithDiscount"
+                            : "total"
+                        )}
+                        amount={
+                          totalAmount +
+                          (bookingSummaryProps?.transactionFee || 0)
+                        }
+                      />
+                    </>
+                  )}
+                </div>
               </BookingSummaryFooter>
             }
           >

package/src/iframe/select-date-time/SelectDateAndTimeList.tsx

@@ -0,0 +1,39 @@
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { SelectorDateAndTimeList } from "./component/date-container/SelectorDateAndTimeList";
+import { ReactComponent as CalendarSvg } from "../../assets/iframe/calendar.svg";
+
+export const SelectDateAndTimeList = () => {
+  const [eventDayId, setEventDayId] = useState<number>();
+  const [eventTimeId, setEventTimeId] = useState<number>();
+  const { t } = useTranslation(["Design"]);
+  const dayList = [];
+  const timeList = [];
+  return (
+    <div>
+      <div className="date-time-icon-container">
+        <div className="icon-wrapper">
+          <CalendarSvg className="icon" />
+        </div>
+        <h5>{t("selectDate")}</h5>
+      </div>
+      <div>
+        <SelectorDateAndTimeList
+          title={t("selectDateAndTime")}
+          dateList={dayList}
+          selectedDateId={eventDayId}
+          onSelectDate={setEventDayId}
+        />
+      </div>
+      <div>
+        <SelectorDateAndTimeList
+          title={t("selectYourTime")}
+          isTimeContainer
+          dateList={timeList}
+          selectedDateId={eventTimeId}
+          onSelectDate={setEventTimeId}
+        />
+      </div>
+    </div>
+  );
+};

package/src/iframe/select-date-time/SelectDateOrTimeList.tsx

@@ -0,0 +1,42 @@
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { SelectorDateAndTimeList } from "./component/date-container/SelectorDateAndTimeList";
+import { viewType } from "../data-time-view-selector/constants";
+import { ReactComponent as CalendarSvg } from "../../assets/iframe/calendar.svg";
+
+type SelectDateOrTimeListProps = {
+  view: viewType.DATE | viewType.TIME;
+};
+
+export const SelectDateOrTimeList = ({ view }: SelectDateOrTimeListProps) => {
+  const [dateId, setDateId] = useState<number>();
+  const { t } = useTranslation("Design");
+  const dayList = [];
+  const timeList = [];
+  const isTimeSelector = view === viewType.TIME;
+  const listTitle = isTimeSelector ? t("selectorTime") : t("selectDate");
+  const dateList = isTimeSelector ? timeList : dayList;
+
+  return (
+    <div>
+      {!isTimeSelector && (
+        <div className="date-time-icon-container">
+          <div className="icon-wrapper">
+            <CalendarSvg className="icon" />
+          </div>
+          <h5>{t("selectDate")}</h5>
+        </div>
+      )}
+      <div>
+        <SelectorDateAndTimeList
+          title={listTitle}
+          dateList={dateList}
+          isTimeContainer={isTimeSelector}
+          selectedDateId={dateId}
+          onSelectDate={setDateId}
+          isOnlyTimeContainer={isTimeSelector}
+        />
+      </div>
+    </div>
+  );
+};

package/src/iframe/select-date-time/component/date-container/DateTimeSelector.tsx

@@ -0,0 +1,79 @@
+import React, { useMemo } from "react";
+import clsx from "clsx";
+import { Logo } from "../../../../logo";
+import { ReactComponent as LimitedSvg } from "../../../../assets/iframe/dateInfo/limited.svg";
+import { ReactComponent as AvailableSvg } from "../../../../assets/iframe/dateInfo/available.svg";
+import { ReactComponent as SoldOutSvg } from "../../../../assets/iframe/dateInfo/soldOut.svg";
+import { infoLogoType } from "../../constants";
+
+export type DateAndTimeProps = {
+  date: any;
+  selected: boolean;
+  onSelectDate?: (id: number) => void;
+  isTimeContainer?: boolean;
+  isOnlyTimeContainer?: boolean;
+};
+
+export const DateTimeSelector = ({
+  date,
+  isTimeContainer,
+  selected,
+  onSelectDate,
+  isOnlyTimeContainer,
+}: DateAndTimeProps) => {
+  const { title, disabled, info, description, id, time } = date;
+
+  const onClick = () => {
+    if (disabled) return;
+    onSelectDate(id);
+  };
+
+  const infoLogo = useMemo(() => {
+    if (info?.logo === infoLogoType.LIMIT) {
+      return <LimitedSvg />;
+    }
+    if (info?.logo === infoLogoType.AVAILABLE) {
+      return <AvailableSvg />;
+    }
+    if (info?.logo === infoLogoType.SOLD_OUT) {
+      return <SoldOutSvg />;
+    }
+    return null;
+  }, [info]);
+
+  return (
+    <div
+      role="button"
+      onClick={onClick}
+      onKeyPress={onClick}
+      className={clsx(
+        "date-set",
+        disabled && "disabled",
+        selected && "selected",
+        isTimeContainer && "time-container",
+        isOnlyTimeContainer && "only-time-container"
+      )}
+      tabIndex={0}
+    >
+      {title}
+      {time && <div className="time">{time}</div>}
+      {description && (
+        <div
+          className={clsx(
+            "descriptions",
+            selected && "selected",
+            disabled && "disabled"
+          )}
+        >
+          {description}
+        </div>
+      )}
+      {info && (
+        <div className="info">
+          {info.logo && <Logo className="logo" logo={infoLogo} />}
+          <div>{info.description}</div>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/iframe/select-date-time/component/date-container/SelectorDateAndTimeList.stories.tsx

@@ -0,0 +1,164 @@
+import React, { useState } from "react";
+import { Meta } from "@storybook/react";
+import { SelectorDateAndTimeList } from "./SelectorDateAndTimeList";
+import { Form } from "react-bootstrap";
+import { ReactComponent as CalendarSvg } from "../../../../assets/iframe/calendar.svg";
+
+export default {
+  title: "Iframe/Date Selector",
+  component: SelectorDateAndTimeList,
+} as Meta;
+
+export function Default() {
+  const [dayId, setDayId] = useState<number>();
+  const [timeId, setTimeId] = useState<number>();
+  const [timeWithInfoId, setTimeWithInfoId] = useState<number>();
+
+  const dayList = [
+    {
+      id: 1,
+      title: "TODAY",
+      descriptions: "13th March",
+    },
+    {
+      id: 2,
+      title: "TODAY",
+      disabled: true,
+      description: "13th March",
+    },
+    {
+      id: 3,
+      title: "TOMORROW",
+      description: "13th March",
+    },
+    {
+      id: 4,
+      title: "TOMORROW",
+      description: "13th March",
+    },
+    {
+      id: 5,
+      title: "TOMORROW",
+      description: "13th March",
+    },
+  ];
+
+  const dayListWithInfo = [
+    {
+      id: 1,
+      title: "TODAY",
+      description: "13th March",
+      info: {
+        description: "test",
+        logo: "limit",
+      }
+    },
+    {
+      id: 2,
+      title: "TODAY",
+      disabled: true,
+      description: "13th March",
+      info: {
+        description: "test",
+        logo: "soldOut",
+      }
+    },
+    {
+      id: 3,
+      title: "TOMORROW",
+      description: "13th March",
+      info: {
+        description: "test",
+        logo: "limit",
+      }
+    },
+    {
+      id: 4,
+      title: "TOMORROW",
+      description: "13th March",
+      info: {
+        description: "test",
+        logo: "available",
+      }
+    },
+    {
+      id: 5,
+      title: "TOMORROW",
+      descriptions: "13th March",
+      info: {
+        description: "test",
+        logo: "available",
+      }
+    },
+  ];
+
+  const timeList = [
+    {
+      id: 1,
+      time: "10:30",
+    },
+    {
+      id: 2,
+      time: "11:30",
+    },
+    {
+      id: 3,
+      time: "12:30",
+    },
+    {
+      id: 4,
+      time: "13:30",
+    },
+    {
+      id: 5,
+      time: "14:30",
+    },
+    {
+      id: 6,
+      time: "11:30",
+      disabled: true,
+    },
+    {
+      id: 7,
+      time: "12:30",
+    },
+  ];
+
+  return (
+    <div>
+      <div className="date-time-icon-container">
+        <div className="icon-wrapper">
+          <CalendarSvg className='icon' />
+        </div>
+        <h5>{"Select Date"}</h5>
+      </div>
+    <Form>
+      <Form.Group>
+        <SelectorDateAndTimeList
+          title="Select Date & Time"
+          dateList={dayList}
+          selectedDateId={dayId}
+          onSelectDate={setDayId}
+        />
+      </Form.Group>
+      <Form.Group>
+        <SelectorDateAndTimeList
+          title="Select your Date with Info"
+          dateList={dayListWithInfo}
+          selectedDateId={timeWithInfoId}
+          onSelectDate={setTimeWithInfoId}
+        />
+      </Form.Group>
+      <Form.Group>
+        <SelectorDateAndTimeList
+          title="Select your Time"
+          dateList={timeList}
+          isTimeContainer
+          selectedDateId={timeId}
+          onSelectDate={setTimeId}
+        />
+      </Form.Group>
+    </Form>
+    </div>
+  );
+}

package/src/iframe/select-date-time/component/date-container/SelectorDateAndTimeList.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import clsx from "clsx";
+import { DateTimeSelector } from "./DateTimeSelector";
+
+export type SelectorDateAndTimeListProps = {
+  selectedDateId?: number;
+  onSelectDate?: (id: number) => void;
+  dateList: any[];
+  title?: string;
+  isTimeContainer?: boolean;
+  isOnlyTimeContainer?: boolean;
+};
+
+export const SelectorDateAndTimeList = ({
+  selectedDateId,
+  onSelectDate,
+  dateList,
+  title,
+  isTimeContainer,
+  isOnlyTimeContainer,
+}: SelectorDateAndTimeListProps) => {
+  return (
+    <>
+      <h5>{title}</h5>
+      <div className={clsx("date-list", isTimeContainer && "time-container")}>
+        {dateList.map((date) => {
+          return (
+            <DateTimeSelector
+              key={date.id}
+              date={date}
+              isTimeContainer={isTimeContainer}
+              selected={selectedDateId === date.id}
+              onSelectDate={onSelectDate}
+              isOnlyTimeContainer={isOnlyTimeContainer}
+            />
+          );
+        })}
+      </div>
+    </>
+  );
+};

package/src/iframe/select-date-time/constants.ts

@@ -0,0 +1,5 @@
+export enum infoLogoType {
+    LIMIT = "limit",
+    AVAILABLE = "available",
+    SOLD_OUT = "soldOut",
+  }

package/src/iframe/select-date-time/index.ts

@@ -0,0 +1,4 @@
+export { DateTimeSelector } from "./component/date-container/DateTimeSelector";
+export { SelectDateAndTimeList } from "./SelectDateAndTimeList";
+export { SelectDateOrTimeList } from "./SelectDateOrTimeList";
+