@openlettermarketing/olc-react-sdk 0.0.19 → 0.0.21

package/src/components/TemplateBuilder/index.tsx

@@ -1,301 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-// Import Polotno and third-party libraries
-import { PolotnoContainer, WorkspaceWrap } from 'polotno';
-import { setUploadFunc } from 'polotno/config';
-import { Toolbar } from 'polotno/toolbar/toolbar';
-import { ZoomButtons } from 'polotno/toolbar/zoom-buttons';
-import { Workspace } from 'polotno/canvas/workspace';
-import { setGoogleFonts } from 'polotno/config';
-import merge from 'deepmerge';
-
-// 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 {
-  getAllCustomFields,
-  getOneTemplate,
-  uploadFile,
-} from '../../redux/actions/templateActions';
-import { TEMPLATE_LOADING } from '../../redux/actions/action-types';
-
-
-// Utils
-import { drawRestrictedAreaOnPage, getFileAsBlob } from '../../utils/template-builder';
-import { addElementsforRealPennedLetters } from '../../utils/templateRestrictedArea/realPenned';
-import { DPI, multiPageLetters } from '../../utils/constants';
-// @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 GenericSnackbar from '../GenericUIBlocks/GenericSnackbar';
-
-import './styles.scss';
-
-setUploadFunc(uploadFile)
-/**
- * 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.
- */
-
-// styles
-import './styles.scss'
-
-interface TemplateBuilderProps {
-  store: StoreType,
-  returnRoute?: string | null,
-  styles?: React.CSSProperties;
-}
-
-const TemplateBuilder: React.FC<TemplateBuilderProps> = ({ store, styles, returnRoute }) => {
-  const [isStoreUpdated, setIsStoreUpdated] = useState(false);
-  const [switchTabCount, setSwitchTabCount] = useState(1);
-
-  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 currentTemplateType = product?.productType;
-
-  const containerStyle = merge(
-    {
-      width: '100vw',
-      height: '90vh',
-      position: 'relative',
-      backgroundColor: 'var(--mainBackgroundColor) !important',
-    },
-    styles || {}
-  );
-
-  useEffect(() => {
-    handleLoadTemplate();
-  }, [template]);
-
-  // Event listener for visibility change
-  useEffect(() => {
-    const handleVisibilityChange = () => {
-      if (document.hidden) {
-        setSwitchTabCount((prev) => prev + 1);
-      }
-    };
-
-    document.addEventListener("visibilitychange", handleVisibilityChange);
-
-    return () => {
-      document.removeEventListener("visibilitychange", handleVisibilityChange);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (!product) {
-      navigate('/create-template');
-    }
-  }, []);
-
-
-  useEffect(() => {
-    if (product) {
-      setGoogleFonts(fonts);
-      // remove this component from the history stack
-
-      if (id) {
-        // @ts-ignore
-        dispatch(getOneTemplate(id));
-      } else if (store.pages.length === 0) {
-        createInitialPage();
-
-      }
-      dispatch(getAllCustomFields());
-
-      const handleChange = () => {
-        if (!isStoreUpdated) {
-          setIsStoreUpdated(true);
-        }
-      };
-
-      const off = store.on("change", handleChange);
-
-      return () => {
-        store.history.clear();
-        store.clear();
-        off();
-      };
-    }
-  }, []);
-
-  useEffect(() => {
-    if (!id && 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) {
-      addBeforeUnloadListener();
-    }
-
-    return () => {
-      removeBeforeUnloadListener();
-    };
-  }, [isStoreUpdated]);
-
-  const createInitialPage = async () => {
-    if (product) {
-
-      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);
-
-      if (currentTemplateType === "Real Penned Letter") {
-        handleRealPennedLetters();
-      }
-
-      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 handleLoadTemplate = async () => {
-    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);
-      const jsonData = await getFileAsBlob(template?.templateUrl);
-      store.loadJSON(jsonData);
-      await store.waitLoading();
-      setIsStoreUpdated(false);
-      dispatch({ type: TEMPLATE_LOADING, payload: false });
-      if (workspaceElement) {
-        workspaceElement.classList.add("hide-loader");
-      }
-    }
-  };
-
-  // Incase of Real Penned Letters hide tooltip
-  const Tooltip = () => null;
-
-  return (
-    <div className="polotno-container">
-      {switchTabCount > 0 && (
-        <div className='builder-wrapper'>
-          <TopNavigation
-            store={store}
-            isStoreUpdated={isStoreUpdated}
-            returnRoute={returnRoute}
-          />
-
-          <PolotnoContainer
-            style={containerStyle}
-          >
-            <SidePanel store={store} currentTemplateType={currentTemplateType} />
-            <WorkspaceWrap>
-              {currentTemplateType !== "Real Penned Letter" && (
-                <Toolbar store={store} downloadButtonEnabled={false} />
-              )}
-              {currentTemplateType !== "Real Penned Letter" ? (
-                <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,66 +0,0 @@
-.polotno-container {
-  .builder-wrapper {
-    @media (max-width: 600px) {
-      display: none;
-    }
-    .polotno-side-panel {
-      & .polotno-side-tabs-container {
-        background-color: var(--sidepanelBgColor);
-        & .polotno-side-tabs-inner {
-          & .polotno-side-panel-tab {
-            color: var(--sidepanelTextColor);
-            &.active,
-            &:hover {
-              background-color: var(--sidepanelOptionHoverColor);
-              opacity: 0.8;
-              color: var(--sidepanelTextColorHover);
-              svg {
-                color: var(--primaryColor);
-                path {
-                  stroke: var(--primaryColor) !important;
-                }
-                line {
-                  stroke: var(--primaryColor) !important;
-                }
-              }
-            }
-          }
-        }
-      }
-      & .polotno-panel-container {
-        background-color: var(--mainBackgroundColor);
-        & > div > p {
-          display: none;
-        }
-        .bp5-tabs {
-          .bp5-tab-list {
-            .bp5-tab-indicator-wrapper {
-              .bp5-tab-indicator {
-                background-color: var(--primaryColor);
-              }
-            }
-            .bp5-tab[aria-selected='true'] {
-              color: var(--primaryColor);
-              &:focus {
-                outline: none;
-              }
-            }
-            .bp5-tab[aria-selected='false'] {
-              color: var(--textColor);
-              &:focus {
-                outline: none;
-              }
-            }
-          }
-        }
-      }
-    }
-    .polotno-workspace-container {
-      background-color: transparent !important;
-    }
-  }
-}
-
-.bp5-popover-transition-container {
-  z-index: 2200 !important;
-}

package/src/components/TopNavigation/ConfirmNavigateDialog/index.tsx

@@ -1,58 +0,0 @@
-import React from "react";
-
-// Utils
-import { MESSAGES } from "../../../utils/message";
-
-// Components
-import Dialog from '../../GenericUIBlocks/Dialog';
-
-// images
-import ModalCross from '../../../assets/images/modal-icons/modal-cross';
-
-// Styles
-import "./styles.scss";
-
-
-/**
- * ConfirmNavigateDialog Component
- * A modal for duplicating a template.
- *
- * @param {boolean} open - Boolean indicating whether the modal is open.
- * @param {Function} handleClose - Function to handle the closing of the modal.
- * @returns {JSX.Element} The duplicate template modal component.
- *
- */
-
-const cancelDialogStyles = {
-  maxWidth: '450px',
-  minHeight: '260px',
-};
-
-// Define the props type
-interface ConfirmNavigateDialogProps {
-  open: boolean;
-  handleClose: () => void;
-  handleNavigateAction: () => void;
-}
-
-
-const ConfirmNavigateDialog: React.FC<ConfirmNavigateDialogProps> = ({ open, handleClose, handleNavigateAction }) => {
-
-  return (
-    <Dialog
-      icon={<ModalCross fill="var(--primaryColor)" />}
-      customStyles={cancelDialogStyles}
-      open={open}
-      handleClose={handleClose}
-      title={MESSAGES.TEMPLATE.CANCEL.TITLE}
-      subHeading={MESSAGES.TEMPLATE.CANCEL.HEADING}
-      description={MESSAGES.TEMPLATE.CANCEL.PARAGRAPH}
-      onSubmit={handleNavigateAction}
-      onCancel={handleClose}
-      cancelText={MESSAGES.TEMPLATE.CANCEL.BACK_BUTTON}
-      submitText={MESSAGES.TEMPLATE.CANCEL.CANCEL_BUTTON}
-    />
-  );
-};
-
-export default ConfirmNavigateDialog;

package/src/components/TopNavigation/ConfirmNavigateDialog/styles.scss

@@ -1,123 +0,0 @@
-.confirmCancelTemplateLeaveModal {
-  .MuiPaper-root {
-    width: 100% !important;
-    max-width: 407px !important;
-    height: 100% !important;
-    max-height: 258px !important;
-    margin: 0 auto !important;
-    border-radius: 11px;
-    background: #fff8ee;
-  }
-
-  .confirmTemplateLeaveModalTitle {
-    color: #ed5c2f;
-    text-align: center;
-    font-size: 22px;
-    font-style: normal;
-    font-weight: 700;
-    line-height: normal;
-  }
-
-  .confirmTemplateLeaveModalContent {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    padding: 16px 16px 0px 16px !important;
-
-    .trashIconWrapper {
-      text-align: center;
-
-      p {
-        color: #ed5c2f;
-        text-align: center;
-        font-size: 22px;
-        font-style: normal;
-        font-weight: 700;
-        line-height: normal;
-        margin-top: 12px;
-      }
-    }
-
-    .confirmTemplateLeaveText {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      gap: 10px;
-
-      p {
-        color: #000;
-        text-align: center;
-        font-size: 16px;
-        font-style: normal;
-        font-weight: 600;
-        line-height: normal;
-
-        &:last-child {
-          color: #000;
-          text-align: center;
-          font-size: 14px;
-          font-style: normal;
-          font-weight: 400;
-          line-height: 16px;
-          /* 114.286% */
-          letter-spacing: 0.28px;
-          margin: 0;
-        }
-      }
-    }
-
-    .MuiInputBase-root {
-      border-radius: 7px;
-      border: 0.5px solid #303030;
-      background: #fff;
-      width: 100%;
-      padding: 10px 22px;
-
-      &:focus,
-      &:focus-visible {
-        outline: none !important;
-      }
-
-      &::after,
-      &::before {
-        display: none !important;
-      }
-    }
-  }
-
-  .actionBtns {
-    justify-content: center;
-    align-items: center;
-    margin-bottom: 13px;
-    gap: 11px;
-
-    button {
-      border-radius: 3px !important;
-      text-transform: capitalize;
-
-      &:first-child {
-        border: 0.5px solid rgba(48, 48, 48, 0.5);
-        background: #fff;
-        color: #000;
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 600;
-        line-height: normal;
-        min-width: 100px !important;
-        min-height: 40px !important;
-      }
-
-      &:last-child {
-        color: #fff;
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 600;
-        line-height: normal;
-        background: #ed5c2f;
-        max-width: 146px !important;
-        min-height: 40px !important;
-      }
-    }
-  }
-}

package/src/components/TopNavigation/EditTemplateNameModel/index.tsx

@@ -1,98 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-// Hooks
-import { useDispatch, useSelector } from 'react-redux';
-import { RootState, AppDispatch } from '../../../redux/store';
-
-// Actions
-import { searchAndAdvanceChange } from '../../../redux/actions/templateActions';
-import { failure } from '../../../redux/actions/snackbarActions';
-
-// Utils
-import { MESSAGES } from '../../../utils/message';
-
-// UI Components
-import Dialog from '../../../components/GenericUIBlocks/Dialog';
-import Input from '../../../components/GenericUIBlocks/Input';
-
-// Styles
-import './styles.scss';
-
-
-/**
- * EditTemplateNameModel Component
- * A modal for duplicating a template.
- *
- * @param {boolean} open - Boolean indicating whether the modal is open.
- * @param {Function} handleClose - Function to handle the closing of the modal.
- * @returns {JSX.Element} The duplicate template modal component.
- *
- */
-
-interface EditTemplateNameModelProps {
-  open: boolean;
-  handleClose: () => void;
-}
-
-const editDialogStyles = {
-  maxWidth: '630px',
-  minHeight: '210px',
-};
-
-const EditTemplateNameModel: React.FC<EditTemplateNameModelProps> = ({
-  open,
-  handleClose,
-}) => {
-  const [title, setTitle] = useState('');
-
-  const dispatch: AppDispatch = useDispatch();
-
-  const templateTitle =
-    useSelector((state: RootState) => state.templates.title) || '';
-
-  useEffect(() => {
-    setTitle(templateTitle);
-  }, []);
-
-  // Handle the duplication of the template
-  const handleEditName = async () => {
-    let errorText = '';
-    if (!title) {
-      errorText = MESSAGES.TEMPLATE.NAME_REQUIRED;
-    } else if (title.length > 50) {
-      errorText = MESSAGES.TEMPLATE.NAME_LESS_50;
-    }
-    if (errorText) {
-      dispatch(failure(errorText));
-      return;
-    }
-    dispatch(searchAndAdvanceChange('title', title.trim()));
-    handleClose();
-  };
-
-  return (
-    <Dialog
-      open={open}
-      loading={false}
-      handleClose={handleClose}
-      title="Edit Template Name"
-      cancelText={MESSAGES.TEMPLATE.SAVE.CANCEL_BUTTON}
-      submitText="Save"
-      customStyles={editDialogStyles}
-      onSubmit={handleEditName}
-      onCancel={handleClose}
-    >
-      <Input
-        variant="input"
-        type="text"
-        label="Template Name"
-        placeholder="Holidays"
-        value={title}
-        onChange={e => setTitle(e.target.value)}
-      />
-    </Dialog>
-  );
-};
-
-export default EditTemplateNameModel;
-