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

package/src/components/GenericUIBlocks/Typography/index.tsx

@@ -0,0 +1,18 @@
+import React, { CSSProperties, ReactNode } from 'react';
+
+// styles
+import './styles.scss';
+
+interface TypographyProps {
+  children?: ReactNode;
+  style?: CSSProperties;
+  variant?: keyof JSX.IntrinsicElements;
+  className?: string;
+}
+
+const Typography: React.FC<TypographyProps> = ({ children = '', style = {}, variant = 'p', className = '' }) => {
+  const Tag = variant || 'p';
+  return <Tag className={className} style={style}>{children}</Tag>;
+};
+
+export default Typography;

package/src/components/GenericUIBlocks/Typography/styles.scss

@@ -0,0 +1,27 @@
+.basic-typo{
+    font-weight: 500;
+    margin: 0;
+    width: 100%;
+    margin: 0;
+    h1{
+        font-size: 50px;
+    }
+    h2{
+        font-size: 45px;
+    }
+    h3{
+        font-size: 40px;
+    }
+    h4{
+        font-size: 35px;
+    }
+    h5{
+        font-size: 30px;
+    }
+    h6{
+        font-size: 25px;
+    }
+    p{
+        font-size: 18px;
+    }
+}

package/src/components/SidePanel/CustomAddOns/index.tsx

