@licklist/design 0.44.485-dev.67 → 0.44.485-dev.7

package/src/iframe/order-process/components/CalendarStepsForm/components/Category.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import { PointProduct } from "@licklist/core/dist/DataMapper/Product/PointProductDataMapper";
-import { ProductQuantityCheckResponse } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { ProductCategory } from "../../../../../types";
 import { CategoryProductModal } from "./CategoryProductModal";
 
@@ -9,7 +8,6 @@ export type CategoryProps = {
   activePointId?: number;
   pointProducts: PointProduct[];
   onCloseModal: () => void;
-  soldOutProducts?: ProductQuantityCheckResponse["products"];
 };
 
 export const Category = ({
@@ -17,7 +15,6 @@ export const Category = ({
   activePointId,
   pointProducts,
   onCloseModal,
-  soldOutProducts,
 }: CategoryProps) => {
   return (
     <>
@@ -34,7 +31,6 @@ export const Category = ({
                     activePointId={activePointId}
                     pointProducts={pointProducts}
                     onCloseModal={onCloseModal}
-                    soldOutProducts={soldOutProducts}
                   />
                 );
               })}

package/src/iframe/order-process/components/CalendarStepsForm/components/CategoryProductModal.tsx

@@ -2,7 +2,6 @@ import React, { useMemo } from "react";
 import clsx from "clsx";
 import { Button } from "react-bootstrap";
 import { PointProduct } from "@licklist/core/dist/DataMapper/Product/PointProductDataMapper";
-import { ProductQuantityCheckResponse } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { ProductCategory, Product } from "../../../../../types";
 import { CategoryProduct } from "../../CategoryProduct";
 import Icon from "../../../../../static/Icon";
@@ -13,7 +12,6 @@ export type CategoryProductModalProps = {
   category: ProductCategory;
   pointProducts: PointProduct[];
   onCloseModal: () => void;
-  soldOutProducts?: ProductQuantityCheckResponse["products"];
 };
 
 export const CategoryProductModal = ({
@@ -22,7 +20,6 @@ export const CategoryProductModal = ({
   category,
   pointProducts,
   onCloseModal,
-  soldOutProducts,
 }: CategoryProductModalProps) => {
   const activePointProduct = useMemo(
     () =>
@@ -45,7 +42,6 @@ export const CategoryProductModal = ({
         product={product}
         category={category}
         canExpandDescription={false}
-        soldOutProducts={soldOutProducts}
       />
       <div className="close-modal-button">
         <Button

package/src/iframe/order-process/components/Category/Category.tsx

@@ -8,7 +8,6 @@ import { StepsFormProps } from "../StepsForm/StepsForm";
 interface CategoryProps {
   productCategories: ProductCategory[];
   productsWithErrors?: StepsFormProps["productsWithErrors"];
-  soldOutProducts?: StepsFormProps["productsWithErrors"];
   errors?: DeepMap<Record<string, any>, FieldError>;
 }
 
@@ -16,7 +15,6 @@ export function Category({
   productCategories,
   productsWithErrors,
   errors,
-  soldOutProducts,
 }: CategoryProps) {
   return (
     <>
@@ -39,7 +37,6 @@ export function Category({
                     product={product}
                     category={category}
                     productsWithErrors={productsWithErrors}
-                    soldOutProducts={soldOutProducts}
                   />
                 );
               })}

package/src/iframe/order-process/components/CategoryProduct/CategoryProduct.tsx

@@ -15,7 +15,6 @@ interface CategoryProductProps {
   category: ProductCategory;
   canExpandDescription?: boolean;
   productsWithErrors?: StepsFormProps["productsWithErrors"];
-  soldOutProducts?: StepsFormProps["productsWithErrors"];
 }
 
 export const CategoryProduct = ({
@@ -23,7 +22,6 @@ export const CategoryProduct = ({
   category,
   canExpandDescription = true,
   productsWithErrors,
-  soldOutProducts,
 }: CategoryProductProps) => {
   const { formatNumber } = useIntl();
   const { t } = useTranslation(["Design", "Validation"]);
@@ -51,16 +49,6 @@ export const CategoryProduct = ({
     return product.deposit;
   }, [category, product]);
 
-  const checkIfSoldOutProduct = () => {
-    if (!soldOutProducts || product?.isSoldOut) {
-      return undefined;
-    }
-    const error = soldOutProducts.find(
-      (productWithError) => productWithError.product_id === product.id
-    );
-    return !!error?.message;
-  };
-
   useEffect(() => {
     if (!productQuantityError) {
       return;
@@ -83,32 +71,17 @@ export const CategoryProduct = ({
           // One case when no value is that we have product,
           // but didn't click on number input.
           // If it will be required then required check fired firstly.
+          if (!value) return true;
 
-          const {
-            isRequired = false,
-            maxAmount = 0,
-            minAmount = 0,
-            minSpend,
-            price,
-          } = product;
+          const { isRequired = false, maxAmount = 0, minAmount = 0 } = product;
 
-          const currentQuantity = value?.quantity ?? 0;
-          if (minSpend && currentQuantity * price < minSpend) {
-            return t("Design:minimumSpendSumValidation", {
-              minSpend: formatNumber(minSpend, {
-                style: "currency",
-                currency: Config.Currency.GBP,
-              }),
-            }) as string;
-          }
-
-          if (!value) return true;
+          const { quantity = 0 } = value;
 
-          if (!currentQuantity && !isRequired) {
+          if (!quantity && !isRequired) {
             return true;
           }
 
-          if (!currentQuantity && isRequired) {
+          if (!quantity && isRequired) {
             return t("Design:pleaseSelectAtLeastFrom", {
               min: 1,
               type: "item",
@@ -116,18 +89,14 @@ export const CategoryProduct = ({
             }) as string;
           }
 
-          if (currentQuantity < minAmount) {
+          if (quantity < minAmount) {
             return t("Validation:fieldMinNumber", {
               min: product.minAmount,
               attribute: product.name,
             }) as string;
           }
 
-          if (
-            maxAmount &&
-            currentQuantity >= minAmount &&
-            maxAmount < currentQuantity
-          ) {
+          if (maxAmount && quantity >= minAmount && maxAmount < quantity) {
             return t("Validation:quantityMaxNumber", {
               max: product.maxAmount,
             }) as string;
@@ -167,10 +136,7 @@ export const CategoryProduct = ({
                 productInfo={productInfo}
                 ref={ref}
                 clearErrors={clearErrors}
-                product={{
-                  ...product,
-                  isSoldOut: product?.isSoldOut || checkIfSoldOutProduct(),
-                }}
+                product={product}
                 category={category}
                 invalid={invalid}
                 deposit={deposit}

package/src/iframe/order-process/components/CategoryProduct/components/NumberInput/NumberInput.tsx

@@ -10,7 +10,6 @@ interface NumberInputProps {
   onArrowDown?: (value: number) => void;
   min?: number;
   max?: number;
-  placeholder?: string;
   defaultValue?: number;
   disabled?: boolean;
 }
@@ -25,7 +24,6 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
       onArrowUp,
       min,
       max,
-      placeholder,
       defaultValue,
       disabled,
     },
@@ -68,7 +66,6 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
           min={min}
           max={max}
           defaultValue={defaultValue}
-          placeholder={placeholder}
           height="5rem"
           disabled={disabled}
           ref={ref}

package/src/iframe/order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput.tsx

@@ -83,7 +83,7 @@ export const ProductQuantityInput = ({
           deposit,
           price: product.price,
           productsCategoryId: category.id,
-          quantity: val || null,
+          quantity: val,
         });
         clearErrors(`${product.id}` as const);
       }}
@@ -110,9 +110,8 @@ export const ProductQuantityInput = ({
         clearErrors(`${product.id}` as const);
       }}
       min={0}
-      placeholder="0"
       disabled={product.isSoldOut}
-      value={productInfo?.quantity}
+      value={productInfo?.quantity || 0}
       className={clsx(invalid && "error")}
     />
   );

package/src/iframe/order-process/components/StepsForm/StepsForm.tsx

@@ -32,7 +32,6 @@ export interface StepsFormProps {
   setFormErrors?: (errors: Record<string, any>) => void;
   id?: string;
   productsWithErrors?: ProductQuantityCheckResponse["products"];
-  soldOutProducts?: ProductQuantityCheckResponse["products"];
 }
 
 export type StepsFormRef = {
@@ -50,7 +49,6 @@ export const StepsForm = forwardRef<StepsFormRef, StepsFormProps>(
       setFormErrors,
       id = STEP_FORM_ID,
       productsWithErrors,
-      soldOutProducts,
     },
     ref
   ) => {
@@ -152,7 +150,6 @@ export const StepsForm = forwardRef<StepsFormRef, StepsFormProps>(
                 productCategories={step?.productCategories}
                 productsWithErrors={productsWithErrors}
                 errors={errors}
-                soldOutProducts={soldOutProducts}
               />
 
               {errors[NO_ORDER_ITEMS_ERROR] && (

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

@@ -11,7 +11,7 @@ export function Default() {
   return (
     <div className="payment-process">
       <div className="col-lg-4">
-        <Timer timer={120000} />
+        <Timer timer={300} />
       </div>
     </div>
   );

package/src/iframe/order-process/components/Timer/utils/index.ts

@@ -1,7 +1,7 @@
-export const fancyTimeFormat = (miliseconds: number) => {
-  const date = new Date(miliseconds);
-  const mins = date.getMinutes();
-  const secs = date.getSeconds();
+export const fancyTimeFormat = (duration: number) => {
+  const mins = Math.floor((duration % 3600) / 60);
+  const secs = Math.floor(duration) % 60;
+
   let timerString = "";
 
   timerString += `${mins}:${secs < 10 ? "0" : ""}`;

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

@@ -75,37 +75,22 @@ 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"
@@ -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-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

@@ -33,7 +33,3 @@ 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";

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,
 };

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

@@ -2,19 +2,16 @@ 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({
@@ -23,14 +20,10 @@ 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">
@@ -60,13 +53,8 @@ export function EmailTemplateCard({
           )}
         </div>
         <div className={`mt-${isDefault ? "3" : "4"}`}>
-          {!!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>
+          {Boolean(isDefault) && <p className="mb-1">{t("Design:default")}</p>}
+          <span>{subject}</span>
         </div>
       </div>
     </>