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

package/src/components/TemplateBuilder/index.tsx

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

@@ -0,0 +1,100 @@
+.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;
+  }
+}