@openlettermarketing/olc-react-sdk 0.0.19 → 0.0.21

package/src/assets/images/templates/trash-icon.svg

@@ -1,13 +0,0 @@
-<svg width="58" height="69" viewBox="0 0 58 69" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_1484_3181)">
-<path d="M37.0001 25.1709C36.2499 25.1709 35.6418 25.8777 35.6418 26.7498V56.5908C35.6418 57.4623 36.2499 58.1697 37.0001 58.1697C37.7504 58.1697 38.3584 57.4623 38.3584 56.5908V26.7498C38.3584 25.8777 37.7504 25.1709 37.0001 25.1709Z" fill="#ED5C2F"/>
-<path d="M20.9722 25.1709C20.2219 25.1709 19.6139 25.8777 19.6139 26.7498V56.5908C19.6139 57.4623 20.2219 58.1697 20.9722 58.1697C21.7225 58.1697 22.3305 57.4623 22.3305 56.5908V26.7498C22.3305 25.8777 21.7225 25.1709 20.9722 25.1709Z" fill="#ED5C2F"/>
-<path d="M9.29068 20.8163V59.7169C9.29068 62.0161 10.016 64.1754 11.283 65.7247C12.5443 67.2783 14.2994 68.1602 16.1364 68.1639H41.836C43.6734 68.1602 45.4286 67.2783 46.6893 65.7247C47.9563 64.1754 48.6817 62.0161 48.6817 59.7169V20.8163C51.2004 20.0392 52.8325 17.2108 52.4955 14.2066C52.1581 11.203 49.9567 8.95617 47.3504 8.95555H40.396V6.98194C40.4039 5.32225 39.8394 3.72856 38.8286 2.55611C37.8178 1.38428 36.4447 0.731756 35.0169 0.745325H22.9555C21.5277 0.731756 20.1545 1.38428 19.1437 2.55611C18.133 3.72856 17.5684 5.32225 17.5764 6.98194V8.95555H10.6219C8.01567 8.95617 5.81426 11.203 5.4768 14.2066C5.13988 17.2108 6.77197 20.0392 9.29068 20.8163ZM41.836 65.0061H16.1364C13.814 65.0061 12.0073 62.6871 12.0073 59.7169V20.9551H45.965V59.7169C45.965 62.6871 44.1584 65.0061 41.836 65.0061ZM20.293 6.98194C20.284 6.15981 20.562 5.36851 21.0639 4.78815C21.5653 4.20778 22.2477 3.88892 22.9555 3.9031H35.0169C35.7247 3.88892 36.407 4.20778 36.9084 4.78815C37.4103 5.36789 37.6884 6.15981 37.6794 6.98194V8.95555H20.293V6.98194ZM10.6219 12.1133H47.3504C48.7008 12.1133 49.7954 13.3857 49.7954 14.9553C49.7954 16.525 48.7008 17.7973 47.3504 17.7973H10.6219C9.27158 17.7973 8.17697 16.525 8.17697 14.9553C8.17697 13.3857 9.27158 12.1133 10.6219 12.1133Z" fill="#ED5C2F"/>
-<path d="M28.9861 25.1709C28.2359 25.1709 27.6278 25.8777 27.6278 26.7498V56.5908C27.6278 57.4623 28.2359 58.1697 28.9861 58.1697C29.7364 58.1697 30.3445 57.4623 30.3445 56.5908V26.7498C30.3445 25.8777 29.7364 25.1709 28.9861 25.1709Z" fill="#ED5C2F"/>
-</g>
-<defs>
-<clipPath id="clip0_1484_3181">
-<rect width="58" height="67.4188" fill="white" transform="translate(0 0.745117)"/>
-</clipPath>
-</defs>
-</svg>

package/src/assets/images/templates/tri-fold-self-mailers.tsx

