@openlettermarketing/olc-react-sdk 2.1.7 → 2.1.8

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

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

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

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

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

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