@licklist/design 0.44.485-dev.6 → 0.44.485-dev.61

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/index.ts

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

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

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

@@ -1,4 +1,3 @@
-/* eslint-disable react/display-name */
 import React, { useState, useEffect } from "react";
 import { Col, Row, Form } from "react-bootstrap";
 import { useFormContext } from "react-hook-form";
@@ -16,6 +15,7 @@ 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,6 +26,8 @@ export interface EmailTemplateControlProps {
   setIsLoading: (isLoading: boolean) => void;
   meta: string;
   defaultAttachments?: Attachment[];
+  notificationTypes?: NotificationType[];
+  getDefaultTemplateMetaByType?: (type?: NotificationType | null) => string;
 }
 
 export const EmailTemplateControl = React.forwardRef(
@@ -35,6 +37,8 @@ export const EmailTemplateControl = React.forwardRef(
       meta,
       options = [],
       defaultAttachments = [],
+      notificationTypes = [],
+      getDefaultTemplateMetaByType,
     }: EmailTemplateControlProps,
     ref: any
   ) => {
@@ -48,6 +52,8 @@ export const EmailTemplateControl = React.forwardRef(
       setValue,
       formState: { errors },
       getValues,
+      watch,
+      reset,
     } = useFormContext<EmailTemplateValues>();
     const [isIncludePDF, setIsIncludePDF] = useState(false);
 
@@ -64,12 +70,29 @@ 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]);
 
