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

package/src/components/TemplateTypes/index.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+
+import { useNavigate } from 'react-router-dom';
+
+// UI Components
+import Typography from '../GenericUIBlocks/Typography';
+
+// images
+//@ts-ignore
+import Prebuilt from '../../assets/images/create-template/prebuilt.svg';
+//@ts-ignore
+import Scratch from '../../assets/images/create-template/scratch.svg';
+
+// styles
+import './styles.scss';
+
+const textStyles = {
+  fontSize: '20px',
+  fontWeight: '600',
+  color: '#000000',
+  marginBottom: '12px',
+  lineHeight: '24px',
+};
+
+const descriptionStyles = {
+  fontSize: '16px',
+  fontWeight: '400',
+  color: '#898989',
+  width: '100%',
+  maxWidth: '254px',
+  margin: '0 auto',
+  lineHeight: '20px',
+  textAlign: 'center' as const,
+};
+
+const buttonStyles = {
+  width: '100%',
+  maxWidth: '157px',
+  height: '50px',
+  borderRadius: '8px',
+  fontSize: '16px',
+  fontWeight: '600',
+};
+
+interface TemplateTypesProps {
+  onReturnAndNavigate?: () => void;
+  createTemplateRoute?: string | null;
+  selectedTemplateType?: string | null;
+  setSelectedTemplateType?: any;
+  setTemplateTypeSelected?: any;
+}
+
+const TemplateTypes: React.FC<TemplateTypesProps> = ({ selectedTemplateType, setSelectedTemplateType, createTemplateRoute, setTemplateTypeSelected, onReturnAndNavigate }) => {
+
+  const navigate = useNavigate();
+
+  const handleCardClick = (card: string) => {
+    setSelectedTemplateType(card);
+  };
+
+  return (
+    <div className="create-template-new">
+      <Typography style={textStyles}>Create New Template</Typography>
+      <div className="cards-container">
+        <div
+          className={`card ${selectedTemplateType === 'prebuilt' ? 'active' : ''}`}
+          onClick={() => handleCardClick('prebuilt')}
+        >
+          <img src={Prebuilt} alt="Prebuilt" />
+          <Typography style={textStyles}>Start From Prebuilt</Typography>
+          <Typography style={descriptionStyles}>
+            Browse a gallery of predesigned templates to customize
+          </Typography>
+        </div>
+        <div
+          className={`card ${selectedTemplateType === 'scratch' ? 'active' : ''}`}
+          onClick={() => handleCardClick('scratch')}
+        >
+          <img src={Scratch} alt="Scratch" />
+          <Typography style={textStyles}>Build from Scratch</Typography>
+          <Typography style={descriptionStyles}>
+            Choose a product type
+            <br />
+            and start with a blank canvas
+          </Typography>
+        </div>
+      </div>
+      <div className="buttons-container">
+        <button disabled={!selectedTemplateType} onClick={() => setTemplateTypeSelected(true)}>Next</button>
+        <button onClick={() => onReturnAndNavigate ? onReturnAndNavigate() : navigate(createTemplateRoute || '/create-template')}>Cancel</button>
+      </div>
+    </div>
+  );
+};
+
+export default TemplateTypes;

package/src/components/TemplateTypes/styles.scss

@@ -0,0 +1,91 @@
+.create-template-new{
+    margin: 0;
+    padding: 0 40px;
+    position: relative;
+    height: calc(100vh - 10px);
+    
+    .cards-container{
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 40px;
+        flex-wrap: wrap;
+
+        .card{
+            width: 450px;
+            height: 282px;
+            border-radius: 20px;
+            border: 0.5px solid #00000029;
+            background-color: var(--card-background-color);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            margin-top: 24px;
+
+            img{
+                margin-bottom: 16px;
+            }
+
+            &:hover, &.active {
+                border-color: var(--primary-color);
+                background-color: var(--primary-color-hover);
+            }
+        }
+    }
+    
+    .buttons-container{
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-end;
+        gap: 12px;
+        margin-top: 24px;
+        border-top: 0.5px solid var(--border-color);
+        padding: 24px 40px;
+
+        button{
+            width: 100%;
+            max-width: 157px;
+            height: 50px;
+            border-radius: 8px;
+            font-size: 16px;
+            font-weight: 600;
+            background-color: var(--primary-color);
+            color: var(--notification-text-color);
+            border: none;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            
+            &:disabled{
+                opacity: 0.5;
+                cursor: not-allowed;
+            }
+            
+            &:focus{
+                outline: none;
+            }
+
+            &:hover{
+                background-color: #DD5026;
+            }
+
+            &:last-child{
+                background-color: var(--secondary-color);
+                color: var(--text-color);
+                border: 0.5px solid var(--secondary-color);
+
+                &:hover{
+                    background-color: #fff;
+                    border: 0.5px solid #00000029;
+                }
+
+            }
+        }
+    }
+}

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

