@openlettermarketing/olc-react-sdk 2.1.7 → 2.1.8

package/src/components/SidePanel/Templates/customTemplateSection.tsx

@@ -1,793 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-
-// Polotno and third party libraries
-import { observer } from 'mobx-react-lite';
-import { SectionTab } from 'polotno/side-panel';
-import type { StoreType } from 'polotno/model/store';
-import type { TemplatesSection } from 'polotno/side-panel';
-
-// Actions
-import {
-  clearAllTemplates,
-  getAllTemplateCategories,
-  getAllTemplatesByTab,
-  setPageCount,
-} from '../../../redux/actions/templateActions';
-import {
-  SET_BLOCK_COLOR,
-  SET_ROS_OFFER_PERCENTAGE,
-  TEMPLATE_LOADING,
-} from '../../../redux/actions/action-types';
-import { failure } from '../../../redux/actions/snackbarActions';
-
-// Hooks
-import { useDispatch, useSelector } from 'react-redux';
-import { AppDispatch, RootState } from '../../../redux/store';
-import { clearQrFields } from '../../../redux/actions/customQRCodeActions';
-
-// Utils
-import {
-  multiPageLetters,
-  defaultTemplateTypes,
-  DPI,
-  DEFAULT_RESTRICTED_AREA_BG,
-} from '../../../utils/constants';
-import {
-  changeColorOfBoxesForSnapPack,
-  drawRestrictedAreaOnPage,
-  extractCustomRistrictedBoxColor,
-  getFileAsBlob,
-} from '../../../utils/template-builder';
-import { MESSAGES } from '../../../utils/message';
-import { getItem, removeItem, setItem } from '../../../utils/local-storage';
-import { addSafetyBordersForTemplates } from '../../../utils/templateSafetyBorders';
-import { addIdentifiersForTemplates } from '../../../utils/templateIdentifierArea';
-import { addElementsforRealPennedLetters } from '../../../utils/templateRestrictedArea/realPenned';
-
-// Components
-import Dialog from '../../GenericUIBlocks/Dialog';
-import DialogV2 from '../../GenericUIBlocks/Dialog/V2';
-import SideBarGallery from './SideBarGallery';
-import ModalGallery from './ModalGallery';
-import ModalGalleryV2 from './ModalGallery/V2';
-import HireDesigner from './ModalGallery/HireDesigner';
-
-// Icons
-// @ts-ignore
-import CustomTemplate from '../../../assets/images/templates/custom-template';
-import ModalCross from '../../../assets/images/modal-icons/modal-cross';
-import ConfirmNew from '../../../assets/images/modal-icons/confirm-new';
-
-// styles
-import './styles.scss';
-
-
-type SideSection = typeof TemplatesSection;
-
-const designDialogStyles = {
-  maxWidth: '430px',
-  minHeight: '265px',
-};
-
-const loadDialogStyles = {
-  maxWidth: '430px',
-  minHeight: '300px',
-};
-
-const loadDialogStylesV2 = {
-  maxWidth: '567px',
-  minHeight: '330px',
-  padding: '40px',
-};
-
-
-export type Payload = {
-  tab: string;
-  page: number;
-  pageSize: number;
-  productId: string | null;
-  search?: string;
-  categoryIds?: string[];
-};
-
-export type TemplateType = {
-  id: string;
-  label: string;
-  value: string;
-};
-
-export type TemplateCategory = {
-  id: string;
-  title: string;
-  totalTemplates: number;
-  label?: string;
-};
-
-export type TemplateRecord = {
-  id: string;
-  thumbnailUrl: string;
-  title: string;
-};
-
-type CustomTemplateSectionProps = {
-  store: StoreType;
-  active: boolean;
-  platformName?: string | null;
-  templateGalleryModal?: boolean;
-  selectedSection?: string;
-  designerQueryAmount?: string | number;
-  hireDesignerModal?: any;
-  setHireDesignerModal?: any;
-  allowedTemplateSections?: any;
-  allowedAddOns?: any;
-  currentTheme?: string | null | undefined;
-  onClick: () => void;
-  onCreateCustomTemplateQuery?: (payload: any) => Promise<any>;
-  onGetOneTemplate?: (payload: any) => Promise<any>;
-  onGetTemplates?: (payload: Payload) => Promise<any>;
-  selectedTemplateType?: string | null;
-};
-
-const CustomTemplateSection: SideSection = {
-  name: 'Templates',
-  Tab: observer(
-    (props: { store: StoreType; active: boolean; onClick: () => void }) => (
-      <SectionTab name="Templates" {...props}>
-        <CustomTemplate fill="var(--text-color)" />
-      </SectionTab>
-    )
-  ) as SideSection['Tab'],
-  Panel: observer(
-    ({
-      store,
-      platformName,
-      templateGalleryModal,
-      selectedSection,
-      designerQueryAmount,
-      hireDesignerModal,
-      setHireDesignerModal,
-      allowedTemplateSections,
-      allowedAddOns,
-      currentTheme,
-      selectedTemplateType,
-      onCreateCustomTemplateQuery,
-      onGetOneTemplate,
-      onGetTemplates,
-    }: CustomTemplateSectionProps) => {
-      const dispatch: AppDispatch = useDispatch();
-
-      const [openGalleryModal, setOpenGalleryModal] = useState(false);
-      const [templateTypes, setTemplateTypes] = useState<
-        TemplateType[] | null
-      >();
-      const [currentTemplateType, setCurrentTemplateType] =
-        useState<TemplateType>();
-      const [selectedCategory, setSelectedCategory] =
-        useState<TemplateCategory | null>(null);
-      const [selectedRecord, setSelectedRecord] =
-        useState<TemplateRecord | null>(null);
-      const [templateCategories, setTemplateCategories] = useState<
-        TemplateCategory[]
-      >([]);
-      const [myTemplates, setMyTemplates] = useState<TemplateRecord[]>([]);
-      const [teamTemplates, setTeamTemplates] = useState<TemplateRecord[]>([]);
-      const [olcTemplates, setOlcTemplates] = useState<TemplateRecord[]>([]);
-      const [searchApplied, setSearchApplied] = useState(false);
-      const [search, setSearch] = useState('');
-      const [loader, setLoader] = useState(false);
-      const [pagination, setPagination] = useState({
-        count: 0,
-        currentPage: 0,
-        perPage: 0,
-        total: 0,
-      });
-
-      const paginationRef = useRef(pagination);
-      const searchRef = useRef(search);
-      const currentTemplateTypeRef = useRef(currentTemplateType);
-      const selectedCategoryRef = useRef(selectedCategory);
-
-      const templates = useSelector(
-        (state: RootState) => state.templates.templates
-      ) as Record<string, any>;
-      const template = useSelector(
-        (state: RootState) => state.templates.template
-      ) as Record<string, any>;
-      const templatesPagination = useSelector(
-        (state: any) => state.templates.templatesPagination
-      );
-      const product = useSelector((state: any) => state.templates.product);
-      const envelopeType = useSelector(
-        (state: RootState) => state.templates.envelopeType
-      );
-      const templateLoading = useSelector(
-        (state: RootState) => state.templates.templateLoading
-      );
-
-      const [isShowDialog, setIsShowDialog] = useState({
-        open: false,
-        model: '',
-      });
-
-      const handleLoadTemplateModel = (record: any) => {
-        setSelectedRecord(record);
-        handleDialogChange('load-template');
-      };
-
-      const getTemplatesByTab = async (page = 1) => {
-        try {
-          page === 1 && setLoader(true);
-          const payload: Payload = {
-            tab:
-              currentTemplateTypeRef.current?.id === '1'
-                ? 'my-templates'
-                : currentTemplateTypeRef.current?.id === '2'
-                  ? 'team-templates'
-                  : 'olc-templates',
-            page: page,
-            pageSize: 10,
-            productId: product?.id,
-          };
-          searchRef.current.length
-            ? (payload.search = searchRef.current)
-            : undefined;
-          currentTemplateTypeRef.current?.id === '3'
-            ? (payload.categoryIds = selectedCategoryRef?.current?.id.split(','))
-            : undefined;
-          const isCustomTemplateType =
-            currentTemplateTypeRef.current?.id === '1' ||
-            currentTemplateTypeRef.current?.id === '2';
-          const templates: any =
-            isCustomTemplateType && onGetTemplates
-              ? await onGetTemplates(payload)
-              : await getAllTemplatesByTab(payload);
-          if (templates?.rows) {
-            const newTemplates = templates.rows;
-
-            if (currentTemplateTypeRef.current?.id === '1') {
-              if (templates.currentPage === 1) {
-                setMyTemplates(newTemplates);
-              } else {
-                setMyTemplates((prevTemplates) => [
-                  ...prevTemplates,
-                  ...newTemplates,
-                ]);
-              }
-            } else if (currentTemplateTypeRef.current?.id === '2') {
-              if (templates.currentPage === 1) {
-                setTeamTemplates(newTemplates);
-              } else {
-                setTeamTemplates((prevTemplates) => [
-                  ...prevTemplates,
-                  ...newTemplates,
-                ]);
-              }
-            } else if (currentTemplateTypeRef.current?.id === '3') {
-              if (templates.currentPage === 1) {
-                setOlcTemplates(newTemplates);
-              } else {
-                setOlcTemplates((prevTemplates) => [
-                  ...prevTemplates,
-                  ...newTemplates,
-                ]);
-              }
-            }
-            setPagination({
-              count: templates.count,
-              currentPage: templates.currentPage,
-              perPage: templates.perPage,
-              total: templates.total,
-            });
-          }
-        } catch (error) {
-          return error;
-        } finally {
-          setLoader(false);
-        }
-      };
-
-      const getAllCategories = async () => {
-        const categories: Record<string, any> = await dispatch(
-          getAllTemplateCategories
-        );
-        if (categories?.status === 200) {
-          if (categories?.data?.data) {
-            const allCategories = categories?.data?.data?.map((item: any) => ({
-              ...item,
-              label: item.title,
-            }));
-            if (allCategories.length === 1) {
-              setSelectedCategory(allCategories[0]);
-            }
-            setTemplateCategories(
-              allCategories.filter((item: any) => item.totalTemplates > 0)
-            );
-          }
-        }
-      };
-
-      const closeGalleryModal = () => {
-        let sideBar = document.getElementsByClassName('polotno-panel-container');
-        const firstSideBar = sideBar[0];
-        if (firstSideBar) {
-          //@ts-ignore
-          firstSideBar.style.display = 'block';
-        }
-        setOpenGalleryModal(false);
-        store.openSidePanel(selectedSection || 'text');
-        removeItem('currentTab');
-        document.body.classList.remove('no-scroll');
-      };
-
-      const closeHireDesignerModal = () => {
-        setHireDesignerModal(false);
-        let sideBar = document.getElementsByClassName('polotno-panel-container');
-        const firstSideBar = sideBar[0];
-        if (firstSideBar) {
-          //@ts-ignore
-          firstSideBar.style.display = 'block';
-        }
-        store.openSidePanel(selectedSection || 'text');
-        removeItem('currentTab');
-        removeItem('hireDesignerFormState');
-        removeItem('queryFiles');
-        document.body.classList.remove('no-scroll');
-      }
-
-      const handleTabChange = (tab: any) => {
-        setCurrentTemplateType(tab);
-        setItem('currentTab', JSON.stringify(tab));
-      };
-
-      const handleSearch = () => {
-        if (search) {
-          setSearchApplied(true);
-          getTemplatesByTab();
-        }
-      };
-
-      const removeSearchInput = () => {
-        setSearch('');
-      };
-
-      const searchKeyDown = (event: any) => {
-        if (event.key === 'Enter') {
-          handleSearch();
-        }
-      };
-
-      const handleLoadAllTemplate = (
-        dynamicPagination = false,
-        initialCall = false
-      ) => {
-        let page = dynamicPagination
-          ? ++paginationRef.current.currentPage
-          : paginationRef.current.currentPage;
-
-        if (initialCall) {
-          page = 1;
-        }
-
-        getTemplatesByTab(page);
-      };
-
-      const handleLoadTemplate = async (id: any, type = 'copy') => {
-        if (onGetOneTemplate) {
-          try {
-            const template = await onGetOneTemplate(id);
-            dispatch({ type: TEMPLATE_LOADING, payload: true });
-            dispatch(clearQrFields());
-            if (template) {
-              const workspaceElement = document.querySelector(
-                '.polotno-workspace-container'
-              );
-              if (workspaceElement) {
-                workspaceElement.classList.add('show-loader');
-              }
-              // @ts-ignore
-              const paperDimensions = template?.product?.paperSize.split('x');
-              store.setUnit({
-                unit: 'in',
-                dpi: 96,
-              });
-              store.setSize(
-                +paperDimensions[1] * DPI,
-                +paperDimensions[0] * DPI
-              );
-              let jsonData = await getFileAsBlob(template?.templateUrl);
-              if (template?.product?.productType === 'Real Penned Letter' && +template?.product?.id === 16) {
-                let clonedJson = JSON.stringify(jsonData)
-                  .replace(/{{/g, '((')
-                  .replace(/}}/g, '))');
-                jsonData = JSON.parse(clonedJson);
-              }
-              if (template?.product?.productType === 'Snap Pack Mailers') {
-                const updatedBoxes = changeColorOfBoxesForSnapPack(jsonData, true, true);
-                jsonData = updatedBoxes;
-              }
-              store.loadJSON(jsonData);
-              await store.waitLoading();
-              addSafetyBordersForTemplates(template?.product?.id, store);
-              const RistrictedBoxColor = extractCustomRistrictedBoxColor(jsonData);
-              dispatch({ type: SET_BLOCK_COLOR, payload: RistrictedBoxColor ? RistrictedBoxColor : DEFAULT_RESTRICTED_AREA_BG });
-              dispatch(setPageCount(store?.pages?.length));
-              if (allowedAddOns?.includes('custom_property_offer') && template?.meta?.rosOfferPercentage) {
-                dispatch({ type: SET_ROS_OFFER_PERCENTAGE, payload: template?.meta?.rosOfferPercentage });
-              } else {
-                dispatch({ type: SET_ROS_OFFER_PERCENTAGE, payload: '' });
-              }
-              dispatch({ type: TEMPLATE_LOADING, payload: false });
-              if (workspaceElement) {
-                workspaceElement.classList.add('hide-loader');
-              }
-              if (templateGalleryModal) {
-                closeGalleryModal();
-              }
-            }
-          } catch (error) {
-            return error;
-          } finally {
-            dispatch({ type: TEMPLATE_LOADING, payload: false });
-            handleDialogChange('');
-          }
-        } else {
-          dispatch(
-            failure(
-              'Please provide onGetOneTemplate handler to load this template'
-            )
-          );
-        }
-      };
-
-      const handleDialogChange = (model = '') => {
-        setIsShowDialog((prev) => ({ open: !prev.open, model: model }));
-      };
-
-      const processPage = async (index: any, page: any) => {
-        return new Promise<void>((resolve) => {
-          let pageNumber = page.children.find(
-            (el: any) => el.custom?.name === 'page-number'
-          );
-          const text = index === 0 ? 'Front' : 'Back';
-
-          if (pageNumber) {
-            pageNumber.set({ text });
-            resolve();
-          } else {
-            page.addElement({
-              type: 'text',
-              custom: { name: 'page-number' },
-              text,
-              width: store.width,
-              align: 'center',
-              fontSize: 40,
-              x: -150,
-              y: -50,
-              selectable: false,
-              alwaysOnTop: true,
-            });
-            resolve();
-          }
-        });
-      };
-
-      const checkPageNumbers = async () => {
-        const promises = store.pages.map(async (page: any, index: any) => {
-          await processPage(index, page);
-        });
-
-        await Promise.all(promises); // Wait for all promises to resolve
-      };
-
-      const handleClearStore = () => {
-        store.clear();
-        dispatch(clearQrFields());
-        dispatch({ type: SET_ROS_OFFER_PERCENTAGE, payload: '' });
-        dispatch({ type: SET_BLOCK_COLOR, payload: DEFAULT_RESTRICTED_AREA_BG });
-        dispatch(setPageCount(store?.pages?.length));
-        let size: string | string[] = '';
-        let isPostCards = false;
-        let _product = product;
-        if (template?.product) {
-          size = template?.product?.paperSize;
-          isPostCards = template.product.productType === 'Postcards' || false;
-          _product = template.product;
-        } else if (product) {
-          size = product.selectedSize;
-          isPostCards = product.productType === 'Postcards' || false;
-        }
-        store.setUnit({
-          unit: 'in',
-          dpi: DPI,
-        });
-        size = (size as string)?.split('x');
-        store.setSize(+size[1] * DPI, +size[0] * DPI);
-        store.addPage();
-
-        if (multiPageLetters.includes(_product.productType)) {
-          store.addPage();
-          store.selectPage(store.pages[0].id);
-        }
-        drawRestrictedAreaOnPage(store, product, envelopeType);
-        addIdentifiersForTemplates(product.id, store);
-        if (product.productType === 'Real Penned Letter' && +product?.id === 16) {
-          addElementsforRealPennedLetters(store);
-        }
-        handleDialogChange('');
-        if (templateGalleryModal) {
-          closeGalleryModal();
-        }
-      };
-
-      const handleScroll = () => {
-        const div = document.querySelector('.templatesContent') || document.querySelector('.polotno-panel-container');
-        if (div) {
-          const isAtBottom =
-            div.scrollTop + div.clientHeight + 50 >= div.scrollHeight;
-          const isNeedToLoadMore =
-            paginationRef.current.currentPage * paginationRef.current.perPage <
-            paginationRef.current.count;
-          if (isAtBottom && !templatesPagination.loading && isNeedToLoadMore) {
-            handleLoadAllTemplate(true);
-          }
-        }
-      };
-
-      useEffect(() => {
-        if (templateLoading !== null && templateLoading === false) {
-          handleDialogChange('');
-          dispatch({ type: TEMPLATE_LOADING, payload: null });
-        }
-      }, [templateLoading]);
-
-      useEffect(() => {
-        if (!search && searchApplied) {
-          setSearchApplied(false);
-          setSearch('');
-          setTimeout(() => {
-            getTemplatesByTab();
-          }, 100);
-        }
-      }, [search]);
-
-      useEffect(() => {
-        searchRef.current = search;
-      }, [search]);
-
-      useEffect(() => {
-        currentTemplateTypeRef.current = currentTemplateType;
-      }, [currentTemplateType]);
-
-      useEffect(() => {
-        selectedCategoryRef.current = selectedCategory;
-      }, [selectedCategory]);
-
-      useEffect(() => {
-        paginationRef.current = pagination;
-      }, [pagination]);
-
-      useEffect(() => {
-        const newTemplateType: TemplateType = {
-          id: '3',
-          label: platformName ? `${platformName} Templates` : 'OLC Templates',
-          value: 'olc-templates'
-        };
-        if (onGetTemplates) {
-          let filteredTemplateTypes: TemplateType[] = [...defaultTemplateTypes, newTemplateType];
-          if (Array.isArray(allowedTemplateSections) && allowedTemplateSections.length > 0) {
-            filteredTemplateTypes = filteredTemplateTypes.filter((type) => allowedTemplateSections.includes(type.value));
-          }
-          setTemplateTypes(filteredTemplateTypes);
-          const lastSelectedTab = getItem('currentTab');
-          if (selectedTemplateType === 'prebuilt') {
-            setCurrentTemplateType(newTemplateType);
-          }
-          else if (lastSelectedTab) {
-            setCurrentTemplateType(JSON.parse(lastSelectedTab));
-          } else {
-            setCurrentTemplateType(defaultTemplateTypes[0]);
-          }
-        } else {
-          setTemplateTypes([newTemplateType]);
-          setCurrentTemplateType(newTemplateType);
-        }
-        getAllCategories();
-        return () => {
-          dispatch(clearAllTemplates());
-        };
-      }, []);
-
-      useEffect(() => {
-        if (currentTemplateType && Object.keys(currentTemplateType).length) {
-          getTemplatesByTab();
-        }
-      }, [currentTemplateType]);
-
-      useEffect(() => {
-        if (currentTemplateType && Object.keys(currentTemplateType).length && currentTemplateType?.id === '3' &&
-          templateCategories?.length >= 1) {
-          getTemplatesByTab();
-        }
-      }, [selectedCategory]);
-
-      useEffect(() => {
-        const div = document.querySelector('.templatesContent') || document.querySelector('.templatesContent-v2') || document.querySelector('.polotno-panel-container');
-
-        if (store.openedSidePanel === 'Templates' && templateGalleryModal) {
-          let sideBar = document.getElementsByClassName('polotno-panel-container');
-          const firstSideBar = sideBar[0];
-          if (firstSideBar) {
-            //@ts-ignore
-            firstSideBar.style.display = 'contents';
-          }
-          setOpenGalleryModal(true);
-          document.body.classList.add('no-scroll');
-        }
-
-        if (div) {
-          div.removeEventListener('scroll', handleScroll);
-          div.addEventListener('scroll', handleScroll);
-        }
-        return () => {
-          div?.removeEventListener('scroll', handleScroll);
-        };
-      }, [templates]);
-
-      return (
-        <>
-          {templateGalleryModal && !hireDesignerModal ? (
-            currentTheme === 'v2' ?
-              <ModalGalleryV2
-                product={product}
-                openGalleryModal={openGalleryModal}
-                pagination={pagination}
-                currentTemplateTypeRef={currentTemplateTypeRef}
-                selectedCategory={selectedCategory}
-                templateCategories={templateCategories}
-                currentTemplateType={currentTemplateType}
-                templateTypes={templateTypes}
-                search={search}
-                searchApplied={searchApplied}
-                loader={loader}
-                platformName={platformName}
-                myTemplates={myTemplates}
-                teamTemplates={teamTemplates}
-                olcTemplates={olcTemplates}
-                designerQueryAmount={designerQueryAmount}
-                setHireDesignerModal={setHireDesignerModal}
-                currentTheme={currentTheme}
-                setSearch={setSearch}
-                handleSearch={handleSearch}
-                removeSearchInput={removeSearchInput}
-                searchKeyDown={searchKeyDown}
-                setCurrentTemplateType={setCurrentTemplateType}
-                setSelectedCategory={setSelectedCategory}
-                handleLoadTemplateModel={handleLoadTemplateModel}
-                handleDialogChange={handleDialogChange}
-                handleTabChange={handleTabChange}
-                closeGalleryModal={closeGalleryModal}
-                setOpenGalleryModal={setOpenGalleryModal}
-              /> :
-              <ModalGallery
-                product={product}
-                openGalleryModal={openGalleryModal}
-                pagination={pagination}
-                currentTemplateTypeRef={currentTemplateTypeRef}
-                selectedCategory={selectedCategory}
-                templateCategories={templateCategories}
-                currentTemplateType={currentTemplateType}
-                templateTypes={templateTypes}
-                search={search}
-                searchApplied={searchApplied}
-                loader={loader}
-                platformName={platformName}
-                myTemplates={myTemplates}
-                teamTemplates={teamTemplates}
-                olcTemplates={olcTemplates}
-                designerQueryAmount={designerQueryAmount}
-                setHireDesignerModal={setHireDesignerModal}
-                setSearch={setSearch}
-                handleSearch={handleSearch}
-                removeSearchInput={removeSearchInput}
-                searchKeyDown={searchKeyDown}
-                setCurrentTemplateType={setCurrentTemplateType}
-                setSelectedCategory={setSelectedCategory}
-                handleLoadTemplateModel={handleLoadTemplateModel}
-                handleDialogChange={handleDialogChange}
-                handleTabChange={handleTabChange}
-                closeGalleryModal={closeGalleryModal}
-                setOpenGalleryModal={setOpenGalleryModal}
-              />
-          ) : !hireDesignerModal && (
-            <SideBarGallery
-              selectedCategory={selectedCategory}
-              templateCategories={templateCategories}
-              currentTemplateType={currentTemplateType}
-              templateTypes={templateTypes}
-              search={search}
-              searchApplied={searchApplied}
-              loader={loader}
-              platformName={platformName}
-              myTemplates={myTemplates}
-              teamTemplates={teamTemplates}
-              olcTemplates={olcTemplates}
-              setSearch={setSearch}
-              handleSearch={handleSearch}
-              removeSearchInput={removeSearchInput}
-              searchKeyDown={searchKeyDown}
-              setCurrentTemplateType={setCurrentTemplateType}
-              setSelectedCategory={setSelectedCategory}
-              handleLoadTemplateModel={handleLoadTemplateModel}
-              handleDialogChange={handleDialogChange}
-            />
-          )}
-
-          <div className="custom-template-section">
-            {isShowDialog.open && isShowDialog.model === 'design-own' && (
-              <Dialog
-                icon={<ModalCross />}
-                title={MESSAGES.TEMPLATE.DESIGN_YOUR_OWN.TITLE}
-                subHeading={MESSAGES.TEMPLATE.DESIGN_YOUR_OWN.HEADING}
-                description={MESSAGES.TEMPLATE.DESIGN_YOUR_OWN.PARAGRAPH}
-                open={isShowDialog.open}
-                handleClose={() => handleDialogChange('')}
-                onCancel={() => handleDialogChange('')}
-                onSubmit={handleClearStore}
-                customStyles={designDialogStyles}
-                cancelText="Cancel"
-                submitText="OK"
-              />
-            )}
-            {hireDesignerModal && (
-              <HireDesigner
-                open={hireDesignerModal}
-                onCreateCustomTemplateQuery={onCreateCustomTemplateQuery}
-                productId={product?.id}
-                onClose={closeHireDesignerModal}
-              />
-            )}
-            {isShowDialog.open && isShowDialog.model === 'load-template' && (
-              <>
-              {currentTheme === 'v2' ?
-                <DialogV2
-                  icon={<ConfirmNew fill='var(--primary-color)' />}
-                  title={MESSAGES.TEMPLATE.SELECT_TEMPLATE.TITLE}
-                  subHeading=''
-                  description="Are you sure you want to replace the current template with this one? Any unsaved changes will be lost. Save your changes first or click OK to proceed."
-                  open={isShowDialog.open}
-                  handleClose={() => handleDialogChange('')}
-                  onCancel={() => handleDialogChange('')}
-                  onSubmit={() => handleLoadTemplate(selectedRecord?.id)}
-                  customStyles={loadDialogStylesV2}
-                  loading={templateLoading || false}
-                  cancelText="Cancel"
-                  submitText="OK"
-                  currentTheme="v2"
-                  isGallery={false}
-                />
-                :
-                <Dialog
-                  icon={<ModalCross />}
-                  title={MESSAGES.TEMPLATE.SELECT_TEMPLATE.TITLE}
-                  subHeading={MESSAGES.TEMPLATE.SELECT_TEMPLATE.HEADING}
-                  description={MESSAGES.TEMPLATE.SELECT_TEMPLATE.PARAGRAPH}
-                  open={isShowDialog.open}
-                  handleClose={() => handleDialogChange('')}
-                  onCancel={() => handleDialogChange('')}
-                  onSubmit={() => handleLoadTemplate(selectedRecord?.id)}
-                  customStyles={loadDialogStyles}
-                  loading={templateLoading || false}
-                  cancelText="Cancel"
-                  submitText="OK"
-                />
-                }
-              </>
-            )}
-          </div>
-        </>
-      );
-    }
-  ) as unknown as SideSection['Panel'],
-};
-
-export default CustomTemplateSection;