@licklist/design 0.44.486-dev.83 → 0.44.486

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 orderTotalAmountByFormValues = cartSumByOrderProducts(
-    bookingSummaryProps && bookingSummaryProps?.formValues
-      ? Object.values(bookingSummaryProps?.formValues)
-      : undefined
-  );
-
-  // User can fill promo code only in iframe application.
-  // 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 =
-    orderTotalAmountByFormValues > 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={
-                            orderTotalAmountByFormValues +
-                            (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/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 p-1">
+        <div className="submit-button-wrapper mt-3 px-1">
           <Button type="submit" disabled={isBtnDisabled || !isValid}>
             {isBtnDisabled && <ButtonLoader />}
             {t("Design:buyNow")}

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,12 +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";
-export * from "./calendar";
-export * from "./availability-indicator";
-export * from "./number-of-people-input";

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

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>
     </>

package/src/notification/email-template/control/EmailTemplateControl.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/display-name */
 import React, { useState, useEffect } from "react";
 import { Col, Row, Form } from "react-bootstrap";
 import { useFormContext } from "react-hook-form";
@@ -15,7 +16,6 @@ import {
   PERMANENT_IMAGE_TYPE_TEMP,
 } from "@licklist/core/dist/DataMapper/Media/UploadPermanentImageDataMapper";
 
-import { NotificationType } from "@licklist/core/dist/DataMapper/Notification/NotificationTypeDataMapper";
 import { FileUpload } from "../../../file-upload";
 import { EmailTemplateValues } from "../form";
 
@@ -26,8 +26,6 @@ export interface EmailTemplateControlProps {
   setIsLoading: (isLoading: boolean) => void;
   meta: string;
   defaultAttachments?: Attachment[];
-  notificationTypes?: NotificationType[];
-  getDefaultTemplateMetaByType?: (type?: NotificationType | null) => string;
 }
 
 export const EmailTemplateControl = React.forwardRef(
@@ -37,8 +35,6 @@ export const EmailTemplateControl = React.forwardRef(
       meta,
       options = [],
       defaultAttachments = [],
-      notificationTypes = [],
-      getDefaultTemplateMetaByType,
     }: EmailTemplateControlProps,
     ref: any
   ) => {
@@ -52,8 +48,6 @@ export const EmailTemplateControl = React.forwardRef(
       setValue,
       formState: { errors },
       getValues,
-      watch,
-      reset,
     } = useFormContext<EmailTemplateValues>();
     const [isIncludePDF, setIsIncludePDF] = useState(false);
 
@@ -70,29 +64,12 @@ export const EmailTemplateControl = React.forwardRef(
       handlePermanentImageUploading,
     } = usePermanentImage();
 
-    const type = watch("type");
-    const id = watch("id");
-
-    useEffect(() => {
-      if (id || !getDefaultTemplateMetaByType || !type) return;
-
-      const formValues = getValues();
-
-      const nextMeta = getDefaultTemplateMetaByType(type);
-
-      reset({ ...formValues, meta: nextMeta });
-
-      ref.current?.loadDesign(JSON.parse(nextMeta));
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [type]);
-
     useEffect(() => {
       setValue("attachmentMetadata", attachments);
     }, [attachments, setValue]);
 
     useEffect(() => {
       if (!permanentImages.length) return;
-
       setValue("imagesMetadata", permanentImages);
     }, [permanentImages, setValue]);
 
@@ -108,15 +85,13 @@ export const EmailTemplateControl = React.forwardRef(
     }, [defaultAttachments]);
 
     useEffect(() => {
-      if (!options?.length) return;
-
+      if (!options.length) return;
       const fileSelectorOptions = options.find(
         (option) => option.type === OPTION_TYPE.files_selector
       );
-
-      if (!fileSelectorOptions?.selectedValue) return;
-
-      setIsIncludePDF(true);
+      if (fileSelectorOptions.selectedValue) {
+        setIsIncludePDF(true);
+      }
     }, [options]);
 
     const handleDeleteEmailImage = (content) => {
@@ -200,42 +175,6 @@ export const EmailTemplateControl = React.forwardRef(
 
     return (
       <>
-        <Row>
-          <Form.Group
-            as={Col}
-            controlId="type"
-            xs
-            sm={12}
-            md={8}
-            lg={10}
-            xl={12}
-          >
-            <Form.Label>{t("type")}</Form.Label>
-            <Form.Control
-              as="select"
-              {...register("type", {
-                required: t("Validation:fieldRequired", {
-                  attribute: t("type"),
-                }) as string,
-              })}
-              name="type"
-              required
-              isInvalid={Boolean(errors.type)}
-              placeholder={t("Design:type")}
-              disabled={!!id}
-            >
-              <option value="">{t("Design:choose")}</option>
-              {notificationTypes.map((key) => (
-                <option key={key} value={key}>
-                  {t(`Design:${key}`)}
-                </option>
-              ))}
-            </Form.Control>
-            <Form.Control.Feedback type="invalid">
-              {errors.type?.message}
-            </Form.Control.Feedback>
-          </Form.Group>
-        </Row>
         <Row>
           <Form.Group
             as={Col}
@@ -314,38 +253,13 @@ export const EmailTemplateControl = React.forwardRef(
         <Row className="mb-4">
           <Form.Group as={Col}>
             <Form.Label>{t("Design:emailBody")}</Form.Label>
-
-            <div className="alert alert-warning" role="alert">
-              Due to the mail services limitations on the length of the email
-              body that can be sent or received - maximum length is set to
-              65,535 characters.
-            </div>
-
-            <div className={`email-editor ${errors.body && "is-invalid"}`}>
+            <div className="email-editor">
               <EmailEditor
                 ref={ref}
                 onReady={onReadyEditor}
                 style={{ height: "50rem" }}
               />
-
-              <input
-                type="hidden"
-                name="body"
-                {...register("body", {
-                  maxLength: {
-                    value: 65535,
-                    message: t("Validation:fieldMaxLength", {
-                      attribute: t("body"),
-                      max: 65535,
-                    }) as string,
-                  },
-                })}
-              />
             </div>
-
-            <Form.Control.Feedback type="invalid">
-              {errors.body?.message}
-            </Form.Control.Feedback>
           </Form.Group>
         </Row>
         <Row>
@@ -365,7 +279,7 @@ export const EmailTemplateControl = React.forwardRef(
             isLoading={isAttachmentLoading}
           />
         </Row>
-        {options?.length > 0 && (
+        {options.length > 0 && (
           <Row>
             <Form.Group as={Col}>
               {options.map((option) => {
@@ -433,27 +347,6 @@ export const EmailTemplateControl = React.forwardRef(
                     </>
                   );
                 }
-
-                if (option.type === OPTION_TYPE.days_reminder) {
-                  return (
-                    <>
-                      <Form.Label className="mt-4">
-                        {t(`Design:${option.name}`)}
-                      </Form.Label>
-                      <Form.Control
-                        {...register(
-                          `templateOptionValues.${option?.id}.value` as any
-                        )}
-                        type="number"
-                        placeholder={t(`Design:${option.name}`)}
-                        id={option.name + option.id}
-                        defaultValue={option.selectedValue || ""}
-                      />
-                      <Form.Text>{option.description}</Form.Text>
-                    </>
-                  );
-                }
-
                 return null;
               })}
             </Form.Group>
@@ -463,5 +356,3 @@ export const EmailTemplateControl = React.forwardRef(
     );
   }
 );
-
-EmailTemplateControl.displayName = "EmailTemplateControl";

package/src/notification/email-template/form/EmailTemplateForm.stories.tsx

@@ -185,7 +185,6 @@ Default.args = {
       notificationType: "confirmation",
       type: "checkbox",
       defaultValue: "true",
-      descrption: "",
     },
     {
       id: 12,
@@ -193,7 +192,6 @@ Default.args = {
       notificationType: "confirmation",
       type: "checkbox",
       defaultValue: "false",
-      descrption: "",
     },
     {
       selectedValue: "invoice",
@@ -203,17 +201,6 @@ Default.args = {
       type: "files_selector",
       defaultValue:
         '{"confirmation":"Confirmation / Function Sheet","invoice":"Invoice"}',
-      descrption: "",
-    },
-    {
-      id: 13,
-      name: "days_reminder",
-      notificationType: "confirmation",
-      type: "days_reminder",
-      defaultValue: "",
-      description: `N.B. Add positive integer for days before the event, or negative for days after the event. 
-        E.g. if you want this remainder to be send 2 days before the event, enter 2. 
-        If you want this to be send 3 days after the event enter -3.`,
     },
   ],
   defaultValues: {
@@ -232,13 +219,6 @@ Default.args = {
         attachableType: "mail",
       },
     ],
-    type: "confirmation",
-    notificationTypes: [
-      "confirmation",
-      "paymentLink",
-      "afterBooking",
-      "preliminaryMail",
-    ],
   },
 };
 
@@ -268,24 +248,10 @@ ServerErrors.args = {
     body: "",
     meta: JSON.stringify(DefaultEmailTemplate),
   },
-  type: "confirmation",
-  notificationTypes: [
-    "confirmation",
-    "paymentLink",
-    "afterBooking",
-    "preliminaryMail",
-  ],
 };
 
 Empty.args = {
   onSubmit: (data) => console.log(data),
   isLoading: true,
   placeholders: [],
-  type: "confirmation",
-  notificationTypes: [
-    "confirmation",
-    "paymentLink",
-    "afterBooking",
-    "preliminaryMail",
-  ],
 };