@openlettermarketing/olc-react-sdk 2.1.6 → 2.1.8

package/src/components/TemplateTypes/index.tsx

@@ -1,96 +0,0 @@
-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

@@ -1,91 +0,0 @@
-.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

@@ -1,81 +0,0 @@
-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

@@ -1,123 +0,0 @@
-.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

@@ -1,103 +0,0 @@
-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

@@ -1,71 +0,0 @@
-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

@@ -1,88 +0,0 @@
-.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;
-      }
-    }
-  }
-}