@@ -1,93 +0,0 @@
-import React from 'react'
-
-const triFoldSelfMailers = (props: any) => {
-    const {fill} = props
-  return (
-    <svg
-      width="51"
-      height="50"
-      viewBox="0 0 51 50"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g clipPath="url(#clip0_1099_4325)">
-        <path
-          d="M19.8213 11.696L31.3583 3.59668V38.0406L19.8213 46.793V11.696Z"
-          fill={fill}
-        />
-        <path
-          d="M48.021 0.912109H33.1005C32.3616 0.916084 31.4555 1.16302 30.7474 1.73281L19.8355 10.3917C19.4949 10.6476 19.0493 10.8769 18.3851 10.8973H3.46447C2.06302 10.8973 0.922852 12.0374 0.922852 13.4389V46.1798C0.922852 47.5813 2.06302 48.7214 3.46447 48.7214H18.385C18.8391 48.7214 19.2839 48.6409 19.7032 48.4835C20.0761 48.346 20.4243 48.1499 20.7382 47.9006L31.6501 39.2418C31.8441 39.0885 32.058 38.9682 32.2858 38.8841C32.4975 38.7981 32.7679 38.5699 32.7612 38.202V2.39335C32.873 2.37687 32.986 2.3664 33.1005 2.3664H48.0211C48.6207 2.3664 49.1085 2.85417 49.1085 3.45373V36.1947C49.1085 36.7942 48.6207 37.282 48.0211 37.282H35.5104C35.1087 37.282 34.7832 37.6076 34.7832 38.0091C34.7832 38.4107 35.1087 38.7363 35.5104 38.7363H48.0211C49.4226 38.7363 50.5627 37.5961 50.5627 36.1947V3.45373C50.5627 2.05227 49.4225 0.912109 48.021 0.912109ZM3.46447 47.2672C2.86491 47.2672 2.37714 46.7794 2.37714 46.1798V34.1823C3.05426 34.5532 3.75591 34.8786 4.47481 35.1535C4.74948 35.2502 5.19808 35.1869 5.4137 34.734C5.5571 34.3589 5.36939 33.9385 4.99428 33.7951C4.08593 33.4478 3.20735 33.0129 2.37724 32.5006V13.4389C2.37724 12.8393 2.86501 12.3516 3.46456 12.3516H18.385C18.4988 12.3516 18.612 12.3465 18.7243 12.3364V32.5306C16.2755 34.0292 13.4681 34.8213 10.5774 34.8213C9.84667 34.8213 9.11225 34.7705 8.39422 34.6702C7.9971 34.6145 7.62898 34.892 7.57352 35.2897C7.51796 35.6875 7.79535 36.055 8.19314 36.1104C8.97739 36.22 9.77958 36.2755 10.5774 36.2755C13.4419 36.2755 16.2328 35.5649 18.7243 34.211V47.2402C18.6125 47.2567 18.4995 47.2672 18.385 47.2672H3.46447ZM20.1786 46.4881V11.8995C20.3975 11.7595 20.1581 11.9495 20.7381 11.5318L31.3068 3.14542V37.7341C31.088 37.8741 31.3273 37.6841 30.7473 38.1017L20.1786 46.4881Z"
-          fill="black"
-        />
-        <path
-          d="M7.0275 24.684C7.18156 24.7848 7.12901 25.5061 7.12261 25.738C7.04854 27.0322 8.46763 28.1678 9.80093 27.6838C10.2931 27.3994 10.9358 27.3855 11.4942 27.6838C11.7131 27.7617 11.9405 27.8 12.1667 27.7999C13.1408 27.8332 14.228 26.8904 14.1724 25.7379C14.0541 25.182 14.2393 24.5663 14.6957 24.1275C15.5174 23.1278 15.0307 21.3578 13.6725 20.9791C13.1072 20.9198 12.579 20.5534 12.3027 19.9838C11.6018 18.8931 9.78648 18.8086 8.99215 19.9838C8.76111 20.5031 8.2493 20.8922 7.62211 20.9791C6.35377 21.3151 5.73376 23.0077 6.59916 24.1275L7.0275 24.684ZM7.66438 22.7331C7.69143 22.6499 7.7816 22.4483 8.03348 22.374C8.92506 22.2357 9.73888 21.6707 10.1919 20.8059C10.4662 20.5367 10.6834 20.4292 11.1032 20.8059C11.5102 21.6112 12.299 22.2104 13.2615 22.374C13.6023 22.5516 13.7716 22.725 13.5432 23.2407C12.9129 23.8687 12.5777 24.7997 12.7187 25.7779C12.6551 26.157 12.5425 26.3716 11.9815 26.3136C11.1896 25.9083 10.2006 25.8769 9.31364 26.3136C8.9333 26.3702 8.6947 26.3295 8.57642 25.7779C8.71709 24.8996 8.44117 23.9492 7.75203 23.2407C7.59176 23.0324 7.63743 22.8163 7.66438 22.7331Z"
-          fill="black"
-        />
-        <path
-          d="M8.3226 40.9592H12.779C13.1807 40.9592 13.5062 40.6336 13.5062 40.232C13.5062 39.8305 13.1807 39.5049 12.779 39.5049H8.3226C7.92093 39.5049 7.59546 39.8305 7.59546 40.232C7.59546 40.6336 7.92103 40.9592 8.3226 40.9592Z"
-          fill="black"
-        />
-        <path
-          d="M15.6462 42.54H5.45566C5.05399 42.54 4.72852 42.8656 4.72852 43.2672C4.72852 43.6688 5.05399 43.9943 5.45566 43.9943H15.6462C16.0478 43.9943 16.3733 43.6688 16.3733 43.2672C16.3733 42.8656 16.0478 42.54 15.6462 42.54Z"
-          fill="black"
-        />
-        <path
-          d="M28.2465 11.3871L22.804 15.7058C22.4895 15.9555 22.4367 16.4128 22.6864 16.7274C22.8299 16.9083 23.0422 17.0026 23.2565 17.0026C23.4148 17.0026 23.5743 16.9511 23.708 16.845L29.1505 12.5263C29.465 12.2766 29.5178 11.8193 29.2681 11.5047C29.0186 11.1901 28.5611 11.1374 28.2465 11.3871Z"
-          fill="black"
-        />
-        <path
-          d="M28.2465 15.4105L22.804 19.7293C22.4895 19.9789 22.4367 20.4363 22.6864 20.7509C22.8299 20.9318 23.0422 21.026 23.2565 21.026C23.4148 21.026 23.5743 20.9746 23.708 20.8685L29.1505 16.5497C29.465 16.3001 29.5178 15.8428 29.2681 15.5281C29.0186 15.2136 28.5611 15.1608 28.2465 15.4105Z"
-          fill="black"
-        />
-        <path
-          d="M28.2465 19.433L22.804 23.7517C22.4895 24.0014 22.4367 24.4587 22.6864 24.7733C22.8299 24.9542 23.0422 25.0485 23.2565 25.0485C23.4148 25.0485 23.5743 24.997 23.708 24.8909L29.1505 20.5722C29.465 20.3225 29.5178 19.8652 29.2681 19.5506C29.0186 19.236 28.5611 19.1833 28.2465 19.433Z"
-          fill="black"
-        />
-        <path
-          d="M28.2465 27.8597L22.804 32.1785C22.4895 32.4282 22.4367 32.8855 22.6864 33.2001C22.8299 33.381 23.0422 33.4752 23.2565 33.4752C23.4148 33.4752 23.5743 33.4238 23.708 33.3177L29.1505 28.9989C29.465 28.7493 29.5178 28.292 29.2681 27.9773C29.0186 27.6627 28.5611 27.6101 28.2465 27.8597Z"
-          fill="black"
-        />
-        <path
-          d="M28.2465 31.8832L22.804 36.2019C22.4895 36.4516 22.4367 36.9089 22.6864 37.2235C22.8299 37.4044 23.0422 37.4987 23.2565 37.4987C23.4148 37.4987 23.5743 37.4472 23.708 37.3411L29.1505 33.0223C29.465 32.7727 29.5178 32.3154 29.2681 32.0008C29.0186 31.6862 28.5611 31.6335 28.2465 31.8832Z"
-          fill="black"
-        />
-        <path
-          d="M37.1872 12.3216H44.6898C45.6642 12.3216 46.4569 11.5289 46.4569 10.5546V7.4194C46.4569 6.44503 45.6642 5.65234 44.6898 5.65234H37.1872C36.2128 5.65234 35.4202 6.44503 35.4202 7.4194V10.5546C35.4202 11.5289 36.2128 12.3216 37.1872 12.3216ZM36.8745 7.4194C36.8745 7.24693 37.0147 7.10663 37.1872 7.10663H44.6898C44.8622 7.10663 45.0026 7.24693 45.0026 7.4194V10.5546C45.0026 10.727 44.8623 10.8673 44.6898 10.8673H37.1872C37.0148 10.8673 36.8745 10.727 36.8745 10.5546V7.4194Z"
-          fill="black"
-        />
-        <path
-          d="M35.4202 19.3182C35.4202 20.2926 36.2128 21.0853 37.1872 21.0853H44.6898C45.6642 21.0853 46.4569 20.2926 46.4569 19.3182V16.1831C46.4569 15.2087 45.6642 14.416 44.6898 14.416H37.1872C36.2128 14.416 35.4202 15.2087 35.4202 16.1831V19.3182ZM36.8745 16.1831C36.8745 16.0106 37.0147 15.8703 37.1872 15.8703H44.6898C44.8622 15.8703 45.0026 16.0106 45.0026 16.1831V19.3182C45.0026 19.4907 44.8623 19.631 44.6898 19.631H37.1872C37.0148 19.631 36.8745 19.4907 36.8745 19.3182V16.1831Z"
-          fill="black"
-        />
-        <path
-          d="M36.8587 25.5879C36.4658 25.5879 36.1472 25.9064 36.1472 26.2993C36.1472 26.6923 36.4657 27.0108 36.8587 27.0108C37.2516 27.0108 37.5701 26.6923 37.5701 26.2993C37.5701 25.9064 37.2515 25.5879 36.8587 25.5879Z"
-          fill="black"
-        />
-        <path
-          d="M45.7296 25.5732H40.3277C39.9261 25.5732 39.6006 25.8988 39.6006 26.3004C39.6006 26.702 39.9261 27.0275 40.3277 27.0275H45.7296C46.1313 27.0275 46.4568 26.702 46.4568 26.3004C46.4568 25.8988 46.1313 25.5732 45.7296 25.5732Z"
-          fill="black"
-        />
-        <path
-          d="M36.8587 29.4902C36.4658 29.4902 36.1472 29.8087 36.1472 30.2017C36.1472 30.5945 36.4657 30.9131 36.8587 30.9131C37.2516 30.9131 37.5701 30.5946 37.5701 30.2017C37.5701 29.8087 37.2515 29.4902 36.8587 29.4902Z"
-          fill="black"
-        />
-        <path
-          d="M45.7296 29.4746H40.3277C39.9261 29.4746 39.6006 29.8002 39.6006 30.2018C39.6006 30.6033 39.9261 30.9289 40.3277 30.9289H45.7296C46.1313 30.9289 46.4568 30.6033 46.4568 30.2018C46.4568 29.8002 46.1313 29.4746 45.7296 29.4746Z"
-          fill="black"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_1099_4325">
-          <rect
-            width="49.6398"
-            height="49.6398"
-            fill="white"
-            transform="translate(0.922852 -0.00292969)"
-          />
-        </clipPath>
-      </defs>
-    </svg>
-  );
-}
-
-export default triFoldSelfMailers;

