@openlettermarketing/olc-react-sdk 2.1.4 → 2.1.5-beta.2

package/src/components/TopNavigation/SaveTemplateModel/index.tsx

@@ -0,0 +1,201 @@
+import React, { useMemo, useState, useEffect } from 'react';
+
+// Hooks
+import { useDispatch, useSelector } from 'react-redux';
+import { RootState } from '~/redux/reducers';
+import { AppDispatch } from '~/redux/store';
+
+// Actions
+import { SET_ROS_OFFER_PERCENTAGE } from '../../../redux/actions/action-types';
+import { failure } from '../../../redux/actions/snackbarActions';
+
+// Utils
+import { MESSAGES } from '../../../utils/message';
+import { getEnv, getIsSandbox, getPublicApiKey } from '../../../utils/helper';
+import { DEMO_PO_GENERATOR_URL, PROD_PO_GENERATOR_URL, STAGE_PO_GENERATOR_URL } from '../../../utils/constants';
+
+// Components
+import Dialog from '../../GenericUIBlocks/Dialog';
+import DialogV2 from '../../GenericUIBlocks/Dialog/V2';
+import Input from '../../GenericUIBlocks/Input';
+
+// Icons
+import Save from '../../../assets/images/modal-icons/save';
+
+// Styles
+import './styles.scss';
+
+
+/**
+ * Renders a modal dialog for deleting a template.
+ *
+ * @param {function} handleSave - Callback function to handle the save action.
+ * @param {function} handleClose - Callback function to handle the close action.
+ * @param {boolean} open - Boolean value indicating whether the modal is open or not.
+ * @returns {JSX.Element} The delete template modal component.
+ */
+
+const saveDialogStyles = {
+  maxWidth: '433px',
+  minHeight: '280px',
+};
+
+interface SaveTemplateModelProps {
+  open: boolean;
+  loading: boolean;
+  handleClose: () => void;
+  handleSave: () => void;
+  store: any; // StoreType if available
+  allowedAddOns?: any;
+  currentTheme?: string | null | undefined;
+}
+
+const SaveTemplateModel: React.FC<SaveTemplateModelProps> = ({
+  handleSave,
+  handleClose,
+  open,
+  loading,
+  store,
+  allowedAddOns,
+  currentTheme,
+}) => {
+  const [customRosInput, setCustomRosInput] = useState("");
+
+  const dispatch: AppDispatch = useDispatch();
+
+  const currentOfferPercentage = useSelector(
+    (state: RootState) => state.templates.offerPercentage
+  ) as string;
+
+  const propertyOfferGeneratorURL: string =
+    (getEnv() === 'local' || getEnv() === 'staging'
+      ? STAGE_PO_GENERATOR_URL
+      : getIsSandbox()
+        ? DEMO_PO_GENERATOR_URL
+        : PROD_PO_GENERATOR_URL) + `?apiKey=${getPublicApiKey()}`;
+
+  const enableCustomRos = allowedAddOns?.includes('custom_property_offer');
+
+  const rosFieldExists = useMemo(() => {
+    if (!enableCustomRos || !store?.pages) return false;
+    for (const page of store.pages) {
+      for (const el of page.children) {
+        if (el.text === '{{ROS.PROPERTY_OFFER}}' ) {
+          return true
+        }
+      }
+    }
+    return false;
+  }, [enableCustomRos, store]);
+
+  const handleCustomRosChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value;
+    if (val === "") {
+      setCustomRosInput("");
+      dispatch({ type: SET_ROS_OFFER_PERCENTAGE, payload: "" });
+      return;
+    }
+    const num = Number(val);
+    if (!isNaN(num) && num >= 1 && num <= 100) {
+      setCustomRosInput(val);
+      dispatch({ type: SET_ROS_OFFER_PERCENTAGE, payload: val });
+    } else {
+      dispatch(failure("Please enter a number between 1 and 100"));
+    }
+  };
+
+  useEffect(() => {
+    if (!enableCustomRos) return;
+    setCustomRosInput(currentOfferPercentage || "");
+  }, []);
+
+  // Custom content for the dialog
+  const customContent = (
+    enableCustomRos ? (
+      <div style={{ display: "flex", flexDirection: "column", gap: 0, marginBottom: 32 }}>
+        <div>
+          {MESSAGES.TEMPLATE.SAVE.PARAGRAPH}
+        </div>
+        <div style={{ marginTop: 10, marginBottom: 35}}>
+          <label style={{ fontWeight: 500, marginBottom: 4, display: "block", textAlign: 'center' }}>
+            Confirm Custom ROS Value
+          </label>
+          <div className='plain-text' style={{
+            textAlign: 'center',
+          }}>
+            <a href={propertyOfferGeneratorURL} target='_blank'
+            style={{
+              color: 'var(--primary-color)',
+            }}
+              onClick={(e) => {
+                e.stopPropagation()
+              }}
+            >
+              {MESSAGES.TEMPLATE.CUSTOM_ADD_ONS.PROPERTY_OFFER.CUSTOM.CLICK}
+            </a>{' '}
+            {MESSAGES.TEMPLATE.CUSTOM_ADD_ONS.PROPERTY_OFFER.CUSTOM.CSV_IMPORT}
+          </div>
+          <Input
+            type="number"
+            onlyNumber={true}
+            placeholder="Type in a Number between 1-100"
+            value={customRosInput}
+            onChange={handleCustomRosChange}
+          />
+        </div>
+      </div>
+    ) : null
+  );
+
+  // Custom submit handler with validation
+  const handleSubmit = () => {
+    if (enableCustomRos && rosFieldExists && !customRosInput) {
+      dispatch(failure("Please enter the offer percentage before saving the template"))
+      return;
+    }
+    handleSave();
+  };
+
+  return (
+    currentTheme === 'v2' ?
+      <DialogV2
+        icon={<Save fill="var(--primary-color)" />}
+        open={open}
+        loading={loading}
+        handleClose={handleClose}
+        title={MESSAGES.TEMPLATE.SAVE.TITLE}
+        subHeading={MESSAGES.TEMPLATE.SAVE.HEADING}
+        // Show custom content if rosCustomValue exists, else default description
+        description={enableCustomRos && rosFieldExists ? undefined : MESSAGES.TEMPLATE.SAVE.PARAGRAPH}
+        cancelText={MESSAGES.TEMPLATE.SAVE.CANCEL_BUTTON}
+        submitText={MESSAGES.TEMPLATE.SAVE.SUBMIT_BUTTON}
+        customStyles={{...saveDialogStyles, padding: '40px', maxWidth: enableCustomRos && rosFieldExists ? '620px' : '550px'}}
+        onSubmit={handleSubmit}
+        onCancel={handleClose}
+        currentTheme="v2"
+        isGallery={false}
+      >
+        {enableCustomRos && rosFieldExists && customContent}
+      </DialogV2>
+      :
+      <Dialog
+        icon={<Save fill="var(--primary-color)" />}
+        open={open}
+        loading={loading}
+        handleClose={handleClose}
+        title={MESSAGES.TEMPLATE.SAVE.TITLE}
+        subHeading={MESSAGES.TEMPLATE.SAVE.HEADING}
+        // Show custom content if rosCustomValue exists, else default description
+        description={enableCustomRos && rosFieldExists ? undefined : MESSAGES.TEMPLATE.SAVE.PARAGRAPH}
+        cancelText={MESSAGES.TEMPLATE.SAVE.CANCEL_BUTTON}
+        submitText={MESSAGES.TEMPLATE.SAVE.SUBMIT_BUTTON}
+        customStyles={{...saveDialogStyles, maxWidth: enableCustomRos && rosFieldExists ? '620px' : '433px'}}
+        onSubmit={handleSubmit}
+        onCancel={handleClose}
+      >
+        {enableCustomRos && rosFieldExists && customContent}
+      </Dialog>
+  );
+};
+
+export default SaveTemplateModel;