@@ -0,0 +1,81 @@
+import React from "react";
+
+// Utils
+import { MESSAGES } from "../../../utils/message";
+
+// Components
+import Dialog from '../../GenericUIBlocks/Dialog';
+import DialogV2 from '../../GenericUIBlocks/Dialog/V2';
+
+// images
+import ModalCross from '../../../assets/images/modal-icons/modal-cross';
+import ConfirmCloseIcon from '../../../assets/images/modal-icons/confirm-close-icon';
+
+// Styles
+import "./styles.scss";
+
+/**
+ * ConfirmNavigateDialog Component
+ * A modal for duplicating a template.
+ *
+ * @param {boolean} open - Boolean indicating whether the modal is open.
+ * @param {Function} handleClose - Function to handle the closing of the modal.
+ * @returns {JSX.Element} The duplicate template modal component.
+ *
+ */
+
+const cancelDialogStyles = {
+  maxWidth: '407px',
+  minHeight: '258px',
+};
+
+const cancelDialogStylesV2 = {
+  maxWidth: '567px',
+  minHeight: '303px',
+  padding: '40px',
+};
+
+// Define the props type
+interface ConfirmNavigateDialogProps {
+  open: boolean;
+  currentTheme?: string | null | undefined;
+  handleClose: () => void;
+  handleNavigateAction: () => void;
+}
+
+
+const ConfirmNavigateDialog: React.FC<ConfirmNavigateDialogProps> = ({ open, currentTheme, handleClose, handleNavigateAction }) => {
+  return (
+    currentTheme === 'v2' ?
+      <DialogV2
+        icon={<ConfirmCloseIcon fill='var(--primary-color)' />}
+        customStyles={cancelDialogStylesV2}
+        open={open}
+        handleClose={handleClose}
+        title='Confirm Cancel'
+        subHeading=''
+        description='Are you sure you want to cancel creating this template? All unsaved changes will be lost.'
+        onSubmit={handleNavigateAction}
+        onCancel={handleClose}
+        cancelText='No'
+        submitText='Yes'
+        isGallery={false}
+      /> :
+      <Dialog
+        icon={<ModalCross />}
+        customStyles={cancelDialogStyles}
+        open={open}
+        handleClose={handleClose}
+        title={MESSAGES.TEMPLATE.CANCEL.TITLE}
+        subHeading={MESSAGES.TEMPLATE.CANCEL.HEADING}
+        description={MESSAGES.TEMPLATE.CANCEL.PARAGRAPH}
+        onSubmit={handleNavigateAction}
+        onCancel={handleClose}
+        cancelText={MESSAGES.TEMPLATE.CANCEL.BACK_BUTTON}
+        submitText={MESSAGES.TEMPLATE.CANCEL.CANCEL_BUTTON}
+      />
+
+  );
+};
+
+export default ConfirmNavigateDialog;

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