package/src/components/CreateTemplate/index.tsx

@@ -1,381 +0,0 @@
-import React, { ReactElement, useEffect, useState } from 'react';
-
-//hooks
-import { NavLink, useNavigate } from 'react-router-dom';
-import { useDispatch, useSelector } from 'react-redux';
-import { AppDispatch, RootState } from '../../redux/store';
-
-//actions
-import {
-  clearTemplateFields,
-  getAllProducts,
-  searchAndAdvanceChange,
-  selectPostCard,
-  selectProduct,
-} from '../../redux/actions/templateActions';
-import { CLEAR_TEMPLATE } from '../../redux/actions/action-types';
-
-//utils
-import { PRODUCT_LEARN_URL, sortOrderForTemplates } from '../../utils/constants';
-import { removeItem } from '../../utils/local-storage';
-import { MESSAGES } from '../../utils/message';
-import { envelopeTypes } from '../../utils/template-builder';
-
-// UI Components
-import { GridContainer, GridItem } from '../GenericUIBlocks/Grid';
-import Typography from '../GenericUIBlocks/Typography';
-import Button from '../GenericUIBlocks/Button';
-import GeneralSelect from '../GenericUIBlocks/GeneralSelect';
-import GenericSnackbar from '../GenericUIBlocks/GenericSnackbar'
-
-// Images
-//@ts-ignore
-import Postcard from '../../assets/images/templates/postcard.tsx';
-//@ts-ignore
-import PersonalLetter from '../../assets/images/templates/personal-letter.tsx';
-//@ts-ignore
-import ProfessionalLetter from '../../assets/images/templates/professional-letter.tsx';
-//@ts-ignore
-import RealPennedLetter from '../../assets/images/templates/real-penned-letters.tsx';
-//@ts-ignore
-import TriFoldSelfMailers from '../../assets/images/templates/tri-fold-self-mailers.tsx';
-//@ts-ignore
-import BiFoldSelfMailers from '../../assets/images/templates/bi-fold-self-mailers.tsx';
-
-import SizeImage from '../../assets/images/templates/size-image';
-import SizeImageMid from '../../assets/images/templates/size-image-mid';
-import SizeImageLarge from '../../assets/images/templates/size-image-lg';
-import Input from '../GenericUIBlocks/Input';
-import Divider from '../GenericUIBlocks/Divider';
-
-// styles
-import './styles.scss';
-
-const templateHeadingStyles: React.CSSProperties = {
-  color: `var(--primaryColor)`,
-  fontSize: `24px`,
-  fontStyle: `normal`,
-  fontWeight: `600`,
-  lineHeight: `normal`,
-  marginBottom: `20px`,
-};
-
-const templateTextStyles: React.CSSProperties = {
-  color: `var(--textColor)`,
-  fontSize: `14px`,
-  fontStyle: `normal`,
-  fontWeight: `400`,
-  lineHeight: `normal`,
-  marginBottom: `16px`,
-};
-
-const footerButtonStyles: React.CSSProperties = {
-  width: '100%',
-  maxWidth: '100px',
-  height: '100%',
-  minHeight: '40px',
-  textTransform: 'capitalize',
-  borderRadius: '3px',
-  backgroundColor: 'var(--secondaryButtonBgColor)',
-  color: `var(--secondaryButtonTextColor)`,
-  fontSize: `14px`,
-  fontWeight: `500`,
-};
-
-const Images: Record<string, ReactElement> = {
-  'Postcards': <Postcard fill="var(--svgColor)" />,
-  'Professional Letters': <ProfessionalLetter fill="var(--svgColor)" />,
-  'Personal Letters': <PersonalLetter fill="var(--svgColor)" />,
-  'Real Penned Letter': <RealPennedLetter fill="var(--svgColor)" />,
-  'Tri-Fold Self-Mailers': <TriFoldSelfMailers fill="var(--svgColor)" />,
-  'Bi-Fold Self-Mailers': <BiFoldSelfMailers fill="var(--svgColor)" />,
-};
-
-interface CreateTemplateProps {
-  returnRoute?: string | null,
-}
-
-const CreateTemplate: React.FC<CreateTemplateProps> = ({ returnRoute }) => {
-  const [isError, setIsError] = useState<boolean>(false);
-  const [envelopeType, setEnvelopeType] = useState<[]>([]);
-
-  const title = useSelector((state: RootState) => state.templates.title);
-  const product = useSelector((state: RootState) => state.templates.product) as Record<string, any>;
-  const products = useSelector((state: RootState) => state.templates.products);
-  const templateType = useSelector((state: RootState) => state.templates.templateType);
-
-  const dispatch: AppDispatch = useDispatch();
-  const navigate = useNavigate();
-
-  const sortedProducts = products?.sort((a, b) => {
-    const indexA = sortOrderForTemplates.indexOf(a.productType);
-    const indexB = sortOrderForTemplates.indexOf(b.productType);
-    return indexA - indexB;
-  });
-
-  const handleNext = () => {
-    const trimedTitle = title.trim();
-    if (
-      !trimedTitle ||
-      trimedTitle?.length > 50 ||
-      !templateType ||
-      !product ||
-      (product &&
-        product.productType === 'Postcards' &&
-        !product?.selectedSize) ||
-      (product &&
-        product.productType === 'Professional Letters' &&
-        !Object.keys(envelopeType).length)
-    ) {
-      setIsError(true);
-    } else {
-      let envelope: string | string[] = "";
-      if (product.productType === 'Professional Letters') {
-        //@ts-ignore
-        envelope = envelopeTypes.find(
-          //@ts-ignore
-          (envelope) => envelope?.label === envelopeType.label
-        )?.type;
-      }
-      dispatch(searchAndAdvanceChange('title', trimedTitle));
-      dispatch(searchAndAdvanceChange('envelopeType', envelope));
-      navigate(
-        templateType === 'json' ? '/template-builder' : '/template-html'
-      );
-    }
-  };
-
-  useEffect(() => {
-    dispatch(getAllProducts());
-    dispatch(clearTemplateFields());
-    removeItem('formData');
-    dispatch({ type: CLEAR_TEMPLATE });
-  }, []);
-
-  useEffect(() => {
-    if (products?.length) {
-      dispatch(selectProduct(products[0]));
-    }
-  }, [products]);
-
-  useEffect(() => {
-    if (product && product?.productType === 'Professional Letters') {
-      if (Object.keys(envelopeType).length) {
-        setIsError(false);
-      }
-      //@ts-ignore
-      if (envelopeType?.label === 'Non-Windowed Envelope') {
-        dispatch(
-          selectProduct(sortedProducts.find((item) => item.windowed === false))
-        );
-      }
-    }
-  }, [envelopeType]);
-
-  return (
-    <div className="createTemplateMaindiv">
-      <div>
-        <GridContainer>
-          <GridItem lg={5} md={12} sm={12} xs={12}>
-            <div className="createTemplateHeader">
-              <Typography style={templateHeadingStyles}>
-                {MESSAGES.TEMPLATE.CREATE.TITLE}
-              </Typography>
-              <div className="templateInputWrapper">
-                <Typography style={templateTextStyles}>
-                  {MESSAGES.TEMPLATE.CREATE.TEMPLATE_LABEL}
-                </Typography>
-                <Input
-                  type="text"
-                  value={title}
-                  onChange={(e: any) => {
-                    dispatch(searchAndAdvanceChange('title', e.target.value));
-                  }}
-                  placeholder="Template Name"
-                  inputIcon={false}
-                  error={!title.trim() && isError ? MESSAGES.TEMPLATE.NAME_REQUIRED : title.length > 50 && isError ? MESSAGES.TEMPLATE.NAME_LESS_50: ""}
-                />
-              </div>
-            </div>
-          </GridItem>
-        </GridContainer>
-        <Divider />
-        <GridContainer>
-          <GridItem lg={12} md={12} sm={12} xs={12}>
-            <div className="productTypeWrapper">
-              <div className="productHeading">
-                <Typography style={templateTextStyles}>
-                  {MESSAGES.TEMPLATE.CREATE.PRODUCT_LABEL}
-                </Typography>
-                <NavLink to={PRODUCT_LEARN_URL} target="_blank">
-                  <Typography>
-                    {' '}
-                    {MESSAGES.TEMPLATE.CREATE.LEARN_TEXT}
-                  </Typography>
-                </NavLink>
-              </div>
-              <div className="productsWrapper">
-                {sortedProducts &&
-                  sortedProducts
-                    ?.filter((prod) => prod.windowed !== false)
-                    .map((prod, index) => {
-                      return (
-                        <div
-                          className={`productCard ${
-                            prod.productType ===
-                            (product && product.productType)
-                              ? 'active'
-                              : ''
-                          } ${isError && !product ? 'error' : ''} `}
-                          key={index}
-                          onClick={() => dispatch(selectProduct(prod))}
-                        >
-                          {Images[prod.productType]}
-                          <Typography>{prod.productType}</Typography>
-                        </div>
-                      );
-                    })}
-              </div>
-              {isError && !product && (
-                <Typography className="error-field">
-                  *{MESSAGES.TEMPLATE.PRODUCT_TYPE_REQUIRED}
-                </Typography>
-              )}
-            </div>
-          </GridItem>
-        </GridContainer>
-        <Divider />
-        {product && product.productType === 'Professional Letters' && (
-          <GridContainer>
-            <GridItem lg={6} md={6} sm={6} xs={12}>
-              {/* <div className="createTemplateHeader"> */}
-              <div className="templateSelectWrapper">
-                <GeneralSelect
-                  className={isError && ![envelopeType].length ? 'error' : ''}
-                  //@ts-ignore
-                  selectedValue={envelopeType}
-                  //@ts-ignore
-                  setSelectedValue={setEnvelopeType}
-                  //@ts-ignore
-                  options={envelopeTypes}
-                  placeholder="Envelope Type"
-                  error={MESSAGES.TEMPLATE.ENVELOPE_TYPE_REQUIRED}
-                  isError={isError}
-                  label="Envelope Type*"
-                />
-              </div>
-              {/* </div> */}
-            </GridItem>
-          </GridContainer>
-        )}
-        {product && product?.productType === 'Postcards' && (
-          <GridContainer>
-            <GridItem lg={12} md={12} sm={12} xs={12}>
-              <div className="postCardSizeWrapper">
-                <div className="postCardHeading">
-                  <Typography style={templateTextStyles}>
-                    Postcard Size*
-                  </Typography>
-                </div>
-                <div className="postCardWrapper">
-                  {product?.size
-                    .sort((a: any, b: any) => a.id.localeCompare(b.id))
-                    .map((type: any, index: any) => {
-                      const size = type.size.split('x');
-                      return (
-                        <div
-                          onClick={() =>
-                            dispatch(
-                              selectPostCard(
-                                {
-                                  ...type,
-                                  size: product.size,
-                                  selectedSize: type.size,
-                                },
-                                'Postcards'
-                              )
-                            )
-                          }
-                          className={
-                            index === 0
-                              ? `postCard postCard-small ${
-                                  product.selectedSize === type.size
-                                    ? 'active'
-                                    : ''
-                                }`
-                              : index === 1
-                                ? `postCard postCard-mid ${
-                                    product.selectedSize === type.size
-                                      ? 'active'
-                                      : ''
-                                  }`
-                                : index === 2
-                                  ? `postCard postCard-large ${
-                                      product.selectedSize === type.size
-                                        ? 'active'
-                                        : ''
-                                    }`
-                                  : `postCard ${
-                                      product.selectedSize === type.size
-                                        ? 'active'
-                                        : ''
-                                    }`
-                          }
-                          key={index}
-                        >
-                          <Typography>
-                            {size[0]}” x {size[1]}"
-                          </Typography>
-                          {index === 0 ? (
-                            <SizeImage />
-                          ) : index === 1 ? (
-                            <SizeImageMid />
-                          ) : (
-                            <SizeImageLarge />
-                          )}
-                        </div>
-                      );
-                    })}
-                </div>
-                {isError &&
-                  product &&
-                  product.productType === 'Postcards' &&
-                  !product.selectedSize && (
-                    <Typography className="error-field">
-                      *{MESSAGES.TEMPLATE.POSTCARD_SIZE_REQUIRED}
-                    </Typography>
-                  )}
-              </div>
-            </GridItem>
-          </GridContainer>
-        )}
-      </div>
-      <div className="footerBtns">
-        <div className="createTemplateBtns">
-          <Button
-            style={{
-              ...footerButtonStyles,
-              border: '0.5px solid var(--borderColor)',
-            }}
-            onClick={() => navigate(returnRoute ? returnRoute : '/create-template')}
-          >
-            {MESSAGES.TEMPLATE.CREATE.CANCEL_BUTTON}
-          </Button>
-          <Button
-            style={{
-              ...footerButtonStyles,
-              color: '#ffffff',
-              backgroundColor: 'var(--primaryButtonBgColor)',
-            }}
-            onClick={handleNext}
-          >
-            {MESSAGES.TEMPLATE.CREATE.SUBMIT_BUTTON}
-          </Button>
-        </div>
-      </div>
-      <GenericSnackbar />
-    </div>
-  );
-};
-
-export default CreateTemplate;