@@ -0,0 +1,342 @@
+import React, { CSSProperties, useEffect, useState } from 'react';
+
+// Plotno Library Imports
+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';
+
+// Hooks
+import { useDispatch, useSelector } from 'react-redux';
+import { AppDispatch, RootState } from '../../../redux/store';
+
+// Actions
+import { failure, success } from '../../../redux/actions/snackbarActions';
+import { SET_ROS_OFFER_PERCENTAGE } from '../../../redux/actions/action-types';
+
+// Utils
+import { MESSAGES } from '../../../utils/message';
+import { copyToClipboard, getEnv, getIsSandbox, getPublicApiKey } from '../../../utils/helper';
+
+// Components
+import Input from '../../GenericUIBlocks/Input';
+
+// MUI Components
+import GeneralTootip from '../../GenericUIBlocks/GeneralTooltip';
+import Typography from '../../GenericUIBlocks/Typography';
+import Button from '../../../components/GenericUIBlocks/Button';
+
+// Dummy Image for GSV
+import {
+  DEMO_PO_GENERATOR_URL,
+  DEMO_S3_URL,
+  GOOGLE_STREET_VIEW_IMAGE_URL,
+  PROD_PO_GENERATOR_URL,
+  PROD_S3_URL,
+  STAGE_PO_GENERATOR_URL,
+  STAGE_S3_URL,
+} from '../../../utils/constants';
+
+// Icons
+//@ts-ignore
+import CustomAddOnIcon from '../../../assets/images/templates/custom-add-on-icon';
+import ContentCopyIcon from '../../../assets/images/templates/content-copy-icon';
+import InfoIcon from '../../../assets/images/templates/info-icon';
+import GsvIcon from '../../../assets/images/templates/gsv-icon';
+import EpoIcon from '../../../assets/images/templates/epo-icon';
+
+import './styles.scss';
+
+type SideSection = typeof TemplatesSection;
+
+type CustomAddOnsSectionProps = {
+  store: StoreType;
+  onClick: () => void;
+  allowedAddOns?: any;
+  propertyOfferCost?: number;
+  customPropertyOfferCost?: number;
+  gsvCost?: number;
+};
+
+const iconButtonStyles: CSSProperties = {
+  backgroundColor: 'transparent',
+  position: 'absolute',
+  top: "10px",
+  right: "10px",
+  height: "auto"
+};
+
+// define the new custom section
+const CustomAddOns: SideSection = {
+  name: 'CustomAddOns',
+  Tab: observer(
+    (props: { store: StoreType; active: boolean; onClick: () => void }) => (
+      <SectionTab name="Add On's" {...props} iconSize={20}>
+        <CustomAddOnIcon />
+      </SectionTab>
+    )
+  ) as SideSection['Tab'],
+
+  // we need observer to update component automatically on any store changes
+  Panel: observer(({ store, allowedAddOns, propertyOfferCost, gsvCost, customPropertyOfferCost }: CustomAddOnsSectionProps) => {
+    const [customRosValue, setCustomRosValue] = useState('');
+
+    const currentTemplate = useSelector(
+      (state: RootState) => state.templates.template
+    ) as Record<string, any>;
+
+    const currentOfferPercentage = useSelector(
+      (state: RootState) => state.templates.offerPercentage
+    ) as string;
+
+    const dispatch: AppDispatch = useDispatch();
+
+    const googleStreetViewSrc: string =
+      (getEnv() === 'local' || getEnv() === 'staging'
+        ? STAGE_S3_URL
+        : getIsSandbox()
+          ? DEMO_S3_URL
+          : PROD_S3_URL) + GOOGLE_STREET_VIEW_IMAGE_URL;
+
+    const propertyOfferGeneratorURL: string =
+      (getEnv() === 'local' || getEnv() === 'staging'
+        ? STAGE_PO_GENERATOR_URL
+        : getIsSandbox()
+          ? DEMO_PO_GENERATOR_URL
+          : PROD_PO_GENERATOR_URL) + `?apiKey=${getPublicApiKey()}`;
+
+    const PropertyOfferfieldValue = '{{ROS.PROPERTY_OFFER}}';
+
+    const handleAddElementOnScreen = (
+      event: Event,
+      value: string,
+      type: string
+    ) => {
+      event.preventDefault();
+      const currentPage = store.activePage.toJSON();
+      if (type === 'gsv') {
+        if (
+          currentPage?.children?.length &&
+          currentPage.children.find(
+            (item: any) => item.id === `gsv-image_${store.activePage.id}`
+          )
+        ) {
+          dispatch(failure(MESSAGES.TEMPLATE.GSV_RESTRICT_ONE_PER_PAGE));
+          return;
+        }
+        store.activePage?.addElement({
+          id: `gsv-image_${store.activePage.id}`,
+          type: 'image',
+          src: googleStreetViewSrc,
+          width: 287,
+          height: 188,
+          contentEditable: false,
+          keepRatio: true,
+          opacity: 1,
+          custom: {
+            elementType: value,
+          },
+        });
+      } else if (type === 'rpo') {
+        const randomizedId = Math.random().toString(36).substring(2, 7);
+        store.activePage.addElement({
+          id: `ros_${randomizedId}`,
+          type: 'text',
+          x: 100,
+          y: 100,
+          text: value,
+          width: 175,
+          contentEditable: false,
+        });
+      } else if (type === 'custom_rpo') {
+        if (!customRosValue) {
+          percentageRequired();
+          return;
+        }
+        if (!validCustomRosRange()) return false;
+        dispatch({ type: SET_ROS_OFFER_PERCENTAGE, payload: customRosValue });
+        const randomizedId = Math.random().toString(36).substring(2, 7);
+        store.activePage.addElement({
+          id: `ros_${randomizedId}`,
+          type: 'text',
+          x: 100,
+          y: 100,
+          text: value,
+          width: 175,
+          contentEditable: false,
+          custom: {
+            ros_custom_value: customRosValue
+          }
+        });
+      }
+    };
+
+    const percentageRequired = () => dispatch(failure(`Please enter the offer percentage`));
+
+    const validCustomRosRange = () => {
+      if(+customRosValue < 1 || +customRosValue > 100) {
+        dispatch(failure(`Please enter an offer percentage between 1 and 100`));
+        return false;
+      }
+      return true;
+    }
+
+    const copyPropertyOfferField = (e: React.MouseEvent<HTMLDivElement>) => {
+      e.stopPropagation();
+      copyToClipboard(PropertyOfferfieldValue);
+      dispatch({ type: SET_ROS_OFFER_PERCENTAGE, payload: customRosValue });
+      dispatch(success(`ROS Property Offer Copied`));
+    };
+
+    useEffect(() => {
+      if (!allowedAddOns?.includes('custom_property_offer')) return;
+      if (currentOfferPercentage || currentOfferPercentage === "") {
+        setCustomRosValue(currentOfferPercentage);
+      } else if (currentTemplate?.meta?.rosOfferPercentage) {
+        setCustomRosValue(currentTemplate.meta.rosOfferPercentage);
+        dispatch({ type: SET_ROS_OFFER_PERCENTAGE, payload: currentTemplate.meta.rosOfferPercentage });
+      }
+    }, [allowedAddOns, currentOfferPercentage, currentTemplate?.meta?.rosOfferPercentage]);
+
+    return (
+      <div className="dynamic-content">
+        <div className="dynamic-content__top">
+          <div>
+            <span className="title">{MESSAGES.TEMPLATE.CUSTOM_ADD_ONS.TITLE}</span>{' '}
+            <InfoIcon fill="var(--primary-color)" className="infoIcon" />
+            <GeneralTootip
+              anchorSelect=".infoIcon"
+              place="bottom"
+              className='custom-add-on-tooltip'
+              title={MESSAGES.TEMPLATE.CUSTOM_ADD_ONS.DESCRIPTION}
+            />
+          </div>
+        </div>
+        {(!allowedAddOns || allowedAddOns?.includes('gsv')) && (
+          <div
+            className="addonBox"
+            onClick={(event: any) =>
+              handleAddElementOnScreen(event, 'GOOGLE_STREET_VIEW', 'gsv')
+            }
+          >
+            <GsvIcon />
+            <Typography>{MESSAGES.TEMPLATE.CUSTOM_ADD_ONS.GSV.TITLE}</Typography>
+            <Typography>
+              {gsvCost && typeof gsvCost === 'number'
+                ? '$' + gsvCost + MESSAGES.TEMPLATE.CUSTOM_ADD_ONS.GSV.CUSTOM_PRICE
+                : MESSAGES.TEMPLATE.CUSTOM_ADD_ONS.GSV.DESCRIPTION}
+            </Typography>
+          </div>
+        )}
+        {allowedAddOns?.includes('property_offer') && (
+          <div
+            className="addonBox"
+            style={{position: 'relative'}}
+            onClick={(event: any) =>
+              handleAddElementOnScreen(event, PropertyOfferfieldValue, 'rpo')
+            }
+          >
+            <Button
+              style={iconButtonStyles}
+              onClick={copyPropertyOfferField}
+              backdrop={false}
+            >
+              <ContentCopyIcon className="copy" />
+            </Button>
+            <EpoIcon />
+            <Typography>{MESSAGES.TEMPLATE.CUSTOM_ADD_ONS.PROPERTY_OFFER.TITLE}</Typography>
+            <Typography className="no-margin">
+              {MESSAGES.TEMPLATE.CUSTOM_ADD_ONS.PROPERTY_OFFER.DESCRIPTION}
+            </Typography>
+            <Typography>
+              {propertyOfferCost && typeof propertyOfferCost === 'number'
+                ? '$' + propertyOfferCost + MESSAGES.TEMPLATE.CUSTOM_ADD_ONS.PROPERTY_OFFER.CUSTOM_PRICE
+                : MESSAGES.TEMPLATE.CUSTOM_ADD_ONS.PROPERTY_OFFER.PRICE}
+            </Typography>
+          </div>
+        )}
+        {allowedAddOns?.includes('custom_property_offer') && (
+          <div
+            className="addonBox"
+            style={{position: 'relative'}}
+            onClick={(event: any) =>
+              handleAddElementOnScreen(
+                event,
+                PropertyOfferfieldValue,
+                'custom_rpo'
+              )
+            }
+          >
+            <Button
+              style={iconButtonStyles}
+              onClick={customRosValue ? copyPropertyOfferField : percentageRequired}
+              backdrop={false}
+            >
+              <ContentCopyIcon className="copy" />
+            </Button>
+            <EpoIcon />
+            <Typography>  {customPropertyOfferCost && typeof customPropertyOfferCost === 'number'
+              ? `Add an offer (+$${customPropertyOfferCost} per mail piece)`
+              : MESSAGES.TEMPLATE.CUSTOM_ADD_ONS.PROPERTY_OFFER.CUSTOM.TITLE}</Typography>
+            <Typography variant="h3" className="no-margin s-font">
+              {MESSAGES.TEMPLATE.CUSTOM_ADD_ONS.PROPERTY_OFFER.CUSTOM.DESCRIPTION}
+            </Typography>
+            <div style={{ margin: '12px' }} className='plain-text'>
+              <a href={propertyOfferGeneratorURL} target='_blank'
+                onClick={(e) => {
+                  e.stopPropagation()
+                }}
+                style={{
+                  color: 'var(--primary-color)',
+                }}
+              >
+                {MESSAGES.TEMPLATE.CUSTOM_ADD_ONS.PROPERTY_OFFER.CUSTOM.CLICK}
+              </a>{' '}
+              {MESSAGES.TEMPLATE.CUSTOM_ADD_ONS.PROPERTY_OFFER.CUSTOM.CSV_IMPORT}
+            </div>
+            <Typography className="no-margin s-font">
+              {customPropertyOfferCost && typeof customPropertyOfferCost === 'number'
+                ? `$${customPropertyOfferCost} per mail piece`
+                : MESSAGES.TEMPLATE.CUSTOM_ADD_ONS.PROPERTY_OFFER.CUSTOM.CUSTOM_PRICE}
+            </Typography>
+            <div
+              onClick={(e) => e.stopPropagation()}
+              style={{ width: '18rem', marginBottom: '15px' }}
+            >
+              {allowedAddOns?.includes('custom_property_offer') && (
+                <Input
+                  type="number"
+                  onlyNumber={true}
+                  placeholder={'Type in a Number between 1-100'}
+                  qrField={true}
+                  value={customRosValue}
+                  onChange={(e) => {
+                    const val = e.target.value;
+                    if (val === "") {
+                      setCustomRosValue("");
+                      dispatch({ type: SET_ROS_OFFER_PERCENTAGE, payload: "" });
+                      return;
+                    }
+                    const num = Number(val);
+                    if (!isNaN(num) && num >= 1 && num <= 100) {
+                      setCustomRosValue(val);
+                      dispatch({ type: SET_ROS_OFFER_PERCENTAGE, payload: val });
+                    } else {
+                      dispatch(failure("Please enter a number between 1 and 100"));
+                    }
+                  }}
+                />
+              )}
+            </div>
+          </div>
+        )}
+        <div className='no-result-addOns'>
+          {!allowedAddOns || allowedAddOns?.length === 0 && <Typography>{MESSAGES.TEMPLATE.CUSTOM_ADD_ONS.NO_RESULT}</Typography>}
+        </div>
+        <GeneralTootip anchorSelect=".copy" place="bottom" title="Copy" />
+      </div>
+    );
+  }) as unknown as SideSection['Panel'],
+};
+
+export default CustomAddOns;