package/src/components/TopNavigation/SaveTemplateModel/styles.scss

@@ -0,0 +1,128 @@
+.confirmTemplateSaveModal {
+  .MuiPaper-root {
+    width: 100% !important;
+    max-width: 433px !important;
+    height: 100% !important;
+    max-height: 290px !important;
+    margin: 0 auto !important;
+    border-radius: 11px;
+    background: #fff8ee;
+  }
+
+  .confirmTemplateSaveModalTitle {
+    color: #ed5c2f;
+    text-align: center;
+    font-size: 22px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+  }
+
+  .confirmTemplateSaveModalContent {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    padding: 16px 16px 0px;
+
+    .trashIconWrapper {
+      text-align: center;
+
+      p {
+        color: #ed5c2f;
+        text-align: center;
+        font-size: 22px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: normal;
+        margin-top: 10px;
+      }
+    }
+
+    .confirmTemplateSaveText {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      gap: 10px;
+
+      p {
+        color: #000;
+        text-align: center;
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: normal;
+
+        &:last-child {
+          color: #000;
+          text-align: center;
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 16px;
+          /* 114.286% */
+          letter-spacing: 0.28px;
+          margin: 0;
+        }
+      }
+    }
+
+    .MuiInputBase-root {
+      border-radius: 7px;
+      border: 0.5px solid #303030;
+      background: #fff;
+      width: 100%;
+      padding: 10px 22px;
+
+      &:focus,
+      &:focus-visible {
+        outline: none !important;
+      }
+
+      &::after,
+      &::before {
+        display: none !important;
+      }
+    }
+  }
+
+  .actionBtns {
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 10px;
+    gap: 20px;
+
+    button {
+      border-radius: 5px;
+      text-transform: capitalize;
+      width: 100%;
+      max-width: 107px;
+      height: 100%;
+      min-height: 41px;
+
+      &:first-child {
+        border: 0.5px solid rgba(48, 48, 48, 0.5);
+        background: #fff;
+        color: #000;
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: normal;
+      }
+
+      &:last-child {
+        color: #fff;
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: normal;
+        background: #ed5c2f;
+        margin: 0;
+      }
+
+      &:disabled {
+        opacity: 0.5;
+      }
+    }
+  }
+}