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

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

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