package/src/components/SidePanel/CustomAddOns/styles.scss

@@ -0,0 +1,86 @@
+.gsv-contact-element {
+  width: 100%;
+  border-radius: 3px;
+  border: 0.5px solid #303030;
+  text-align: center;
+  height: 100px;
+  line-height: 35px;
+  margin: 5px auto;
+  display: flex;
+  justify-content: center;
+
+  span {
+    transform: translateY(30%);
+  }
+}
+
+.addonBox {
+  border-radius: 10px;
+  border: 1px solid #303030;
+  display: flex !important;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  margin-bottom: 10px;
+  cursor: pointer;
+
+  .no-margin {
+    margin: 0 !important;
+  }
+
+  p {
+    font-size: 16px;
+    font-style: normal;
+    color: #303030;
+    font-weight: 800;
+
+    &:last-child {
+      font-weight: 500;
+    }
+  }
+
+  .s-font {
+    font-weight: 600;
+    font-size: 14px;
+  }
+
+  .plain-text {
+    font-weight: 300;
+    font-size: 14px;
+    text-align: center;
+  }
+
+  svg {
+    width: 100px;
+    height: 120px;
+    opacity: 0.5;
+  }
+
+  .copy {
+    width: 30px !important;
+    height: 30px !important;
+  }
+}
+
+.hidden-important {
+  display: block !important;
+}
+
+.custom-po {
+  margin-top: -70% !important;
+}
+
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+input[type="number"] {
+    -moz-appearance: textfield;
+}
+
+.no-result-addOns {
+  display: flex;
+  justify-content: center;
+  margin: 3px;
+}

