@openlettermarketing/olc-react-sdk 2.1.7 → 2.1.8

package/src/components/TopNavigation/index.tsx

@@ -1,938 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-// Hooks
-import { useDispatch, useSelector } from 'react-redux';
-import { useNavigate, useParams } from 'react-router-dom';
-import { AppDispatch, RootState } from '../../redux/store';
-
-// Actions
-import {
-  clearTemplateFields,
-  loadFormDataToStore,
-  downloadProof,
-  envelopeProof,
-  setPageCount,
-} from '../../redux/actions/templateActions';
-import { failure, success } from '../../redux/actions/snackbarActions';
-import { searchAndAdvanceChange } from '../../redux/actions/templateActions';
-
-// Components
-import SaveTemplateModel from './SaveTemplateModel';
-import ConfirmNavigateDialog from './ConfirmNavigateDialog';
-import EditTemplateNameModel from './EditTemplateNameModel';
-
-// Utils
-import {
-  changeColorOfBoxesForSnapPack,
-  downloadPDF,
-  extractFontFamilies,
-  isValidQR,
-  multiPageTemplates,
-  removeBracketsFromRPL,
-  validateEmoji,
-  validateGSV,
-} from '../../utils/template-builder';
-import { addSafetyBordersToNonWindowProfessioanl } from '../../utils/templateSafetyBorders/professional';
-import { addIdentifierAreaToProfessionalNonWindow } from '../../utils/templateIdentifierArea/professional';
-import { getItem, setItem } from '../../utils/local-storage';
-import { MESSAGES } from '../../utils/message';
-// @ts-ignore
-import fonts from '../../utils/fonts.json';
-
-// UI Components
-import Typography from '../GenericUIBlocks/Typography';
-import Button from '../GenericUIBlocks/Button';
-import CircularProgress from '../GenericUIBlocks/CircularProgress';
-import { GridContainer, GridItem } from '../GenericUIBlocks/Grid';
-import DuplicateTemplateModal from './DuplicateTemplateModal';
-import GeneralTooltip from '../GenericUIBlocks/GeneralTooltip';
-
-// Icons
-// @ts-ignore
-import EditIcon from '../../assets/images/templates/edit-pencil-icon.tsx';
-// @ts-ignore
-import DownloadIcon from '../../assets/images/modal-icons/order-download.tsx';
-// @ts-ignore
-import EnvelopeIcon from '../../assets/images/modal-icons/envelope-icon.tsx';
-// @ts-ignore
-import CloneIcon from '../../assets/images/modal-icons/template-copy.tsx';
-// @ts-ignore
-import AddIcon from '../../assets/images/modal-icons/add.tsx';
-// @ts-ignore
-import DeleteIcon from '../../assets/images/modal-icons/del.tsx';
-// @ts-ignore
-import DownloadIconV2 from '../../assets/images/templates/download-v2.svg';
-// @ts-ignore
-import CheckIconV2 from '../../assets/images/templates/check.svg';
-// @ts-ignore
-import EditIconV2 from '../../assets/images/templates/x.svg';
-// @ts-ignore
-import PencilIcon from '../../assets/images/templates/pencil.svg';
-
-// Styles
-import './styles.scss';
-
-/**
- * Represents the top navigation bar of a template builder application.
- * Handles saving and navigation logic, as well as displaying a confirmation dialog for unsaved changes.
- *
- * @param {Object} props - The component props.
- * @param {Object} props.store - The store object used for saving the template.
- * @param {boolean} props.isStoreUpdated - Indicates whether the store has been updated.
- * @returns {JSX.Element} The top navigation bar component.
- */
-
-const buttonStyles: React.CSSProperties = {
-  maxWidth: '120px',
-  minHeight: '40px',
-  backgroundColor: '#fff',
-  color: 'var(--text-color)',
-  border: '0.5px solid var(--border-color)',
-  fontSize: '15px',
-  fontWeight: '500',
-};
-
-const progressStyles: React.CSSProperties = {
-  width: '20px',
-  height: '20px',
-  border: '2px solid var(--primary-color)',
-};
-
-interface TopNavigationProps {
-  store: any;
-  createTemplateRoute?: string | null;
-  isStoreUpdated: boolean;
-  setIsDuplication: any;
-  olcTemplate?: Record<string, any>;
-  designerTemplateQuery?: Record<string, any> | null;
-  allowedAddOns?: any;
-  allowAdditionalPage?: boolean;
-  currentTheme?: string | null | undefined;
-  onDuplicateTemplate?: (payload: any) => Promise<any>;
-  onReturnAndNavigate?: () => void;
-  onSubmit?: (payload: any) => Promise<any>;
-}
-
-const TopNavigation: React.FC<TopNavigationProps> = ({
-  store,
-  createTemplateRoute,
-  isStoreUpdated,
-  setIsDuplication,
-  olcTemplate,
-  designerTemplateQuery,
-  allowedAddOns,
-  allowAdditionalPage,
-  currentTheme,
-  onDuplicateTemplate,
-  onReturnAndNavigate,
-  onSubmit,
-}) => {
-  const [showNavigateDialog, setShowNavigateDialog] = useState<boolean>(false);
-  const [isShowModel, setIsShowModel] = useState<{
-    open: boolean;
-    model: string;
-    loading: boolean;
-    inputValue?: string;
-  }>({
-    open: false,
-    model: '',
-    loading: false,
-    inputValue: '',
-  });
-  const [downloadingProof, setDownloaingProof] = useState<boolean>(false);
-  const [downloadingEnvelope, setDownloaingEnvelope] = useState<boolean>(false);
-  const [templateTitle, setTemplateTitle] = useState('');
-
-  const { id } = useParams<{ id: string }>();
-
-  const dispatch: AppDispatch = useDispatch();
-  const navigate = useNavigate();
-
-  const title = useSelector((state: RootState) => state.templates.title) || '';
-
-  
-  const product = useSelector(
-    (state: RootState) => state.templates.product
-  ) as Record<string, any>;
-  const pageCount = useSelector(
-    (state: RootState) => state.templates.pageCount
-  );
-
-  const dynamicFields = useSelector(
-    (state: RootState) => state.templates.dynamicFields
-  );
-  const defaultFields = useSelector(
-    (state: RootState) => state.templates.defaultDynamicFields
-  );
-
-  const defaultSenderFields = useSelector(
-    (state: RootState) => state.templates.defaultSenderFields
-  );
-
-  const customFields = useSelector(
-    (state: RootState) => state.customFields.customFields
-  );
-
-  const customFieldsV2 = useSelector(
-    (state: RootState) => state.customFields.customFieldsV2
-  ) as Record<string, any>;
-
-  const defaultPropertyFields = useSelector(
-    (state: RootState) => state.templates.defaultPropertyFields
-  );
-
-  const templateType = useSelector(
-    (state: RootState) => state.templates.templateType
-  );
-  const envelopeType = useSelector(
-    (state: RootState) => state.templates.envelopeType
-  );
-
-  const rosOfferPercentage = useSelector(
-    (state: RootState) => state.templates.offerPercentage
-  );
-
-  const defaultMiscFields = useSelector(
-    (state: RootState) => state.templates.defaultMiscFields
-  );
-
-  useEffect(() => {
-    setTemplateTitle(title);
-  }, [title]);
-
-  useEffect(() => {
-    if (!id) {
-      const formData = getItem('formData');
-      if (formData && !title) {
-        dispatch(loadFormDataToStore(formData));
-      } else {
-        handleSaveFormData();
-      }
-    }
-  }, [title]);
-
-  // Update page count when store pages change
-  useEffect(() => {
-    if (store && store.pages) {
-      dispatch(setPageCount(store.pages.length));
-    }
-  }, [store?.pages?.length]);
-
-  const handleSaveFormData = () => {
-    const data = { title, product, templateType, envelopeType };
-    setItem('formData', JSON.stringify(data));
-  };
-
-  const handleBackPress = () => {
-    if (isStoreUpdated) {
-      setShowNavigateDialog(!showNavigateDialog);
-    } else {
-      handleNavigation(createTemplateRoute || '/create-template');
-    }
-  };
-
-  const closeDuplicateModal = () => {
-    setIsShowModel((prev) => ({
-      ...prev,
-      open: false,
-      model: '',
-      inputValue: '',
-    }));
-  };
-
-  const handleNavigation = async (route = '/') => {
-    handleClearFilters();
-    if (
-      templateType === 'json' &&
-      product?.productType !== 'Real Penned Letter'
-    ) {
-      await store.history.clear();
-    }
-    onReturnAndNavigate ? onReturnAndNavigate() : navigate(route);
-  };
-
-  const handleClearFilters = () => dispatch(clearTemplateFields());
-
-  const isProfessionalLetterNonWindow = () => {
-    return (
-      product?.id === '4' &&
-      product?.productType === 'Professional Letters' &&
-      (product?.windowed === false || product.isWindowedEnvelope === false)
-    );
-  };
-
-  // Add a new page
-  const handleAddPage = () => {
-    if (store && store.pages.length < 2) {
-      store.addPage();
-      addSafetyBordersToNonWindowProfessioanl(store, 1);
-      addIdentifierAreaToProfessionalNonWindow(store, 1);
-      dispatch(setPageCount(store.pages.length));
-    }
-  };
-
-  // Delete the second page
-  const handleDeletePage = () => {
-    if (store && store.pages.length > 1) {
-      const pageToDelete = store.pages[1];
-      store.deletePages([pageToDelete.id]);
-      dispatch(setPageCount(store.pages.length));
-    }
-  };
-
-  // Handle the duplication of the template
-  const handleEditName = async () => {
-    let errorText = '';
-    if (!templateTitle) {
-      errorText = MESSAGES.TEMPLATE.NAME_REQUIRED;
-    } else if (templateTitle.length > 50) {
-      errorText = MESSAGES.TEMPLATE.NAME_LESS_50;
-    }
-    if (errorText) {
-      dispatch(failure(errorText));
-      return;
-    }
-    dispatch(searchAndAdvanceChange('title', templateTitle.trim()));
-    handleChangeModel()
-  };
-
-  const handleViewProofWithLamda = async () => {
-    try {
-      setDownloaingProof(true);
-      let flattenedFieldsV2 = [];
-      if (customFieldsV2.length > 0) {
-        flattenedFieldsV2 = customFieldsV2?.flatMap(
-          (section: { fields: any }) => section.fields
-        );
-      }
-      const fields = [
-        ...defaultFields,
-        ...customFields,
-        ...flattenedFieldsV2,
-        ...Object.values(dynamicFields),
-        ...defaultSenderFields,
-        ...defaultPropertyFields,
-        ...defaultMiscFields,
-        {
-          value: '{{ROS.PROPERTY_OFFER}}',
-          key: '{{ROS.PROPERTY_OFFER}}',
-          defaultValue: '$123,456.00',
-        },
-      ];
-      let json = store.toJSON();
-      const jsonSize = new Blob([JSON.stringify(json)]).size;
-      if (jsonSize > 5242880) {
-        dispatch(failure(MESSAGES.TEMPLATE.SIZE_LIMIT_EXCEED));
-        return;
-      }
-      if (product?.productType === 'Real Penned Letter' && +product.id === 16) {
-        const removedUnsupportedBrackets = removeBracketsFromRPL(json);
-        json = removedUnsupportedBrackets;
-        let clonedJson = JSON.stringify(json)
-          .replace(/\(\(/g, '{{')
-          .replace(/\)\)/g, '}}');
-        json = JSON.parse(clonedJson);
-      }
-      if (product.productType === 'Snap Pack Mailers') {
-        const updatedBoxes = changeColorOfBoxesForSnapPack(json);
-        json = updatedBoxes;
-      }
-      let jsonString = JSON.stringify(json);
-      fields.forEach(({ key, defaultValue, value }) => {
-        const regex = new RegExp(key, 'g');
-        jsonString = jsonString.replace(regex, defaultValue || value);
-      });
-      const jsonWithDummyData = JSON.parse(jsonString);
-      const response: any = await downloadProof({
-        json: jsonWithDummyData,
-      });
-      if (response.status === 200) {
-        const binaryData = atob(response.data.data.base64);
-        // Create a Uint8Array from the binary data
-        const uint8Array = new Uint8Array(binaryData.length);
-        for (let i = 0; i < binaryData.length; i++) {
-          uint8Array[i] = binaryData.charCodeAt(i);
-        }
-
-        // Create a Blob from the Uint8Array
-        const blob = new Blob([uint8Array], { type: 'application/pdf' });
-
-        // Create an Object URL for the Blob
-        const url = URL.createObjectURL(blob);
-        downloadPDF(title.substring(0, 20), url);
-        dispatch(success('Mailer Proof generated successfully'));
-      } else {
-        dispatch(
-          failure(
-            response?.data?.message ||
-            response?.message ||
-            MESSAGES.DOWNLOAD_ERROR
-          )
-        );
-      }
-    } catch (error: any) {
-      dispatch(
-        failure(
-          error?.response?.data?.message ||
-          error?.message ||
-          'Error while downloading proof'
-        )
-      );
-    } finally {
-      setDownloaingProof(false);
-    }
-  };
-
-  const handleEnvelopeProof = async () => {
-    try {
-      setDownloaingEnvelope(true);
-      const response: any = await envelopeProof({
-        productId: product.id,
-      });
-      if (response.status === 200) {
-        const binaryData = atob(response.data.data.base64);
-        // Create a Uint8Array from the binary data
-        const uint8Array = new Uint8Array(binaryData.length);
-        for (let i = 0; i < binaryData.length; i++) {
-          uint8Array[i] = binaryData.charCodeAt(i);
-        }
-
-        // Create a Blob from the Uint8Array
-        const blob = new Blob([uint8Array], { type: 'application/pdf' });
-
-        // Create an Object URL for the Blob
-        const url = URL.createObjectURL(blob);
-        downloadPDF(title.substring(0, 20), url);
-        dispatch(success('Download Envelope Proof generated successfully'));
-      } else {
-        dispatch(
-          failure(
-            response?.data?.message ||
-            response?.message ||
-            MESSAGES.DOWNLOAD_ERROR
-          )
-        );
-      }
-    } catch (error: any) {
-      dispatch(
-        failure(
-          error?.response?.data?.message ||
-          error?.message ||
-          'Error while downloading envelope proof'
-        )
-      );
-    } finally {
-      setDownloaingEnvelope(false);
-    }
-  };
-
-  const handleSave = async () => {
-    try {
-      const formData = new FormData();
-      const allFields = [
-        ...defaultFields,
-        ...customFields,
-        ...Object.values(dynamicFields),
-        ...defaultSenderFields,
-        ...defaultPropertyFields,
-        ...defaultMiscFields,
-      ];
-      let selectedFields: any = [];
-      if (templateType === 'json') {
-        let jsonData = store.toJSON();
-
-        const jsonSize = new Blob([JSON.stringify(jsonData)]).size;
-        if (jsonSize > 5242880) {
-          dispatch(failure(MESSAGES.TEMPLATE.SIZE_LIMIT_EXCEED));
-          return;
-        }
-
-        const hasEmoji = validateEmoji(jsonData.pages);
-
-        if (hasEmoji) {
-          dispatch(failure(MESSAGES.TEMPLATE.EMOJI_NOT_ALLOWED));
-          return;
-        }
-
-        if (
-          product?.productType === 'Real Penned Letter' &&
-          +product.id === 16
-        ) {
-          const removedUnsupportedBrackets = removeBracketsFromRPL(jsonData);
-          jsonData = removedUnsupportedBrackets;
-          let clonedJson = JSON.stringify(jsonData)
-            .replace(/\(\(/g, '{{')
-            .replace(/\)\)/g, '}}');
-          jsonData = JSON.parse(clonedJson);
-          await store.loadJSON(jsonData);
-        }
-
-        if (product.productType === 'Snap Pack Mailers') {
-          const updatedBoxes = changeColorOfBoxesForSnapPack(jsonData);
-          jsonData = updatedBoxes;
-        }
-
-        // get all fonts family from json
-        const fontFamilies = extractFontFamilies(jsonData?.pages);
-
-        // extract custom fonts and remove google fonts from that array
-        const customFonts = fontFamilies.filter(
-          (item: any) => !fonts.includes(item)
-        );
-
-        const availableBase64inJson = jsonData?.fonts?.map(
-          (font: any) => font?.fontFamily
-        );
-
-        const unAvailableFonts = customFonts.filter(
-          (item: any) => !availableBase64inJson?.includes(item)
-        );
-
-        if (unAvailableFonts?.length) {
-          dispatch(
-            failure(
-              `Please upload ${unAvailableFonts[0]} font in My Fonts section.`
-            )
-          );
-          return;
-        }
-
-        const isGsvValid = validateGSV(jsonData.pages);
-
-        if (!isGsvValid) {
-          dispatch(failure(MESSAGES.TEMPLATE.GSV_RESTRICT_ONE_PER_PAGE));
-          return;
-        }
-
-        const hasEmptyQR = !isValidQR(jsonData.pages);
-
-        if (hasEmptyQR) {
-          dispatch(failure(MESSAGES.TEMPLATE.EMPTY_QR_NOT_ALLOWED));
-          return;
-        }
-
-        setIsShowModel((prev) => ({ ...prev, loading: true }));
-
-        const blob = await store.toBlob();
-
-        if (multiPageTemplates.includes(product.productType)) {
-          const backJsonData = { ...jsonData, pages: [jsonData.pages[1]] };
-          await store.loadJSON(backJsonData);
-          await store.waitLoading();
-          const backBlob = await store.toBlob();
-          formData.append('backThumbnail', backBlob, 'backLogo.png');
-          store.loadJSON(jsonData);
-        }
-
-        const jsonString = JSON.stringify(jsonData);
-        const blobData = new Blob([jsonString], { type: 'application/json' });
-        formData.append('json', blobData, 'template.json');
-        formData.append('thumbnail', blob, 'logo.png');
-        selectedFields = allFields.filter((field) =>
-          jsonString.includes(field.key)
-        );
-        if (
-          (jsonString.includes('ros_') ||
-            jsonString.includes('{{ROS.PROPERTY_OFFER}}')) &&
-          rosOfferPercentage != null
-        ) {
-          formData.append('rosOfferPercentage', rosOfferPercentage);
-        }
-      }
-
-      const additionalInfo = {
-        hasAdditionalPage: pageCount > 1 && +product?.id === 4 ? true : false,
-      };
-
-      formData.append('additionalInfo', JSON.stringify(additionalInfo));
-      formData.append('title', title);
-      formData.append('productId', product?.id);
-      selectedFields.length
-        ? formData.append('fields', JSON.stringify(selectedFields))
-        : undefined;
-      envelopeType.length
-        ? formData.append('envelopeType', envelopeType)
-        : undefined;
-
-      if (onSubmit) {
-        const saveTemplate = await onSubmit(formData);
-        if (saveTemplate) {
-          // dispatch(success(olcTemplate ? 'Template Updated Successfully' : 'Template Created Successfully'));
-          handleNavigation();
-        }
-      } else {
-        dispatch(
-          failure('Please add onSubmit handler via Props to save template')
-        );
-      }
-    } catch (error) {
-      return error;
-    } finally {
-      setIsShowModel((prev) => ({ ...prev, loading: false }));
-    }
-  };
-
-  const handleChangeModel = (
-    model: string = '',
-    loading: string | null = null
-  ) => {
-    setIsShowModel((prev) => ({
-      ...prev,
-      open: !prev.open,
-      loading: loading === 'false' ? false : prev.loading,
-      model,
-    }));
-  };
-
-  return (
-    <>
-      {currentTheme === 'v2' ? (
-        <div className="v2-top-navigation-container">
-          <GridContainer style={{ alignItems: 'center' }}>
-            <GridItem lg={4} md={4} sm={12} xs={12}>
-              <Typography className="create-template-title">
-                Create a Template
-              </Typography>
-            </GridItem>
-            <GridItem lg={4} md={3} sm={12} xs={12}>
-              <div className="middle-v2">
-                {isShowModel.open && isShowModel.model === 'edit-name-modal'  ? (
-                  <div className="input-container">
-                    <input
-                      type="text"
-                      value={templateTitle}
-                      onChange={(e) => setTemplateTitle(e.target.value)}
-                    />
-                    <div className="icon-v2-container">
-                      <img className="icon-v2" src={CheckIconV2} alt="check" onClick={() => {
-                        handleEditName();
-                      }} />
-                      <img
-                        src={EditIconV2}
-                        alt="edit"
-                        onClick={() => {
-                          setTemplateTitle(title),
-                          setIsShowModel((prev) => ({ ...prev, model:'', open: false }));
-                        }}
-                      />
-                    </div>
-                  </div>
-                ) : (
-                  <Typography>{title}</Typography>
-                )}
-                {isShowModel.model !== 'edit-name-modal' && (
-                  <img
-                    className="pencil-icon"
-                    src={PencilIcon}
-                    alt="pencil"
-                    onClick={() => {
-                      setIsShowModel((prev) => ({ ...prev, model:'edit-name-modal', open: true }));
-                    }}
-                  />
-                )}
-              </div>
-            </GridItem>
-            <GridItem lg={4} md={5} sm={12} xs={12}>
-              <div className="actionsBtnWrapper right">
-                {/* Page Management Controls - Only for Professional Letter Non-Window */}
-                {isProfessionalLetterNonWindow() && allowAdditionalPage && (
-                  <>
-                    {pageCount === 1 && (
-                      <div
-                        className="add-page"
-                        onClick={handleAddPage}
-                        title="Add Page"
-                      >
-                        <AddIcon />
-                      </div>
-                    )}
-                    {pageCount === 2 && (
-                      <div
-                        className="delete-page"
-                        onClick={handleDeletePage}
-                        title="Delete Page"
-                      >
-                        <DeleteIcon className="delete-icon" />
-                      </div>
-                    )}
-                  </>
-                )}
-                {olcTemplate &&
-                  !designerTemplateQuery &&
-                  onDuplicateTemplate && (
-                    <div
-                      className="clone"
-                      onClick={() =>
-                        setIsShowModel((prev) => ({
-                          ...prev,
-                          open: true,
-                          model: 'duplicate',
-                          inputValue: '',
-                        }))
-                      }
-                    >
-                      <CloneIcon fill="#545454" />
-                    </div>
-                  )}
-                <GeneralTooltip
-                  title={MESSAGES.TEMPLATE.DUPLICATE_MODAL.TITLE}
-                  place="bottom"
-                  anchorSelect=".clone"
-                />
-                <GeneralTooltip
-                  title="Add Page"
-                  place="bottom"
-                  anchorSelect=".add-page"
-                />
-                <GeneralTooltip
-                  title="Delete Page"
-                  place="bottom"
-                  anchorSelect=".delete-page"
-                />
-                {/* {product?.hasEnvelope && (
-              <>
-                <div
-                  className="download-envelope"
-                  onClick={handleEnvelopeProof}
-                >
-                  {downloadingEnvelope ? (
-                    <CircularProgress style={progressStyles} />
-                  ) : (
-                    <EnvelopeIcon />
-                  )}
-                </div>
-                <GeneralTooltip
-                  title={MESSAGES.TEMPLATE.DOWNLOAD_ENVELOPE_BUTTON}
-                  place="bottom"
-                  anchorSelect=".download-envelope"
-                />
-              </>
-            )} */}
-                <div className="download" onClick={handleViewProofWithLamda}>
-                  {downloadingProof ? (
-                    <CircularProgress style={progressStyles} />
-                  ) : (
-                    <img src={DownloadIconV2} alt="download" />
-                  )}
-                </div>
-                <GeneralTooltip
-                  title={MESSAGES.TEMPLATE.DOWNLOAD_PROOF_BUTTON}
-                  place="bottom"
-                  anchorSelect=".download"
-                />
-                <Button
-                  style={{
-                    ...buttonStyles,
-                    border: 'none',
-                    backgroundColor: 'var(--primary-color)',
-                    color: '#fff',
-                    fontSize: '14px',
-                    fontWeight: '600',
-                    borderRadius: '4px',
-                    maxWidth: '140px',
-                    height: '44px',
-                  }}
-                  onClick={() => handleChangeModel('save')}
-                >
-                  {MESSAGES.TEMPLATE.SUBMIT_BUTTON}
-                </Button>
-                <Button
-                  style={{
-                    ...buttonStyles,
-                    border: '0.5px solid #0000003D',
-                    color: 'var(--text-color)',
-                    fontSize: '14px',
-                    fontWeight: '600',
-                    borderRadius: '4px',
-                    maxWidth: '141px',
-                    height: '45px',
-                  }}
-                  onClick={() => handleBackPress()}
-                >
-                  {MESSAGES.TEMPLATE.CANCEL_BUTTON}
-                </Button>
-              </div>
-            </GridItem>
-          </GridContainer>
-        </div>
-      ) : (
-        <div className="top-navigation-container">
-          <GridContainer style={{ alignItems: 'center' }}>
-            <GridItem lg={4} md={4} sm={0} xs={0}></GridItem>
-            <GridItem lg={3} md={2} sm={2} xs={12}>
-              <div className="middle">
-                <Typography>{title}</Typography>
-                <div onClick={() => handleChangeModel('edit')}>
-                  <EditIcon fill="var(--text-color)" />
-                </div>
-              </div>
-            </GridItem>
-            <GridItem lg={5} md={6} sm={9} xs={12}>
-              <div className="actionsBtnWrapper right">
-                {/* Page Management Controls - Only for Professional Letter Non-Window */}
-                {isProfessionalLetterNonWindow() && allowAdditionalPage && (
-                  <>
-                    {pageCount === 1 && (
-                      <div
-                        className="add-page"
-                        onClick={handleAddPage}
-                        title="Add Page"
-                      >
-                        <AddIcon />
-                      </div>
-                    )}
-                    {pageCount === 2 && (
-                      <div
-                        className="delete-page"
-                        onClick={handleDeletePage}
-                        title="Delete Page"
-                      >
-                        <DeleteIcon className="delete-icon" />
-                      </div>
-                    )}
-                  </>
-                )}
-                {olcTemplate &&
-                  !designerTemplateQuery &&
-                  onDuplicateTemplate && (
-                    <div
-                      className="clone"
-                      onClick={() =>
-                        setIsShowModel((prev) => ({
-                          ...prev,
-                          open: true,
-                          model: 'duplicate',
-                          inputValue: '',
-                        }))
-                      }
-                    >
-                      <CloneIcon fill="#545454" />
-                    </div>
-                  )}
-                <GeneralTooltip
-                  title={MESSAGES.TEMPLATE.DUPLICATE_MODAL.TITLE}
-                  place="bottom"
-                  anchorSelect=".clone"
-                />
-                <GeneralTooltip
-                  title="Add Page"
-                  place="bottom"
-                  anchorSelect=".add-page"
-                />
-                <GeneralTooltip
-                  title="Delete Page"
-                  place="bottom"
-                  anchorSelect=".delete-page"
-                />
-                {/* {product?.hasEnvelope && (
-              <>
-                <div
-                  className="download-envelope"
-                  onClick={handleEnvelopeProof}
-                >
-                  {downloadingEnvelope ? (
-                    <CircularProgress style={progressStyles} />
-                  ) : (
-                    <EnvelopeIcon />
-                  )}
-                </div>
-                <GeneralTooltip
-                  title={MESSAGES.TEMPLATE.DOWNLOAD_ENVELOPE_BUTTON}
-                  place="bottom"
-                  anchorSelect=".download-envelope"
-                />
-              </>
-            )} */}
-                <div className="download" onClick={handleViewProofWithLamda}>
-                  {downloadingProof ? (
-                    <CircularProgress style={progressStyles} />
-                  ) : (
-                    <DownloadIcon />
-                  )}
-                </div>
-                <GeneralTooltip
-                  title={MESSAGES.TEMPLATE.DOWNLOAD_PROOF_BUTTON}
-                  place="bottom"
-                  anchorSelect=".download"
-                />
-                <Button
-                  style={{
-                    ...buttonStyles,
-                    border: '0.5px solid var(--primary-color)',
-                    color: 'var(--primary-color)',
-                  }}
-                  onClick={() => handleBackPress()}
-                >
-                  {MESSAGES.TEMPLATE.CANCEL_BUTTON}
-                </Button>
-                <Button
-                  style={{
-                    ...buttonStyles,
-                    border: 'none',
-                    backgroundColor: 'var(--primary-color)',
-                    color: '#fff',
-                  }}
-                  onClick={() => handleChangeModel('save')}
-                >
-                  {MESSAGES.TEMPLATE.SUBMIT_BUTTON}
-                </Button>
-              </div>
-            </GridItem>
-          </GridContainer>
-        </div>
-      )}
-
-      {showNavigateDialog && (
-        <ConfirmNavigateDialog
-          open={showNavigateDialog}
-          handleClose={() => setShowNavigateDialog(false)}
-          handleNavigateAction={() =>
-            handleNavigation(createTemplateRoute || '/create-template')
-          }
-          currentTheme={currentTheme}
-        />
-      )}
-      {isShowModel?.open && isShowModel?.model === 'edit' && (
-        <EditTemplateNameModel
-          open={isShowModel?.open}
-          title={title}
-          templateTitle={templateTitle}
-          setTemplateTitle={setTemplateTitle}
-          handleEditName={handleEditName}
-          handleClose={() => handleChangeModel()}
-        />
-      )}
-      {isShowModel.open && isShowModel.model === 'save' && (
-        <SaveTemplateModel
-          loading={isShowModel.loading}
-          open={isShowModel.open}
-          handleClose={() => handleChangeModel()}
-          handleSave={handleSave}
-          store={store}
-          allowedAddOns={allowedAddOns}
-          currentTheme={currentTheme}
-        />
-      )}
-      {/* Duplicate Template Modal */}
-      <DuplicateTemplateModal
-        open={isShowModel.open && isShowModel.model === 'duplicate'}
-        value={isShowModel.inputValue || ''}
-        onChange={(val) =>
-          setIsShowModel((prev) => ({
-            ...prev,
-            inputValue: val,
-          }))
-        }
-        error=""
-        title={MESSAGES.TEMPLATE.DUPLICATE_MODAL.TITLE}
-        submitButtonText={MESSAGES.TEMPLATE.DUPLICATE_MODAL.SUBMIT_BUTTON}
-        onCancel={closeDuplicateModal}
-        onDuplicateTemplate={onDuplicateTemplate}
-        setIsDuplication={setIsDuplication}
-        icon={<CloneIcon fill="var(--primary-color)" />}
-      />
-    </>
-  );
-};
-
-export default TopNavigation;