@licklist/design 0.44.485 → 0.44.486-dev.1

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

@@ -1,13 +1,16 @@
-import { Order } from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
+import {
+  Order,
+  ORDER_FEE_CHARGE_TYPE_CLIENT,
+} 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 {
@@ -16,14 +19,35 @@ export enum PAYMENT_TYPE_TITLES {
   VAT = "VAT",
 }
 
-export const calculateTotalPrice = (orderProducts: Order["orderProducts"]) => {
-  return (
-    orderProducts?.reduce(
+interface ExternalPaymnetDetail {
+  translateKey: string;
+  price: number;
+}
+
+export const calculateTotalPrice = (
+  order: Order,
+  externalPaymentDetails?: ExternalPaymnetDetail[]
+) => {
+  const totalPrice =
+    order?.orderProducts?.reduce(
       (total: number, product) =>
         total + (product?.quantity ?? 1) * product.price,
       0
-    ) ?? 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;
 };
 
 export const calculateTotalDiscount = (payments: Order["payments"]) => {
@@ -51,21 +75,37 @@ 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.find((payment) => payment.paymentType.title === paymentTypeTitle)
-        ?.amount ?? 0;
+      payments?.reduce((sumOfPayments, payment) => {
+        if (payment.paymentType.title !== PAYMENT_TYPE_TITLES.FEE) {
+          return sumOfPayments;
+        }
+
+        return sumOfPayments + (payment?.amount ?? 0);
+      }, 0) ?? 0;
 
     const vatValue =
-      payments.find(
-        (payment) => payment.paymentType.title === PAYMENT_TYPE_TITLES.VAT
-      )?.amount ?? 0;
+      payments?.reduce((sumOfPayments, payment) => {
+        if (payment.paymentType.title !== PAYMENT_TYPE_TITLES.VAT) {
+          return sumOfPayments;
+        }
+        return sumOfPayments + (payment?.amount ?? 0);
+      }, 0) ?? 0;
     return feeWithoutVatValue + vatValue;
   }
+
   return (
-    payments.find((payment) => payment.paymentType.title === paymentTypeTitle)
-      ?.amount ?? 0
+    payments?.reduce((sumOfPayments, payment) => {
+      if (payment.paymentType.title !== paymentTypeTitle) {
+        return sumOfPayments;
+      }
+      return sumOfPayments + (payment?.amount ?? 0);
+    }, 0) ?? 0
   );
 };
 

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"
@@ -110,7 +124,6 @@ export const PaymentPage = ({
           onCloseButtonClick={isIframePayment ? onGoBack : undefined}
         >
           <PaymentTimer />
-
           <div className="d-flex align-items-center justify-content-center w-100">
             {t("paymentDetails")}
           </div>
@@ -128,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")}
@@ -138,12 +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 || 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/ryft/RyftPaymentForm.tsx

@@ -183,7 +183,7 @@ export const RyftPaymentForm = ({
         onSubmit={methods.handleSubmit(handleSubmit)}
         className="ryft-payment-form"
       >
-        <div className="submit-button-wrapper mt-3 px-1">
+        <div className="submit-button-wrapper mt-3 p-1">
           <Button type="submit" disabled={isBtnDisabled || !isValid}>
             {isBtnDisabled && <ButtonLoader />}
             {t("Design:buyNow")}

package/src/image-radio-input/ImageRadioInput.stories.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import { FormProvider, useForm } from "react-hook-form";
+import { ImageRadioInput, ImageRadioInputProps } from "./ImageRadioInput";
+import { ReactComponent as MonthIcon } from "../assets/widgets/monthCalendar.svg";
+import Icon from "../static/Icon";
+
+export default {
+  title: "ImageRadioInput",
+  component: ImageRadioInput,
+} as Meta;
+
+type FormModel = {
+  test: string;
+};
+
+export const Default: Story<ImageRadioInputProps<FormModel>> = (args) => {
+  const form = useForm();
+
+  return (
+    <FormProvider {...form}>
+      <ImageRadioInput {...args} />
+    </FormProvider>
+  );
+};
+
+Default.args = {
+  img: <MonthIcon />,
+  label: "Month",
+  name: "test",
+};
+
+export const WithFontAwesomeIcon: Story<ImageRadioInputProps<FormModel>> = (
+  args
+) => {
+  const form = useForm();
+
+  return (
+    <FormProvider {...form}>
+      <ImageRadioInput {...args} />
+    </FormProvider>
+  );
+};
+
+WithFontAwesomeIcon.args = {
+  img: <Icon type="bars" />,
+  label: "List",
+  name: "test",
+};
+
+export const Disabled: Story<ImageRadioInputProps<FormModel>> = (args) => {
+  const form = useForm();
+
+  return (
+    <FormProvider {...form}>
+      <ImageRadioInput {...args} />
+    </FormProvider>
+  );
+};
+
+Disabled.args = {
+  img: <MonthIcon />,
+  label: "Month",
+  name: "test",
+  disabled: true,
+  disabledMessage: "Coming soon",
+};

package/src/image-radio-input/ImageRadioInput.tsx

@@ -0,0 +1,53 @@
+import clsx from "clsx";
+import React, { ReactNode } from "react";
+import { Form } from "react-bootstrap";
+import { FormCheckInputProps } from "react-bootstrap/esm/FormCheckInput";
+import { Path, RegisterOptions, useFormContext } from "react-hook-form";
+
+export type ImageRadioInputProps<FormModel> = {
+  img: ReactNode;
+  label: string;
+  value: string | number;
+  name: Path<FormModel>;
+  disabled?: boolean;
+  disabledMessage?: string;
+  rules?: RegisterOptions<FormModel>;
+  inputProps?: FormCheckInputProps;
+};
+
+export const ImageRadioInput = <FormModel,>({
+  img,
+  label,
+  value,
+  name,
+  disabled,
+  disabledMessage,
+  rules,
+  inputProps,
+}: ImageRadioInputProps<FormModel>) => {
+  const { register } = useFormContext<FormModel>();
+
+  return (
+    <Form.Check className="image-radio-input">
+      <Form.Check.Label
+        className={clsx("image-radio-input-wrapper", disabled && "disabled")}
+      >
+        <div className="image-radio-input-image-wrapper">{img}</div>
+
+        <div className="image-radio-input-label">
+          <Form.Check.Input
+            type="radio"
+            value={value}
+            disabled={disabled}
+            {...register(name, rules)}
+            {...inputProps}
+          />
+          <span>{label}</span>
+        </div>
+      </Form.Check.Label>
+      <Form.Control.Feedback type="valid" className="d-block text-center">
+        {disabledMessage}
+      </Form.Control.Feedback>
+    </Form.Check>
+  );
+};

package/src/index.ts

@@ -18,6 +18,7 @@ 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";
@@ -32,3 +33,9 @@ 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;
+  logo: ReactNode | null;
   logoSm?: ReactNode;
 }
 

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

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

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

@@ -2,16 +2,19 @@ import React from "react";
 import { Link } from "react-router-dom";
 import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
 import { useTranslation } from "react-i18next";
-
+import { NotificationType } from "@licklist/core/dist/DataMapper/Notification/NotificationTypeDataMapper";
 import { ConfirmModal, ConfirmModalType } from "../../../modals";
 import { Icon } from "../../../static";
+import { useTranslatedParameters } from "../../hooks/useTranslatedParameters";
 
 export interface EmailTemplateCardProps extends HasPermissionProp {
   name: string;
   subject: string;
   href: string;
   isDefault: boolean;
+  isActive: boolean;
   onRemove: () => void;
+  type: NotificationType;
 }
 
 export function EmailTemplateCard({
@@ -20,10 +23,14 @@ export function EmailTemplateCard({
   subject,
   onRemove,
   isDefault = false,
+  isActive = false,
   hasPermission = true,
+  type,
 }: EmailTemplateCardProps) {
   const { t } = useTranslation(["Design"]);
 
+  const texts = useTranslatedParameters({ isDefault, isActive });
+
   return (
     <>
       <div className="snippet-template-card">
@@ -53,8 +60,13 @@ export function EmailTemplateCard({
           )}
         </div>
         <div className={`mt-${isDefault ? "3" : "4"}`}>
-          {Boolean(isDefault) && <p className="mb-1">{t("Design:default")}</p>}
-          <span>{subject}</span>
+          {!!texts.length && <p className="mb-1">{texts}</p>}
+          <div className="d-flex flex-column">
+            <span className="snippet-template-card-subject">{subject}</span>
+            <p className="mb-0">
+              {t(`Design:type`)}:&nbsp;{t(`Design:${type}`)}
+            </p>
+          </div>
         </div>
       </div>
     </>