@licklist/design 0.44.485-dev.28 → 0.44.485-dev.3

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;
@@ -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"
@@ -141,7 +127,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 +137,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-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

@@ -33,4 +33,3 @@ export * from "./zone";
 export * from "./resource";
 export * from "./virtualized";
 export * from "./customers";
-export * from "./striped-static-table";

package/src/product-set/control/ProductSetControl.tsx

@@ -26,19 +26,12 @@ import {
 import TutorialGifCard from "./TutorialGifCard";
 import { Step } from "../types";
 import { StepsControl } from "../form/StepsControl";
-import { Typeahead } from "../../typeahead";
 
 const OPERATIONAL_COST_TITLES = {
   [OPERATIONAL_COST_PROVIDER]: "operationalCostProvider",
   [OPERATIONAL_COST_CUSTOMER]: "operationalCostCustomer",
 } as const;
 
-export interface TemplateItem {
-  id: string;
-  value: EmailTemplate | SmsTemplate;
-  label: string;
-}
-
 export interface ProductSetControlValues extends DateAndRecurrenceInputValues {
   name: string;
   type: ProductSetType;
@@ -48,8 +41,8 @@ export interface ProductSetControlValues extends DateAndRecurrenceInputValues {
   productGroups?: SelectItem[];
   fieldSetId?: number;
   steps?: Step[];
-  emailTemplates?: TemplateItem[];
-  smsTemplates?: TemplateItem[];
+  emailTemplateId?: number;
+  smsTemplateId?: number;
 }
 
 export interface ProductSetControlShared {
@@ -59,17 +52,11 @@ export interface ProductSetControlShared {
   smsTemplates?: SmsTemplate[];
 }
 
-export interface ProductSetControlProps {
+export interface ProductSetControlProps extends ProductSetControlShared {
   companyName: string;
   isLoading: boolean;
   isEventEditProductSet?: boolean;
   isCreateAction?: boolean;
-  emailTemplates?: TemplateItem[];
-  smsTemplates?: TemplateItem[];
-  fee?: string;
-  fieldSets?: FieldSet[];
-  showEmailTemplate?: boolean;
-  showSmsTemplate?: boolean;
 }
 
 export function ProductSetControl({
@@ -81,8 +68,6 @@ export function ProductSetControl({
   smsTemplates = [],
   isEventEditProductSet,
   isCreateAction,
-  showEmailTemplate,
-  showSmsTemplate,
 }: ProductSetControlProps) {
   const { t } = useTranslation(["Design", "Validation", "Notification"]);
   const {
@@ -95,6 +80,8 @@ export function ProductSetControl({
   } = useFormContext<ProductSetControlValues>();
 
   const steps = watch("steps");
+  const smsTemplateId = watch("smsTemplateId");
+  const emailTemplateId = watch("emailTemplateId");
 
   const nameId = useId();
   const termsAndConditionsId = useId();
@@ -232,16 +219,20 @@ export function ProductSetControl({
             <Form.Label className="mt-4">
               {t("Design:emailTemplate")}
             </Form.Label>
-            {showEmailTemplate ? (
-              <Typeahead
-                name="emailTemplates"
-                options={emailTemplates}
-                isMultipleChoise
-                placeholder={t("Design:choose")}
-                noOptionsMessage={t("Design:noActiveTemplates", {
-                  notification: t("Design:email"),
-                })}
-              />
+            {emailTemplates.length > 0 ? (
+              <Form.Control {...register("emailTemplateId")} as="select">
+                <option value="" selected={String(emailTemplateId) === ""}>
+                  {t("Design:choose")}
+                </option>
+                {emailTemplates.map((emailTemplate) => (
+                  <option
+                    value={Number(emailTemplate.notification.id)}
+                    key={emailTemplate.id}
+                  >
+                    {emailTemplate.notification.name}
+                  </option>
+                ))}
+              </Form.Control>
             ) : (
               <WarningMessage
                 message={t("Design:noActiveTemplates", {
@@ -255,16 +246,20 @@ export function ProductSetControl({
             >
               {t("Design:smsTemplate")}
             </Form.Label>
-            {showSmsTemplate ? (
-              <Typeahead
-                name="smsTemplates"
-                options={smsTemplates}
-                isMultipleChoise
-                placeholder={t("Design:choose")}
-                noOptionsMessage={t("Design:noActiveTemplates", {
-                  notification: t("Design:sms"),
-                })}
-              />
+            {smsTemplates.length > 0 ? (
+              <Form.Control {...register("smsTemplateId")} as="select">
+                <option value="" selected={String(smsTemplateId) === ""}>
+                  {t("Design:choose")}
+                </option>
+                {smsTemplates.map((smsTemplate) => (
+                  <option
+                    value={Number(smsTemplate.notification.id)}
+                    key={smsTemplate.id}
+                  >
+                    {smsTemplate.notification.name}
+                  </option>
+                ))}
+              </Form.Control>
             ) : (
               <WarningMessage
                 message={t("Design:noActiveTemplates", {

package/src/product-set/form/ProductSetForm.stories.tsx

@@ -3,11 +3,6 @@
 import React from "react";
 import { Meta, Story } from "@storybook/react";
 import { boolean } from "@storybook/addon-knobs";
-import {
-  CONFIRMATION_TYPE,
-  PAYMENT_LINK_TYPE,
-} from "@licklist/core/dist/DataMapper/Notification/NotificationTypeDataMapper";
-
 import {
   OPERATIONAL_COST_CUSTOMER,
   OPERATIONAL_COST_PROVIDER,
@@ -362,14 +357,12 @@ Default.args = {
       body: "",
       meta: "",
       notification: {
-        id: 1,
-        isActive: true,
+        isActive: false,
         isDefault: false,
         name: "Template name 1",
         companyId: 1,
         providerId: 1,
         fieldSetId: 1,
-        type: CONFIRMATION_TYPE,
       },
     },
     {
@@ -378,44 +371,12 @@ Default.args = {
       body: "",
       meta: "",
       notification: {
-        id: 2,
-        isActive: true,
-        isDefault: false,
-        name: "Tempalte name 2",
-        companyId: 1,
-        providerId: 1,
-        fieldSetId: 1,
-        type: CONFIRMATION_TYPE,
-      },
-    },
-  ],
-  smsTemplates: [
-    {
-      id: "1",
-      body: "",
-      notification: {
-        id: 3,
-        isActive: true,
-        isDefault: false,
-        name: "Tempalte name 1",
-        companyId: 1,
-        providerId: 1,
-        fieldSetId: 1,
-        type: PAYMENT_LINK_TYPE,
-      },
-    },
-    {
-      id: "2",
-      body: "",
-      notification: {
-        id: 4,
-        isActive: true,
+        isActive: false,
         isDefault: false,
         name: "Tempalte name 2",
         companyId: 1,
         providerId: 1,
         fieldSetId: 1,
-        type: PAYMENT_LINK_TYPE,
       },
     },
   ],

package/src/product-set/form/ProductSetForm.tsx

@@ -20,7 +20,6 @@ import {
 import { Step } from "../types";
 import { ProductSetContextProvider, ProductSetLoadingContext } from "./context";
 import { SelectItem } from "../../types/generic/SelectItem";
-import { getFilteredTemplates } from "../utils";
 
 export interface WithIsLoading {
   isLoading: boolean;
@@ -134,16 +133,6 @@ export function ProductSetForm({
                 <>
                   <ProductSetControl
                     {...shared}
-                    smsTemplates={getFilteredTemplates(
-                      shared?.smsTemplates,
-                      formValues?.smsTemplates
-                    )}
-                    emailTemplates={getFilteredTemplates(
-                      shared?.emailTemplates,
-                      formValues?.emailTemplates
-                    )}
-                    showEmailTemplate={!!shared?.emailTemplates}
-                    showSmsTemplate={!!shared?.smsTemplates}
                     isLoading={isLoading}
                     isCreateAction={isCreateAction}
                     companyName={companyName}

package/src/product-set/form/ProductsControl.tsx

@@ -85,14 +85,11 @@ export function ProductsControl({
     trigger,
     setValue,
     watch,
-    getValues,
   } = form;
 
   const productControlFieldName =
     `steps.${stepIndex}.productCategories.${productCategoryIndex}.products` as const;
 
-  const productPointsKey = `steps.${stepIndex}.pointProducts` as const;
-
   const { fields, append, remove, move } = useFieldArray({
     name: productControlFieldName,
     control,
@@ -159,22 +156,6 @@ export function ProductsControl({
     });
   };
 
-  const onProductRemove = (index: number) => {
-    const currentProduct = getValues(
-      `${productControlFieldName}.${index}` as const
-    );
-
-    const currentPointProducts = getValues(productPointsKey);
-
-    setValue(
-      productPointsKey,
-      currentPointProducts?.filter(
-        (product) => product.productUuid !== currentProduct.uuid
-      ) || []
-    );
-    remove(index);
-  };
-
   return (
     <>
       <SortableTree
@@ -238,7 +219,7 @@ export function ProductsControl({
                     categoryType={categoryType}
                   />
                 }
-                onDelete={() => onProductRemove(index)}
+                onDelete={() => remove(index)}
                 validate={() => trigger(`${productControlFieldName}.${index}`)}
                 // preItem={<Popover className="d-none d-sm-block" />}
               >

package/src/product-set/form/StepsControl.tsx

@@ -28,7 +28,6 @@ export function StepsControl({ isLoading }: StepsControlProps) {
     formState: { errors, isSubmitting },
     clearErrors,
     getValues,
-    setFocus,
   } = form;
 
   const { fields, append, remove } = useFieldArray({
@@ -58,14 +57,12 @@ export function StepsControl({ isLoading }: StepsControlProps) {
   return (
     <>
       {fields.map((step, index) => {
-        const stepFieldName = `steps.${index}` as const;
-
-        const stepData = getValues(stepFieldName);
+        const stepData: any = getValues(`steps.${index}` as const);
 
         return (
           <Controller
             key={`step-${step._id}`}
-            name={`${stepFieldName}.name` as const}
+            name={`steps.${index}.name` as const}
             control={control}
             rules={{
               required: t("Validation:fieldRequired", {
@@ -107,21 +104,6 @@ export function StepsControl({ isLoading }: StepsControlProps) {
                     ? step.productCategories.map(({ id }) => String(id))
                     : []
                 }
-                validate={() => {
-                  // @TODO investigate why form return true in case
-                  // when required field not filled. Looks like
-                  // we cann't use default hookForm trigger function
-                  // because we have venueMap outside this form.
-                  // So before closing we need to check directly by
-                  // error on name field. Instead of run trugger.
-                  const error = errors.steps?.[index]?.name;
-
-                  if (error) {
-                    setFocus(`${stepFieldName}.name` as const);
-                  }
-
-                  return Promise.resolve(!error);
-                }}
               >
                 <ProductCategoriesControl
                   isLoading={isLoading}