@@ -85,13 +108,15 @@ 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) {
-        setIsIncludePDF(true);
-      }
+
+      if (!fileSelectorOptions?.selectedValue) return;
+
+      setIsIncludePDF(true);
     }, [options]);
 
     const handleDeleteEmailImage = (content) => {
@@ -175,6 +200,42 @@ 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}
@@ -279,7 +340,7 @@ export const EmailTemplateControl = React.forwardRef(
             isLoading={isAttachmentLoading}
           />
         </Row>
-        {options.length > 0 && (
+        {options?.length > 0 && (
           <Row>
             <Form.Group as={Col}>
               {options.map((option) => {
@@ -347,6 +408,27 @@ 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>
@@ -356,3 +438,5 @@ export const EmailTemplateControl = React.forwardRef(
     );
   }
 );
+
+EmailTemplateControl.displayName = "EmailTemplateControl";

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

@@ -185,6 +185,7 @@ Default.args = {
       notificationType: "confirmation",
       type: "checkbox",
       defaultValue: "true",
+      descrption: "",
     },
     {
       id: 12,
@@ -192,6 +193,7 @@ Default.args = {
       notificationType: "confirmation",
       type: "checkbox",
       defaultValue: "false",
+      descrption: "",
     },
     {
       selectedValue: "invoice",
@@ -201,6 +203,17 @@ 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: {
@@ -219,6 +232,13 @@ Default.args = {
         attachableType: "mail",
       },
     ],
+    type: "confirmation",
+    notificationTypes: [
+      "confirmation",
+      "paymentLink",
+      "afterBooking",
+      "preliminaryMail",
+    ],
   },
 };
 
@@ -248,10 +268,24 @@ 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",
+  ],
 };

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

@@ -13,12 +13,13 @@ import { ServerError } from "@licklist/plugins/dist/hooks/Api/useHttpQuery";
 import FormErrorService from "@licklist/plugins/dist/services/Form/FormErrorService";
 import { AttachmentsWithHash } from "@licklist/plugins/dist/hooks/Media/useAttachments";
 import { UploadPermanentImage } from "@licklist/core/dist/DataMapper/Media/UploadPermanentImageDataMapper";
-
+import { NotificationType } from "@licklist/core/dist/DataMapper/Notification/NotificationTypeDataMapper";
 import { NotificationPlaceholders } from "../../components/NotificationPlaceholders";
 import { EmailTemplateControl } from "../control/EmailTemplateControl";
 import { BlockLoader } from "../../../static";
 
 export interface EmailTemplateValues extends FormValues {
+  id?: number | string;
   name: string;
   subject: string;
   isActive: boolean;
@@ -29,6 +30,7 @@ export interface EmailTemplateValues extends FormValues {
   attachments?: Attachment[];
   templateOptionValues?: TemplateOptionValue[];
   imagesMetadata?: UploadPermanentImage[];
+  type?: NotificationType;
 }
 
 export interface EmailTemplateProps extends HasPermissionProp {
@@ -39,9 +41,12 @@ export interface EmailTemplateProps extends HasPermissionProp {
   placeholders?: NotificationPlaceholder[];
   options?: TemplateOption[];
   serverErrors?: ServerError;
+  notificationTypes?: NotificationType[];
+  getDefaultTemplateMetaByType?: (type?: NotificationType | null) => string;
+  onTypeChange?: (type?: NotificationType | null) => void;
 }
 
-export function EmailTemplateForm({
+export const EmailTemplateForm = ({
   defaultValues,
   onSubmitSave,
   onSubmitSaveAndSend,
@@ -49,7 +54,10 @@ export function EmailTemplateForm({
   placeholders = [],
   options = [],
   serverErrors,
-}: EmailTemplateProps) {
+  notificationTypes = [],
+  getDefaultTemplateMetaByType,
+  onTypeChange,
+}: EmailTemplateProps) => {
   const { t } = useTranslation("Design");
   const [isLoading, setIsLoading] = useState(false);
   const emailEditorRef = useRef(null);
@@ -59,12 +67,20 @@ export function EmailTemplateForm({
     defaultValues,
   });
 
-  const { setError } = form;
+  const { setError, watch } = form;
+  const type = watch("type");
 
   useEffect(() => {
     FormErrorService.handleServerErrors(serverErrors, setError);
   }, [serverErrors, setError]);
 
+  useEffect(() => {
+    if (!onTypeChange) return;
+
+    onTypeChange(type);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [type]);
+
   return (
     <FormProvider {...form}>
       {isLoading && <BlockLoader />}
@@ -81,6 +97,8 @@ export function EmailTemplateForm({
           meta={defaultValues?.meta || null}
           defaultAttachments={defaultValues?.attachments || []}
           options={options}
+          notificationTypes={notificationTypes}
+          getDefaultTemplateMetaByType={getDefaultTemplateMetaByType}
         />
         <NotificationPlaceholders placeholders={placeholders} />
         {/* update email template */}
@@ -106,4 +124,4 @@ export function EmailTemplateForm({
       </Form>
     </FormProvider>
   );
-}
+};

package/src/notification/hooks/useTranslatedParameters.ts

@@ -0,0 +1,27 @@
+import { useTranslation } from "react-i18next";
+
+type UseTranslatedParametersProps = {
+  isDefault: boolean;
+  isActive: boolean;
+};
+
+export const useTranslatedParameters = ({
+  isActive,
+  isDefault,
+}: UseTranslatedParametersProps) => {
+  const { t } = useTranslation(["Design"]);
+
+  const translatedParameters = () => {
+    const texts: string[] = [];
+    if (isDefault) {
+      texts.push(t("Design:default"));
+    }
+    if (isActive) {
+      texts.push(t("Design:active"));
+    }
+
+    return texts.join(", ");
+  };
+
+  return translatedParameters();
+};

package/src/notification/sms-template/card/SmsTemplateCard.stories.tsx

@@ -14,7 +14,9 @@ export const Default: Story<SmsTemplateCardProps> = (args) => (
 
 Default.args = {
   href: "#",
-  name: "Default Sms Template",
+  name: "Default Sms Template with Long name",
   hasPermission: true,
   isDefault: true,
+  templateType: "confirmation",
+  isActive: true,
 };

package/src/notification/sms-template/card/SmsTemplateCard.tsx

@@ -1,16 +1,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 { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
+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 SmsTemplateCardProps extends HasPermissionProp {
   name: string;
   href: string;
   onRemove: () => void;
   isDefault: boolean;
+  isActive: boolean;
+  type: NotificationType;
 }
 
 export function SmsTemplateCard({
@@ -19,9 +22,13 @@ export function SmsTemplateCard({
   onRemove,
   hasPermission = true,
   isDefault = false,
+  isActive = false,
+  type,
 }: SmsTemplateCardProps) {
   const { t } = useTranslation(["Design"]);
 
+  const texts = useTranslatedParameters({ isActive, isDefault });
+
   return (
     <div className="snippet-template-card">
       <div className="snippet-template-card-header">
@@ -50,7 +57,10 @@ export function SmsTemplateCard({
         )}
       </div>
       <div className="mt-2">
-        {Boolean(isDefault) && <p className="mb-1">{t("Design:default")}</p>}
+        {!!texts.length && <p className="mb-1">{texts}</p>}
+        <p className="mb-0">
+          {t(`Design:type`)}:&nbsp;{t(`Design:${type}`)}
+        </p>
       </div>
     </div>
   );

package/src/notification/sms-template/control/SmsTemplateControl.tsx

@@ -4,12 +4,18 @@ import { Col, Row, Form } from "react-bootstrap";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
-
+import { NotificationType } from "@licklist/core/dist/DataMapper/Notification/NotificationTypeDataMapper";
 import { SmsTemplateValues } from "../form";
 
 const MAX_SMS_LENGTH = 300;
 
-export const SmsTemplateControl = () => {
+type SmsTemplateControlProps = {
+  notificationTypes: NotificationType[];
+};
+
+export const SmsTemplateControl = ({
+  notificationTypes = [],
+}: SmsTemplateControlProps) => {
   const { t } = useTranslation(["Design"]);
   const {
     register,
@@ -20,9 +26,39 @@ export const SmsTemplateControl = () => {
   } = useFormContext<SmsTemplateValues>();
 
   const smsBody = watch("body");
+  const id = watch("id");
 
   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}
@@ -62,6 +98,8 @@ export const SmsTemplateControl = () => {
           <Form.Label>{t("Design:smsBody")}</Form.Label>
           <Form.Control
             isInvalid={Boolean(errors.body)}
+            as="textarea"
+            rows={3}
             {...register("body", {
               required: true,
               maxLength: MAX_SMS_LENGTH,