@openlettermarketing/olc-react-sdk 2.1.7 → 2.1.8

package/src/components/TemplateBuilder/index.tsx

@@ -1,585 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-// Import Polotno and third-party libraries
-import { PolotnoContainer, WorkspaceWrap } from 'polotno';
-import { Toolbar } from 'polotno/toolbar/toolbar';
-import { ZoomButtons } from 'polotno/toolbar/zoom-buttons';
-import { Workspace } from 'polotno/canvas/workspace';
-import { setGoogleFonts } from 'polotno/config';
-
-// Hooks
-import { useDispatch, useSelector } from 'react-redux';
-import { useParams, useNavigate } from 'react-router-dom';
-import { RootState } from '../../redux/reducers';
-import { AppDispatch } from '../../redux/store';
-import { StoreType } from 'polotno/model/store';
-
-// Actions
-import {
-  CLEAR_REDUX,
-  GET_ONE_TEMPLATE,
-  SET_BLOCK_COLOR,
-  SET_CUSTOM_FIELDS,
-  SET_CUSTOM_FIELDS_V2,
-  SET_PLATFORM_FIELDS,
-  SET_ROS_OFFER_PERCENTAGE,
-  TEMPLATE_LOADING,
-} from '../../redux/actions/action-types';
-import { failure } from '../../redux/actions/snackbarActions';
-import {
-  searchAndAdvanceChange,
-  selectProduct,
-  setPageCount,
-} from '../../redux/actions/templateActions';
-import { clearQrFields } from '../../redux/actions/customQRCodeActions';
-
-// Utils
-import {
-  changeColorOfBoxesForSnapPack,
-  drawRestrictedAreaOnPage,
-  extractCustomRistrictedBoxColor,
-  getFileAsBlob,
-} from '../../utils/template-builder';
-import { addIdentifiersForTemplates } from '../../utils/templateIdentifierArea';
-import { addElementsforRealPennedLetters } from '../../utils/templateRestrictedArea/realPenned';
-import { DEFAULT_RESTRICTED_AREA_BG, DPI, allowedImageTypes, multiPageLetters } from '../../utils/constants';
-import { addSafetyBordersForTemplates } from '../../utils/templateSafetyBorders';
-import { MESSAGES } from '../../utils/message';
-import { removeItem } from '../../utils/local-storage';
-
-// @ts-ignore
-import fonts from '../../utils/fonts.json';
-// @ts-ignore
-import LexiRegularFont from '../../assets/Fonts/Lexi-Regular.ttf';
-
-// Components
-import TopNavigation from '../TopNavigation';
-import SidePanel from '../SidePanel';
-import Typography from '../GenericUIBlocks/Typography';
-import GenericSnackbar from '../GenericUIBlocks/GenericSnackbar/Toast';
-
-import './styles.scss';
-
-/**
- * This code defines a React functional component called `TemplateBuilder` that is responsible for rendering a template builder interface.
- * It includes various useEffect hooks to handle component lifecycle events and state updates.
- * The component uses the `polotno` library to create a canvas workspace where users can design templates.
- * It also includes a side panel with different sections for adding and customizing elements on the canvas.
- *
- * @param {Object} props - The component props.
- * @param {Object} props.store - The store object passed as a prop to the `TemplateBuilder` component.
- * @param {Object} props.styles - The styles contain CSS Properties passed as a prop to the `TemplateBuilder` component.
- * @returns {JSX.Element} The rendered template builder interface.
- */
-
-interface TemplateBuilderProps {
-  store: StoreType;
-  platformName?: string | null;
-  templateGalleryModal?: boolean;
-  createTemplateRoute?: string | null;
-  olcTemplate?: Record<string, any>;
-  designerTemplateQuery?: Record<string, any> | null;
-  allowSenderFields?: boolean;
-  allowPropertyFields?: boolean;
-  allowAdditionalPage?: boolean;
-  excludedFields?: string[] | null;
-  designerQueryAmount?: string | number;
-  allowedAddOns?: any;
-  allowedTemplateSections?: any;
-  propertyOfferCost?: number;
-  customPropertyOfferCost?: number;
-  gsvCost?: number;
-  selectedTemplateType?: string | null;
-  currentTheme?: string | null | undefined;
-  onReturnAndNavigate?: () => void;
-  onGetCustomFields?: () => Promise<any>;
-  onDuplicateTemplate?: (payload: any) => Promise<any>;
-  onCreateCustomTemplateQuery?: (payload: any) => Promise<any>;
-  onGetOneTemplate?: (payload: any) => Promise<any>;
-  onGetTemplates?: (payload: any) => Promise<any>;
-  onSubmit?: (payload: any) => Promise<any>;
-  onGetBrandingImages?: (payload: any) => Promise<any>;
-  onDeleteBrandingImage?: (id: string | number) => Promise<void>;
-  onUploadBrandingImage?: (payload: any) => Promise<any>;
-  onGetQRCodes?: (payload: any) => Promise<any>;
-  onDeleteQRCodes?: (id: string | number) => Promise<void>;
-  onUploadQRCode?: (payload: any) => Promise<any>;
-  onEditQRCode?: (payload: any) => Promise<any>;
-}
-
-const TemplateBuilder: React.FC<TemplateBuilderProps> = ({
-  store,
-  platformName,
-  templateGalleryModal,
-  createTemplateRoute,
-  designerTemplateQuery,
-  olcTemplate,
-  allowSenderFields,
-  excludedFields,
-  designerQueryAmount,
-  allowPropertyFields,
-  allowedAddOns,
-  allowedTemplateSections,
-  allowAdditionalPage,
-  propertyOfferCost,
-  customPropertyOfferCost,
-  gsvCost,
-  selectedTemplateType,
-  currentTheme,
-  onCreateCustomTemplateQuery,
-  onReturnAndNavigate,
-  onGetOneTemplate,
-  onGetCustomFields,
-  onDuplicateTemplate,
-  onGetTemplates,
-  onSubmit,
-  onGetBrandingImages,
-  onDeleteBrandingImage,
-  onUploadBrandingImage,
-  onGetQRCodes,
-  onDeleteQRCodes,
-  onUploadQRCode,
-  onEditQRCode,
-}) => {
-  const [isStoreUpdated, setIsStoreUpdated] = useState(false);
-  const [isDuplication, setIsDuplication] = useState(false);
-  const [switchTabCount, setSwitchTabCount] = useState(1);
-  const [selectedSection, setSelectedSection] = useState('text');
-
-  const { id } = useParams();
-  const dispatch: AppDispatch = useDispatch();
-  const navigate = useNavigate();
-
-  const template = useSelector(
-    (state: RootState) => state.templates.template
-  ) as Record<string, any>;
-  const product = useSelector(
-    (state: RootState) => state.templates.product
-  ) as Record<string, any>;
-  const envelopeType = useSelector(
-    (state: RootState) => state.templates.envelopeType
-  );
-  const allProducts = useSelector((state: RootState) => state.templates.products);
-
-  const currentTemplateType = product?.productType;
-
-  const currentProductId = +product?.id;
-
-  const containerStyle = {
-    width: '100vw',
-    height: currentTheme === 'v2' ? 'calc(100vh - 106px)' : '90vh',
-    position: 'relative',
-  };
-
-  useEffect(() => {
-    if (olcTemplate) {
-      handleLoadTemplate();
-    }
-  }, [olcTemplate]);
-
-  useEffect(() => {
-    if (designerTemplateQuery) {
-      setTimeout(() => {
-        handleLoadDesignerTemplate();
-      }, 100);
-    }
-  }, [designerTemplateQuery]);
-
-  // Event listener for visibility change
-  useEffect(() => {
-    const handleVisibilityChange = () => {
-      if (document.hidden) {
-        setSwitchTabCount((prev) => prev + 1);
-      }
-    };
-
-    const handleClick = (event: MouseEvent) => {
-      if (
-        event.target instanceof Element &&
-        event.target.closest('.polotno-side-tabs-container') &&
-        store?.openedSidePanel !== 'Templates'
-      ) {
-        setSelectedSection(store?.openedSidePanel);
-      }
-    };
-
-    document.addEventListener('click', handleClick);
-    document.addEventListener('visibilitychange', handleVisibilityChange);
-
-    return () => {
-      document.removeEventListener('visibilitychange', handleVisibilityChange);
-      document.removeEventListener('click', handleClick);
-    };
-  }, []);
-
-  useEffect(() => {
-    removeItem('hireDesignerFormState');
-    removeItem('queryFiles');
-  }, [])
-
-  useEffect(() => {
-    if (!product && !olcTemplate && !id && !designerTemplateQuery) {
-      navigate(createTemplateRoute || '/create-template');
-    }
-  }, []);
-
-  // @ts-ignore
-  useEffect(() => {
-    if (product || (id && onGetOneTemplate)) {
-      setGoogleFonts(fonts);
-
-      if (id && onGetOneTemplate) {
-        try {
-          onGetOneTemplate(id).then((template) => {
-            if (template) {
-              dispatch({ type: GET_ONE_TEMPLATE, payload: { data: template } });
-              addSafetyBordersForTemplates(template?.product?.id, store);
-              dispatch({ type: TEMPLATE_LOADING, payload: true });
-            } else {
-              dispatch(failure('Unable to load the Template'));
-              setTimeout(() => {
-                navigate(createTemplateRoute || '/create-template');
-              }, 1000);
-            }
-          });
-        } catch (error) {
-          return error;
-        } finally {
-          dispatch({ type: TEMPLATE_LOADING, payload: false });
-        }
-        // @ts-ignore
-      } else if (store.pages.length === 0 && !olcTemplate) {
-        createInitialPage();
-      }
-
-      fetchCustomFields();
-
-      const handleChange = () => {
-        if (!isStoreUpdated) {
-          setIsStoreUpdated(true);
-          setIsDuplication(false);
-        }
-      };
-
-      const off = store.on('change', handleChange);
-
-      return () => {
-        store.history.clear();
-        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));
-        off();
-      };
-    }
-  }, []);
-
-  useEffect(() => {
-    if (!id && !olcTemplate && product && store.pages.length === 0) {
-      createInitialPage();
-    }
-  }, [product]);
-
-  useEffect(() => {
-    const handleBeforeUnload = (event: { returnValue: string }) => {
-      const message = 'Are you sure you want to leave?';
-      event.returnValue = message;
-      return message;
-    };
-
-    const addBeforeUnloadListener = () => {
-      window.removeEventListener('beforeunload', handleBeforeUnload);
-      window.addEventListener('beforeunload', handleBeforeUnload);
-    };
-
-    const removeBeforeUnloadListener = () => {
-      window.removeEventListener('beforeunload', handleBeforeUnload);
-    };
-
-    if (isStoreUpdated && !isDuplication) {
-      addBeforeUnloadListener();
-    }
-
-    return () => {
-      removeBeforeUnloadListener();
-    };
-  }, [isStoreUpdated, isDuplication]);
-
-  const fetchCustomFields = async () => {
-    if (onGetCustomFields) {
-      const allCustomFields: any = await onGetCustomFields();
-      const platformFields: any = [];
-      const customFields: any = [];
-
-
-      if (allCustomFields?.version === 'v2') {
-        const flattenedFields = allCustomFields.customFields.flatMap((section: { fields: any; }) => section.fields);
-
-        for (const field of flattenedFields) {
-          (field.isPlatformField ? platformFields : customFields).push(field);
-        }
-        const filteredCustomFields = allCustomFields?.customFields
-          .map((customField: any) => ({
-            ...customField,
-            fields: customField.fields.filter((field: any) => customFields.includes(field))
-          }))
-          .filter((section: { fields: any[] }) => section.fields.length > 0);
-
-        if (allCustomFields?.customFields?.length) {
-          dispatch({ type: SET_CUSTOM_FIELDS, payload: [] });
-          dispatch({ type: SET_CUSTOM_FIELDS_V2, payload: filteredCustomFields });
-        } else {
-          dispatch({ type: SET_CUSTOM_FIELDS, payload: [] });
-          dispatch({ type: SET_CUSTOM_FIELDS_V2, payload: [] });
-        }
-
-        if (platformFields.length) {
-          dispatch({ type: SET_PLATFORM_FIELDS, payload: platformFields });
-        } else {
-          dispatch({ type: SET_PLATFORM_FIELDS, payload: [] });
-        }
-
-      } else {
-
-        for (const field of allCustomFields) {
-          (field.isPlatformField ? platformFields : customFields).push(field);
-        }
-
-        if (customFields.length) {
-          dispatch({ type: SET_CUSTOM_FIELDS, payload: customFields });
-        } else {
-          dispatch({ type: SET_CUSTOM_FIELDS, payload: [] });
-        }
-
-        if (platformFields.length) {
-          dispatch({ type: SET_PLATFORM_FIELDS, payload: platformFields });
-        } else {
-          dispatch({ type: SET_PLATFORM_FIELDS, payload: [] });
-        }
-      }
-    }
-  };
-
-  const createInitialPage = async () => {
-    if (product) {
-      const activePanel = selectedTemplateType === 'prebuilt' ? 'Templates' : 'text';
-      activePanel === 'text' && store.openSidePanel(activePanel);
-      store.addPage();
-      const paperSize = product?.selectedSize?.split('x');
-      store.setUnit({
-        unit: 'in',
-        dpi: DPI,
-      });
-      store.setSize(+paperSize[1] * DPI, +paperSize[0] * DPI);
-      if (multiPageLetters.includes(product.productType)) {
-        store.addPage();
-        store.selectPage(store.pages[0].id);
-      }
-      //@ts-ignore
-      drawRestrictedAreaOnPage(store, product, envelopeType);
-      addIdentifiersForTemplates(product.id, store);
-      if (currentTemplateType === 'Real Penned Letter' && +product?.id === 16) {
-        handleRealPennedLetters();
-      }
-      dispatch(clearQrFields());
-      dispatch({ type: SET_ROS_OFFER_PERCENTAGE, payload: '' });
-      dispatch({ type: SET_BLOCK_COLOR, payload: DEFAULT_RESTRICTED_AREA_BG });
-      dispatch(setPageCount(store?.pages?.length));
-      if (activePanel === 'Templates') {
-        setTimeout(() => {
-          store.openSidePanel(activePanel);
-        }, 1500)
-      }
-      store.history.clear();
-    }
-
-    setIsStoreUpdated(false);
-  };
-
-  const handleRealPennedLetters = async () => {
-    try {
-      // Load Lexi Regular Fonts Into Store
-      store.addFont({
-        fontFamily: 'lexi Regular',
-        url: LexiRegularFont,
-      });
-      addElementsforRealPennedLetters(store);
-
-      const response = await fetch(LexiRegularFont);
-      const blob = await response.blob();
-
-      const reader = new FileReader();
-      // Load Lexi Regular Base64 into JSON
-      reader.onloadend = () => {
-        store.addFont({
-          fontFamily: 'lexi Regular',
-          url: reader.result,
-        } as any);
-      };
-      reader.readAsDataURL(blob);
-    } catch (error) {
-      console.error('Error loading the font file:', error);
-    }
-  };
-
-  const handleLoadDesignerTemplate = async () => {
-    if (designerTemplateQuery?.title && designerTemplateQuery?.product) {
-      const flatProducts = allProducts.flatMap(product =>
-        product.size.map((sizeItem: any) => ({
-          id: sizeItem.id || product.id,
-          title: product.title,
-          productType: product.productType,
-          size: [{ id: sizeItem.id || product.id, size: sizeItem.size }],
-          ...(product.windowed !== undefined && { windowed: product.windowed })
-        }))
-      );
-      const selectedProduct = flatProducts.find((product) => product.id === designerTemplateQuery?.product?.id);
-      if (selectedProduct) {
-        dispatch({ type: CLEAR_REDUX });
-        dispatch({ type: SET_ROS_OFFER_PERCENTAGE, payload: '' });
-        dispatch({ type: SET_BLOCK_COLOR, payload: DEFAULT_RESTRICTED_AREA_BG });
-        dispatch(setPageCount(store?.pages?.length));
-        store.clear();
-        store.history.clear();
-        dispatch(searchAndAdvanceChange('title', designerTemplateQuery?.title));
-        if (selectedProduct.productType === 'Professional Letters') {
-          let selectedEnvelope = selectedProduct.id == 2 ? '#10 Double-Window' : '#10 Grey'
-          dispatch(searchAndAdvanceChange('envelopeType', selectedEnvelope));
-        }
-        dispatch(selectProduct(selectedProduct));
-        return;
-      }
-    }
-    onReturnAndNavigate ? onReturnAndNavigate() : navigate(createTemplateRoute || '/');
-  };
-
-  const handleLoadTemplate = async () => {
-    const existingTemplate = olcTemplate;
-    if (existingTemplate) {
-      dispatch({ type: GET_ONE_TEMPLATE, payload: { data: existingTemplate } });
-      const workspaceElement = document.querySelector(
-        '.polotno-workspace-container'
-      );
-      if (workspaceElement) {
-        workspaceElement.classList.add('show-loader');
-      }
-      // @ts-ignore
-      const paperDimensions = existingTemplate?.product?.paperSize.split('x');
-      store.setUnit({
-        unit: 'in',
-        dpi: 96,
-      });
-      store.setSize(+paperDimensions[1] * DPI, +paperDimensions[0] * DPI);
-      let jsonData = await getFileAsBlob(existingTemplate?.templateUrl);
-      if (existingTemplate?.product?.productType === 'Snap Pack Mailers') {
-        const updatedBoxes = changeColorOfBoxesForSnapPack(jsonData, true, true);
-        jsonData = updatedBoxes;
-      }
-      if (existingTemplate?.product?.productType === 'Real Penned Letter' && +existingTemplate?.product?.id === 16) {
-        let clonedJson = JSON.stringify(jsonData)
-          .replace(/{{/g, '((')
-          .replace(/}}/g, '))');
-        jsonData = JSON.parse(clonedJson);
-      }
-      const RistrictedBoxColor = extractCustomRistrictedBoxColor(jsonData);
-      dispatch({ type: SET_BLOCK_COLOR, payload: RistrictedBoxColor ? RistrictedBoxColor : DEFAULT_RESTRICTED_AREA_BG });
-      dispatch(setPageCount(store?.pages?.length));
-      store.loadJSON(jsonData);
-      await store.waitLoading();
-      dispatch(clearQrFields());
-      if (allowedAddOns?.includes('custom_property_offer') && existingTemplate?.meta?.rosOfferPercentage) {
-        dispatch({ type: SET_ROS_OFFER_PERCENTAGE, payload: existingTemplate?.meta?.rosOfferPercentage });
-      } else {
-        dispatch({ type: SET_ROS_OFFER_PERCENTAGE, payload: '' });
-      }
-      setIsStoreUpdated(false);
-      addSafetyBordersForTemplates(existingTemplate?.product?.id, store);
-      dispatch({ type: TEMPLATE_LOADING, payload: false });
-      if (workspaceElement) {
-        workspaceElement.classList.add('hide-loader');
-      }
-    }
-  };
-
-  // Incase of Real Penned Letters hide tooltip
-  const Tooltip = () => null;
-
-  return (
-    <>
-      <Typography className="hideTemplateBuilder">
-        {MESSAGES.TEMPLATE_MESSAGE_ON_SMALL_SCREEN}
-      </Typography>
-      <div className="polotno-container">
-        {switchTabCount > 0 && (
-          <div className="builder-wrapper">
-            <TopNavigation
-              store={store}
-              isStoreUpdated={isStoreUpdated}
-              olcTemplate={olcTemplate}
-              designerTemplateQuery={designerTemplateQuery}
-              onDuplicateTemplate={onDuplicateTemplate}
-              setIsDuplication={setIsDuplication}
-              onReturnAndNavigate={onReturnAndNavigate}
-              allowedAddOns={allowedAddOns}
-              allowAdditionalPage={allowAdditionalPage}
-              currentTheme={currentTheme}
-              onSubmit={onSubmit}
-            />
-
-            <PolotnoContainer style={containerStyle}>
-              <SidePanel
-                store={store}
-                currentTemplateType={currentTemplateType}
-                currentProductId={currentProductId}
-                platformName={platformName}
-                templateGalleryModal={templateGalleryModal}
-                allowSenderFields={allowSenderFields}
-                allowPropertyFields={allowPropertyFields}
-                excludedFields={excludedFields}
-                designerQueryAmount={designerQueryAmount}
-                allowedAddOns={allowedAddOns}
-                allowedTemplateSections={allowedTemplateSections}
-                propertyOfferCost={propertyOfferCost}
-                customPropertyOfferCost={customPropertyOfferCost}
-                gsvCost={gsvCost}
-                selectedSection={selectedSection}
-                currentTheme={currentTheme}
-                onGetTemplates={onGetTemplates}
-                onGetOneTemplate={onGetOneTemplate}
-                onGetCustomFields={onGetCustomFields}
-                onCreateCustomTemplateQuery={onCreateCustomTemplateQuery}
-                onGetBrandingImages={onGetBrandingImages}
-                onDeleteBrandingImage={onDeleteBrandingImage}
-                onUploadBrandingImage={onUploadBrandingImage}
-                onGetQRCodes={onGetQRCodes}
-                onDeleteQRCodes={onDeleteQRCodes}
-                onUploadQRCode={onUploadQRCode}
-                onEditQRCode={onEditQRCode}
-                selectedTemplateType={selectedTemplateType}
-              />
-              <WorkspaceWrap>
-                {+product?.id !== 16 && (
-                  <Toolbar store={store} downloadButtonEnabled={false} />
-                )}
-                {+product?.id !== 16 ? (
-                  <Workspace store={store} pageControlsEnabled={false} />
-                ) : (
-                  <Workspace
-                    store={store}
-                    pageControlsEnabled={false}
-                    components={{ Tooltip }}
-                  />
-                )}
-                <ZoomButtons store={store} />
-              </WorkspaceWrap>
-            </PolotnoContainer>
-            <GenericSnackbar />
-          </div>
-        )}
-      </div>
-    </>
-  );
-};
-
-export default TemplateBuilder;