package/src/components/SidePanel/CustomBlockColors/index.tsx

@@ -0,0 +1,211 @@
+import React, { useState, useEffect } 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';
+
+// Hooks
+import { useDispatch, useSelector } from 'react-redux';
+import { AppDispatch, RootState } from '../../../redux/store';
+
+// Utils
+import { DEFAULT_RESTRICTED_AREA_BG, RESTRICTED_AREA_COLOR_PALETTE } from '../../../utils/constants';
+
+// Actions
+import { SET_BLOCK_COLOR } from '../../../redux/actions/action-types';
+import { success } from '../../../redux/actions/snackbarActions';
+
+// Components
+import Typography from '../../GenericUIBlocks/Typography';
+
+// Icons
+// @ts-ignore
+import AddressBlockIcon from '../../../assets/images/templates/address-block-icon';
+
+// styles
+import './styles.scss';
+
+type SideSection = typeof TemplatesSection;
+
+interface BlockColorsSectionProps {
+  store: StoreType;
+}
+
+const BlockColors: SideSection = {
+  name: 'address-block',
+  Tab: observer(
+    (props: { store: StoreType; active: boolean; onClick: () => void }) => (
+      <SectionTab name="Address Block" {...props} iconSize={20}>
+        <AddressBlockIcon />
+      </SectionTab>
+    )
+  ) as SideSection['Tab'],
+  Panel: observer(({ store }: BlockColorsSectionProps) => {
+    const dispatch: AppDispatch = useDispatch();
+
+    const blockColor = useSelector(
+      (state: RootState) => state.templates.blockColor
+    );
+
+    const product = useSelector(
+      (state: RootState) => state.templates.product
+    ) as Record<string, any>;
+
+    const currentProductId = +product?.id;
+
+    const [selectedColor, setSelectedColor] = useState(
+      blockColor || DEFAULT_RESTRICTED_AREA_BG
+    );
+
+    useEffect(() => {
+      if (blockColor && blockColor !== selectedColor) {
+        setSelectedColor(blockColor);
+      }
+    }, [blockColor]);
+
+    const handleColorChange = (color: string) => {
+
+      setSelectedColor(color);
+      const pages = store.pages;
+      let updated = false;
+      let isSnapPack = false;
+
+      const basicRestrictedIds = [
+        'figure-1',
+        'figure-2',
+        'figure-3',
+      ]
+
+      const snapPackRestrictedIds = [
+        'recipient-address-area',
+        'recipient-address-box',
+        'return-address-box',
+        'postage-indicia-box',
+        'barcode-box',
+      ]
+
+      const restrictedIds = [
+        ...basicRestrictedIds,
+        ...snapPackRestrictedIds
+      ];
+      const updatedPages: any = [];
+
+      let lastCustomFigures: any = [];
+      let lastPageIndex = 0;
+
+      pages.forEach((page, index) => {
+        const pageData = page.toJSON();
+        const children = pageData.children;
+        lastPageIndex = index;
+
+        // Remove previously added custom-figure-* elements
+        const filteredChildren = children.filter(
+          (el: any) => !restrictedIds.some(id => el.id === `custom-${id}`)
+        );
+
+        // Find restricted elements
+        const restrictedFigures = restrictedIds
+          .map((id) => children.find((el: any) => el.type === 'figure' && el.id === id))
+          .filter(Boolean); // Remove undefined
+
+        if (restrictedFigures.length) {
+          restrictedFigures.forEach(el => {
+            if (snapPackRestrictedIds.includes(el.id)) {
+              isSnapPack = true;
+              el.cornerRadius = 5;
+              el.preFill = color;
+              if (el.id === 'recipient-address-box') {
+                el.opacity = 0;
+              }
+            } else if (basicRestrictedIds.includes(el.id)) {
+              el.cornerRadius = 5;
+            }
+          });
+        }
+
+        let customFigures: any[] = [];
+
+        if (restrictedFigures?.length > 0) {
+          customFigures = restrictedFigures.map((el: any) => {
+            const json = el.toJSON?.() || el;
+            return {
+              ...json,
+              id: `custom-${json.id}`,
+              type: json.type,
+              fill: color,
+              cornerRadius: 5,
+              ...(isSnapPack && {
+                custom: {
+                  preFill: color,
+                  replaceBg: true
+                }
+              })
+            };
+          });
+
+          // Save for adding after store reload
+          lastCustomFigures = customFigures;
+
+          // Append to children
+          customFigures.forEach(fig => {
+            const matchId = fig.id.replace("custom-", ""); // remove prefix
+            const targetIndex = filteredChildren.findIndex((item: any) => item.id === matchId);
+
+            if (targetIndex !== -1) {
+              filteredChildren.splice(targetIndex + 1, 0, fig);
+            }
+          });
+        }
+
+        updatedPages.push({
+          ...pageData,
+          children: filteredChildren,
+        });
+      });
+
+      // Load updated pages into store
+      store.loadJSON({ pages: updatedPages });
+
+      // Add custom elements back to the last modified page
+      if (lastCustomFigures.length) {
+        store.pages[lastPageIndex].addElement(lastCustomFigures);
+        updated = true;
+      }
+
+      if (updated) {
+        dispatch({ type: SET_BLOCK_COLOR, payload: color });
+        dispatch(success('Address block color updated successfully'));
+      }
+    };
+
+    return (
+      <div className="block-colors-section">
+        <div className="block-colors-header">
+          <Typography className="title">
+            Optional: Choose a background color for the mailing address block.
+          </Typography>
+          <Typography className="description">
+            These approved options enhance your mailer's look while maintaining
+            USPS compliance.
+          </Typography>
+        </div>
+
+        <div className="color-palette">
+          {RESTRICTED_AREA_COLOR_PALETTE.map((color, index) => (
+            <div
+              key={index}
+              className={`color-swatch ${selectedColor === color.value ? 'selected' : ''}`}
+              style={{ backgroundColor: color.value }}
+              onClick={() => handleColorChange(color.value)}
+              title={color.name}
+            />
+          ))}
+        </div>
+      </div>
+    );
+  }),
+};
+
+export default BlockColors;