@openlettermarketing/olc-react-sdk 0.0.8 → 0.0.10

package/src/components/TemplateBuilder/index.tsx

@@ -0,0 +1,295 @@
+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 './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');
+    }
+
+    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}
+          >
+            {currentTemplateType !== "Real Penned Letter" &&
+              <SidePanel store={store} />
+            }
+            <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>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TemplateBuilder;
+
+

package/src/components/TemplateBuilder/styles.scss

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

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

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

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