package/src/components/TemplateBuilder/styles.scss

@@ -1,100 +0,0 @@
-.polotno-container {
-  .builder-wrapper {
-    @media (max-width: 600px) {
-      display: none;
-    }
-    .polotno-side-panel {
-      & .polotno-side-tabs-container {
-        & .polotno-side-tabs-inner {
-          & .polotno-side-panel-tab {
-            color: var(--text-color);
-            &.active,
-            &:hover {
-              background-color: var(--secondary-color);
-              opacity: 0.8;
-              color: var(--primary-color);
-              svg {
-                color: var(--primary-color);
-                path {
-                  fill: var(--primary-color) !important;
-                }
-              }
-              .address-block-icon{
-                path {
-                  fill: transparent !important;
-                }
-              }
-            }
-          }
-        }
-      }
-      & .polotno-panel-container {
-        & > div > p {
-          display: none;
-        }
-        .bp5-tabs {
-          .bp5-tab-list {
-            .bp5-tab-indicator-wrapper {
-              .bp5-tab-indicator {
-                background-color: var(--primary-color);
-              }
-            }
-            .bp5-tab[aria-selected='true'] {
-              color: var(--primary-color);
-              &:focus {
-                outline: none;
-              }
-            }
-            .bp5-tab[aria-selected='false'] {
-              color: #000;
-              &:focus {
-                outline: none;
-              }
-            }
-          }
-        }
-      }
-    }
-    .polotno-workspace-container {
-      background-color: transparent !important;
-    }
-  }
-
-  .show-loader {
-    &::after {
-      content: '';
-      position: absolute;
-      width: 50px;
-      height: 50px;
-      top: 50%;
-      left: 50%;
-      border-radius: 50%;
-      border: 4px solid var(--primary-color);
-      border-right: 3px solid transparent;
-      transform: translate(-50%, -50%);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      animation: circularAnimation 2s linear infinite;
-    }
-
-    @keyframes circularAnimation {
-      0% {
-        transform: translate(-50%, -50%) rotate(0deg);
-      }
-      100% {
-        transform: translate(-50%, -50%) rotate(360deg);
-      }
-    }
-  }
-
-  .hide-loader {
-    &::after {
-      display: none !important; /* Hide the pseudo-element */
-    }
-  }
-
-  .bp5-popover-transition-container {
-    z-index: 2200 !important;
-  }
-}