@@ -0,0 +1,123 @@
+.confirmCancelTemplateLeaveModal {
+  .MuiPaper-root {
+    width: 100% !important;
+    max-width: 407px !important;
+    height: 100% !important;
+    max-height: 258px !important;
+    margin: 0 auto !important;
+    border-radius: 11px;
+    background: #fff8ee;
+  }
+
+  .confirmTemplateLeaveModalTitle {
+    color: #ed5c2f;
+    text-align: center;
+    font-size: 22px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+  }
+
+  .confirmTemplateLeaveModalContent {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 16px 16px 0px 16px !important;
+
+    .trashIconWrapper {
+      text-align: center;
+
+      p {
+        color: #ed5c2f;
+        text-align: center;
+        font-size: 22px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: normal;
+        margin-top: 12px;
+      }
+    }
+
+    .confirmTemplateLeaveText {
+      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: 13px;
+    gap: 11px;
+
+    button {
+      border-radius: 3px !important;
+      text-transform: capitalize;
+
+      &:first-child {
+        border: 0.5px solid rgba(48, 48, 48, 0.5);
+        background: #fff;
+        color: #000;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: normal;
+        min-width: 100px !important;
+        min-height: 40px !important;
+      }
+
+      &:last-child {
+        color: #fff;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: normal;
+        background: #ed5c2f;
+        max-width: 146px !important;
+        min-height: 40px !important;
+      }
+    }
+  }
+}

package/src/components/TopNavigation/DuplicateTemplateModal.tsx

@@ -0,0 +1,103 @@
+import React, { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { AppDispatch } from '../../redux/store';
+
+// Actions
+import { failure } from '../../redux/actions/snackbarActions';
+
+// Utils
+import { MESSAGES } from '../../utils/message';
+
+// UI Blocks
+import Dialog from '../GenericUIBlocks/Dialog';
+import Input from '../GenericUIBlocks/Input';
+
+interface DuplicateTemplateModalProps {
+  open: boolean;
+  value: string;
+  setIsDuplication: any;
+  onChange: (value: string) => void;
+  onCancel: () => void;
+  onDuplicateTemplate?: (payload: any) => Promise<any>;
+  title: string;
+  submitButtonText: string;
+  icon: React.ReactNode;
+  error: string;
+}
+
+const DuplicateTemplateModal: React.FC<DuplicateTemplateModalProps> = ({
+  open,
+  value,
+  setIsDuplication,
+  onChange,
+  onCancel,
+  onDuplicateTemplate,
+  title,
+  submitButtonText,
+  icon,
+  error,
+}) => {
+  if (!open) return null;
+
+  const saveDialogStyles = {
+    maxWidth: '480px',
+    minHeight: error ? '350px' : '329px',
+  };
+
+  const noteStyle = {
+    fontSize: '12px',
+    color: "#000",
+    fontWeight: '400',
+    marginTop: '7px',
+  }
+
+  const [loader, setLoader] = useState(false);
+
+  const dispatch: AppDispatch = useDispatch();
+
+  const duplicateTemplate = async () => {
+    try {
+      setLoader(true);
+      if (onDuplicateTemplate) {
+        setIsDuplication(true);
+        await onDuplicateTemplate(value);
+        onCancel();
+      }
+    } catch (error) {
+      dispatch(failure(MESSAGES.CLONE_ERROR));
+      return error;
+    } finally {
+      setLoader(false);
+    }
+  };
+
+  return (
+    <Dialog
+      icon={icon}
+      loading={loader}
+      open={open}
+      handleClose={onCancel}
+      title={title}
+      cancelText={MESSAGES.TEMPLATE.SAVE.CANCEL_BUTTON}
+      submitText={submitButtonText}
+      customStyles={saveDialogStyles}
+      onSubmit={duplicateTemplate}
+      onCancel={onCancel}
+      subHeading={MESSAGES.TEMPLATE.DUPLICATE_MODAL.SUB_HEADING}
+      children={
+        <div style={{ width: '100%' }}>
+          <Input
+            type="text"
+            placeholder={MESSAGES.TEMPLATE.DUPLICATE_MODAL.NAME_PLACEHOLDER}
+            value={value}
+            error={error}
+            onChange={(e) => onChange(e.target.value)}
+          />
+          <div style={noteStyle}>{MESSAGES.TEMPLATE.DUPLICATE_MODAL.NOTE}</div>
+        </div>
+      }
+    />
+  );
+};
+
+export default DuplicateTemplateModal;

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

@@ -0,0 +1,71 @@
+import React from 'react';
+
+// Utils
+import { MESSAGES } from '../../../utils/message';
+
+// UI Components
+import Dialog from '../../../components/GenericUIBlocks/Dialog';
+import Input from '../../../components/GenericUIBlocks/Input';
+
+// Styles
+import './styles.scss';
+
+
+/**
+ * EditTemplateNameModel Component
+ * A modal for duplicating a template.
+ *
+ * @param {boolean} open - Boolean indicating whether the modal is open.
+ * @param {Function} handleClose - Function to handle the closing of the modal.
+ * @returns {JSX.Element} The duplicate template modal component.
+ *
+ */
+
+interface EditTemplateNameModelProps {
+  open: boolean;
+  title: string,
+  setTemplateTitle: any,
+  handleEditName: any;
+  templateTitle: string,
+  handleClose: () => void;
+}
+
+const editDialogStyles = {
+  maxWidth: '630px',
+  minHeight: '210px',
+};
+
+const EditTemplateNameModel: React.FC<EditTemplateNameModelProps> = ({
+  open,
+  title,
+  templateTitle,
+  setTemplateTitle,
+  handleEditName,
+  handleClose,
+}) => {
+  return (
+    <Dialog
+      open={open}
+      loading={false}
+      handleClose={handleClose}
+      title="Edit Template Name"
+      cancelText={MESSAGES.TEMPLATE.SAVE.CANCEL_BUTTON}
+      submitText="Save"
+      customStyles={editDialogStyles}
+      onSubmit={handleEditName}
+      onCancel={handleClose}
+    >
+      <Input
+        variant="input"
+        type="text"
+        label="Template Name"
+        placeholder="Holidays"
+        value={templateTitle}
+        onChange={e => setTemplateTitle(e.target.value)}
+      />
+    </Dialog>
+  );
+};
+
+export default EditTemplateNameModel;
+

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

@@ -0,0 +1,88 @@
+.editTemplateNameModal {
+  .MuiPaper-root {
+    width: 100% !important;
+    max-width: 623px !important;
+    height: 100% !important;
+    max-height: 230px !important;
+    margin: 0 auto !important;
+    border-radius: 11px;
+    background: #fff8ee;
+  }
+
+  .editTemplateNameModalTitle {
+    color: #ed5c2f;
+    text-align: center;
+    font-size: 22px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+    padding: 16px 16px 0px !important;
+  }
+
+  .editTemplateNameModalContent {
+    padding: 0px 30px !important;
+
+    p {
+      color: #303030;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: normal;
+      margin: 10px 0px 10px 0px;
+    }
+
+    .MuiInputBase-root {
+      border-radius: 7px;
+      border: 0.5px solid #303030;
+      background: #fff;
+      width: 100%;
+      padding: 9.8px 22px;
+
+      &:focus,
+      &:focus-visible {
+        outline: none !important;
+      }
+
+      &::after,
+      &::before {
+        display: none !important;
+      }
+    }
+  }
+
+  .actionBtns {
+    justify-content: center;
+    align-items: center;
+    margin: 20px 0px;
+    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;
+      }
+    }
+  }
+}