@licklist/design 0.44.486-dev.9 → 0.44.487

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

@@ -6,14 +6,14 @@ import { useResizePageBody } from "../../hooks/useResizePageBody";
 
 export type LeftBlockProps = PropsWithChildren<
   {
-    pageTitle?: ReactNode;
+    title?: string;
     component?: ReactNode;
     childrenClassName?: string;
   } & HTMLAttributes<HTMLDivElement>
 >;
 
 export const LeftBlock = ({
-  pageTitle,
+  title,
   children,
   className,
   component,
@@ -24,9 +24,9 @@ export const LeftBlock = ({
 
   return (
     <div className={clsx("left-block", className)} {...props}>
-      {pageTitle && (
+      {title && (
         <div className="navigation">
-          <div className="title">{pageTitle}</div>
+          <p className="title">{title}</p>
           {component}
         </div>
       )}

package/src/iframe/page/components/PageHeader/PageHeader.tsx

@@ -1,5 +1,4 @@
 import React, { PropsWithChildren, HTMLAttributes, useCallback } from "react";
-import { BackButton } from "../../../back-button/BackButton";
 import { useSnippetStepsBackgroundColor } from "./hooks/useSnippetStepsBackgroundColor";
 
 export type PageHeaderProps = PropsWithChildren<
@@ -36,7 +35,19 @@ export const PageHeader = ({
   return (
     <div className="page-header" {...props}>
       <div className="header-container">
-        {showBackButton && <BackButton onClick={onReturnBack} />}
+        {showBackButton && (
+          <div className="button-wrapper back-button">
+            <div
+              className="back-button"
+              onClick={onReturnBack}
+              onKeyPress={onReturnBack}
+              role="button"
+              tabIndex={0}
+            >
+              &lt;
+            </div>
+          </div>
+        )}
         {children && (
           <div className="children-wrapper" style={style}>
             {children}

package/src/iframe/payment/order-items-table/OrderItemsTable.stories.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { Meta } from "@storybook/react";
 import { boolean } from "@storybook/addon-knobs";
-import { ORDER_FEE_CHARGE_TYPE_CLIENT } from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
 import { OrderItemsTable } from "./OrderItemsTable";
 
 export default {
@@ -25,7 +24,6 @@ export function Default(args) {
 
 Default.args = {
   order: {
-    feeChargeType: ORDER_FEE_CHARGE_TYPE_CLIENT,
     products: [
       {
         id: 1,

package/src/iframe/payment/order-items-table/hooks/useTableData.tsx

@@ -9,12 +9,18 @@ import {
   PAYMENT_TYPE_NET_PROFIT,
 } from "@licklist/core/dist/DataMapper/Order/PaymentDataMapper";
 import { StaticTableData } from "../../../../table";
-import { getProductQuantityAndPrice, getTotalSumByCategory } from "../utils";
+import {
+  getProductQuantityAndPrice,
+  calculateTotalDiscount,
+  calculateTotalPrice,
+  getPaymentValueByType,
+  getExternalPaymentDetail,
+  getTotalSumByCategory,
+} from "../utils";
 import { OrderItemsTableProps, SummaryItem } from "../types";
-import { getOrderSummaryItems } from "../utils/paymentSummary";
 
 const CURRENCY_DEFAULT = "GBP";
-export const PAYMENT_TYPE_TRANSLATE_KEYS = {
+const TRANSLATE_KEYS = {
   [PAYMENT_TYPE_NET_PROFIT]: "netAmount",
   [PAYMENT_TYPE_FEE]: "bookeditFee",
   [PAYMENT_TYPE_VAT]: "vat",
@@ -108,7 +114,9 @@ export const useTableData = ({
     );
   };
 
-  const renderSummaryItems = (summaryItems: SummaryItem[]) => {
+  const renderSummaryItems = (
+    summaryItems: { translateKey: string; price: number }[]
+  ) => {
     return summaryItems.map(({ translateKey, price }) => {
       return {
         key: uniqueId(`summary-info-${translateKey}`),
@@ -119,6 +127,86 @@ export const useTableData = ({
     });
   };
 
+  const paymentNotProcessedSummary = () => {
+    const total = calculateTotalPrice(order.orderProducts);
+
+    const summaryItems: SummaryItem[] = [
+      {
+        translateKey: "amountTotal",
+        price: total,
+      },
+    ];
+
+    if (externalDiscount) {
+      summaryItems.push({
+        price: externalDiscount,
+        translateKey: "amountWithDiscount",
+      });
+    }
+
+    if (paymentDetail) {
+      return [...summaryItems, ...getExternalPaymentDetail(paymentDetail)];
+    }
+
+    return summaryItems;
+  };
+
+  const processedPaymentSummary = () => {
+    const total = calculateTotalPrice(order.orderProducts);
+    const totalDiscount = calculateTotalDiscount(order.payments);
+    const totalWithDiscount = total - Number(totalDiscount);
+    let summaryItems: SummaryItem[] = [
+      {
+        translateKey: "amountTotal",
+        price: total,
+      },
+    ];
+
+    if (totalDiscount) {
+      summaryItems.push({
+        translateKey: "amountWithDiscount",
+        price: totalWithDiscount < 0 ? 0 : totalWithDiscount,
+      });
+    }
+
+    if (paymentDetail && !order.payments.length) {
+      return [...summaryItems, ...getExternalPaymentDetail(paymentDetail)];
+    }
+
+    summaryItems.push({
+      translateKey: "totalPaid",
+      price: totalWithDiscount <= 0 ? 0 : order.totalAmount,
+    });
+    if (totalWithDiscount <= 0) {
+      return summaryItems;
+    }
+    summaryItems = [
+      ...summaryItems,
+      ...Object.keys(TRANSLATE_KEYS).map((key) => {
+        return {
+          translateKey: TRANSLATE_KEYS[key],
+          price: getPaymentValueByType(order.payments, key),
+        };
+      }),
+    ];
+
+    if (totalWithDiscount > order.totalAmount) {
+      summaryItems.push({
+        translateKey: "remainingToPay",
+        price: totalWithDiscount - order.totalAmount,
+      });
+    }
+    return summaryItems;
+  };
+
+  const getOrderSummaryItems = () => {
+    if (!isPaymentProcessed) {
+      return paymentNotProcessedSummary();
+    }
+
+    return processedPaymentSummary();
+  };
+
   const data = useMemo(
     () => {
       if (!order) {
@@ -127,14 +215,7 @@ export const useTableData = ({
 
       return [
         ...renderProductsContent(),
-        ...renderSummaryItems(
-          getOrderSummaryItems({
-            order,
-            paymentDetail,
-            isPaymentProcessed,
-            externalDiscount,
-          })
-        ),
+        ...renderSummaryItems(getOrderSummaryItems()),
       ];
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/iframe/payment/order-items-table/types/index.ts

@@ -1,24 +1,7 @@
 import { Order } from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
 import { PaymentDetail } from "@licklist/core/dist/DataMapper/Order/PaymentDetailDataMapper";
 
-export const AMOUNT_TOTAL = "amountTotal";
-export const AMOUNT_WITH_DISCOUNT = "amountWithDiscount";
-export const TOTAL_PAID = "totalPaid";
-export const REMAINING_TO_PAY = "remainingToPay";
-
-export const SUMMARY_TRANSLATE_KEYS = [
-  AMOUNT_TOTAL,
-  AMOUNT_WITH_DISCOUNT,
-  TOTAL_PAID,
-  REMAINING_TO_PAY,
-];
-
-export type SUMMARY_TRANSLATE_KEY = typeof SUMMARY_TRANSLATE_KEYS[number];
-
-export type SummaryItem = {
-  translateKey: SUMMARY_TRANSLATE_KEY;
-  price: number;
-};
+export type SummaryItem = { translateKey: string; price: number };
 
 export type OrderItemsTableProps = {
   order?: Order;

package/src/iframe/payment/order-items-table/utils/index.ts

@@ -1,16 +1,13 @@
-import {
-  Order,
-  ORDER_FEE_CHARGE_TYPE_CLIENT,
-} from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
+import { Order } from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
 import { Product } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
 import { PAYMENT_TYPE_DISCOUNT } from "@licklist/core/dist/DataMapper/Order/PaymentDataMapper";
 import { PaymentDetail } from "@licklist/core/dist/DataMapper/Order/PaymentDetailDataMapper";
-import { PAYMENT_TYPE_TRANSLATE_KEYS } from "../hooks/useTableData";
 
 const TRANSLATE_KEYS = {
   totalAmount: "totalPaid",
   netAmount: "netAmount",
   fee: "bookeditFee",
+  remainingToPay: "remainingToPay",
 };
 
 export enum PAYMENT_TYPE_TITLES {
@@ -19,35 +16,14 @@ export enum PAYMENT_TYPE_TITLES {
   VAT = "VAT",
 }
 
-interface ExternalPaymnetDetail {
-  translateKey: string;
-  price: number;
-}
-
-export const calculateTotalPrice = (
-  order: Order,
-  externalPaymentDetails?: ExternalPaymnetDetail[]
-) => {
-  const totalPrice =
-    order?.orderProducts?.reduce(
+export const calculateTotalPrice = (orderProducts: Order["orderProducts"]) => {
+  return (
+    orderProducts?.reduce(
       (total: number, product) =>
         total + (product?.quantity ?? 1) * product.price,
       0
-    ) ?? 0;
-
-  if (
-    order?.feeChargeType !== ORDER_FEE_CHARGE_TYPE_CLIENT ||
-    !externalPaymentDetails
-  ) {
-    return totalPrice;
-  }
-
-  const fee =
-    externalPaymentDetails.find(
-      (externalPayment) =>
-        externalPayment.translateKey === PAYMENT_TYPE_TRANSLATE_KEYS.fee
-    )?.price || 0;
-  return totalPrice + fee;
+    ) ?? 0
+  );
 };
 
 export const calculateTotalDiscount = (payments: Order["payments"]) => {
@@ -75,37 +51,21 @@ export const getProductQuantityAndPrice = (
 export const getPaymentValueByType = (
   payments: Order["payments"],
   paymentTypeTitle: string
-): number => {
-  if (!payments || !payments.length) {
-    return 0;
-  }
+) => {
   if (paymentTypeTitle === PAYMENT_TYPE_TITLES.FEE) {
     const feeWithoutVatValue =
-      payments?.reduce((sumOfPayments, payment) => {
-        if (payment.paymentType.title !== PAYMENT_TYPE_TITLES.FEE) {
-          return sumOfPayments;
-        }
-
-        return sumOfPayments + (payment?.amount ?? 0);
-      }, 0) ?? 0;
+      payments.find((payment) => payment.paymentType.title === paymentTypeTitle)
+        ?.amount ?? 0;
 
     const vatValue =
-      payments?.reduce((sumOfPayments, payment) => {
-        if (payment.paymentType.title !== PAYMENT_TYPE_TITLES.VAT) {
-          return sumOfPayments;
-        }
-        return sumOfPayments + (payment?.amount ?? 0);
-      }, 0) ?? 0;
+      payments.find(
+        (payment) => payment.paymentType.title === PAYMENT_TYPE_TITLES.VAT
+      )?.amount ?? 0;
     return feeWithoutVatValue + vatValue;
   }
-
   return (
-    payments?.reduce((sumOfPayments, payment) => {
-      if (payment.paymentType.title !== paymentTypeTitle) {
-        return sumOfPayments;
-      }
-      return sumOfPayments + (payment?.amount ?? 0);
-    }, 0) ?? 0
+    payments.find((payment) => payment.paymentType.title === paymentTypeTitle)
+      ?.amount ?? 0
   );
 };
 

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

@@ -15,7 +15,6 @@ 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;
@@ -25,7 +24,7 @@ export interface PaymentMetadata {
 interface PaymentProps extends RyftPaymentFormProps {
   onCloseIframePayment?: () => void;
   onFailIframePayment?: () => void;
-  data?: PaymentLinkResponse | null;
+  data?: PaymentLinkResponse;
   isLoading: boolean;
   bookingSummaryProps: Omit<BookingSummaryProps, "totallWithDiscount">;
   paymentMetadata?: PaymentMetadata;
@@ -100,19 +99,6 @@ 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"
@@ -124,6 +110,7 @@ export const PaymentPage = ({
           onCloseButtonClick={isIframePayment ? onGoBack : undefined}
         >
           <PaymentTimer />
+
           <div className="d-flex align-items-center justify-content-center w-100">
             {t("paymentDetails")}
           </div>
@@ -141,7 +128,7 @@ export const PaymentPage = ({
             bottomBlock={
               <BookingSummaryFooter showButton={false}>
                 <div className="d-flex flex-column justify-content-between">
-                  {paymentMetadata ? (
+                  {paymentMetadata && (
                     <>
                       <SummaryTotalBlock
                         label={t("total")}
@@ -151,38 +138,12 @@ 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 || 0}
+                  />
                 </div>
               </BookingSummaryFooter>
             }

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

@@ -1,41 +1,16 @@
-import React, { useContext, useEffect, useLayoutEffect } from "react";
+import React, { useContext, 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, 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]);
+  const { timer, startPaymentSessionTimer, isTimerStarted, setTimer } =
+    useContext(PaymentSessionContext);
 
   useLayoutEffect(() => {
+    setTimer(600);
     if (isTimerStarted) return;
-    startTimer();
+
+    startPaymentSessionTimer();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

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

@@ -9,8 +9,6 @@ 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";
@@ -25,6 +23,7 @@ interface PaymentStatusComponentProps {
   onCloseWindow: () => void;
   onBack?: () => void;
   onTryAgain?: () => void;
+  totalAmount?: number;
   isLoading?: boolean;
   status: OrderStatusPrefix;
   isAppUsingInIframe?: boolean;
@@ -32,8 +31,6 @@ 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
@@ -41,6 +38,7 @@ export const PaymentStatusPage = ({
   onCloseWindow,
   onBack,
   onTryAgain,
+  totalAmount,
   isLoading,
   status,
   isAppUsingInIframe,
@@ -48,8 +46,6 @@ export const PaymentStatusPage = ({
   EventCardComponent,
   showCloseButton = false,
   email,
-  totalAmount = 0,
-  paymentMetadata,
 }: PaymentStatusComponentProps) => {
   const { t } = useTranslation("Design");
 
@@ -69,22 +65,6 @@ 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"
@@ -118,50 +98,16 @@ export const PaymentStatusPage = ({
           <PageBody.RightBlock
             bottomBlock={
               <BookingSummaryFooter showButton={false}>
-                <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>
+                {bookingSummaryProps?.formValues ? (
+                  <BookingSummary.SummaryTotal
+                    formValues={bookingSummaryProps?.formValues}
+                  />
+                ) : (
+                  <SummaryTotalBlock
+                    label={t("total")}
+                    amount={totalAmount || 0}
+                  />
+                )}
               </BookingSummaryFooter>
             }
           >

package/src/index.ts

@@ -18,7 +18,6 @@ export * from "./sales";
 export * from "./setting";
 export * from "./sidebar";
 export * from "./snippet";
-export * from "./sortable-fields";
 export * from "./sortable-list";
 export * from "./sortable-tree";
 export * from "./static";
@@ -33,9 +32,3 @@ export * from "./typeahead-helper";
 export * from "./zone";
 export * from "./resource";
 export * from "./virtualized";
-export * from "./customers";
-export * from "./striped-static-table";
-export * from "./radio-card";
-export * from "./image-radio-input";
-export * from "./sorting-select";
-export * from "./date-time-button";

package/src/logo/Logo.tsx

@@ -3,7 +3,7 @@ import Col from "react-bootstrap/Col";
 import Row from "react-bootstrap/Row";
 
 interface Props extends HTMLAttributes<HTMLDivElement> {
-  logo: ReactNode | null;
+  logo: ReactNode;
   logoSm?: ReactNode;
 }
 

package/src/notification/email-template/card/EmailTemplateCard.stories.tsx

@@ -14,10 +14,8 @@ export const Default: Story<EmailTemplateCardProps> = (args) => (
 
 Default.args = {
   href: "#",
-  name: "Default Email Template with very long name",
-  subject: "Confirmation with looong subject text",
+  name: "Default Email Template",
+  subject: "Confirmation",
   hasPermission: true,
   isDefault: true,
-  templateType: "confirmation",
-  isActive: true,
 };