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

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

@@ -0,0 +1,80 @@
+.block-colors-section {
+  padding: 16px;
+
+  .block-colors-header {
+    margin-bottom: 20px;
+
+    .title {
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--text-color);
+      margin-bottom: 8px;
+      line-height: 1.4;
+    }
+
+    .description {
+      font-size: 12px;
+      color: var(--text-color);
+      opacity: 0.8;
+      line-height: 1.4;
+    }
+  }
+
+  .color-palette {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    gap: 8px;
+    max-width: 100%;
+
+    .color-swatch {
+      width: 100%;
+      aspect-ratio: 1;
+      border: 1px solid #e0e0e0;
+      border-radius: 4px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      position: relative;
+
+      &:hover {
+        transform: scale(1.05);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+      }
+
+      &.selected {
+        border: 2px solid var(--primary-color);
+        box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.2);
+
+        &::after {
+          content: '✓';
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          color: #000;
+          font-weight: bold;
+          font-size: 12px;
+          text-shadow: 0 0 2px rgba(255, 255, 255, 0.8);
+        }
+      }
+    }
+  }
+}
+
+// Responsive adjustments
+@media (max-width: 768px) {
+  .block-colors-section {
+    .color-palette {
+      grid-template-columns: repeat(4, 1fr);
+      gap: 6px;
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  .block-colors-section {
+    .color-palette {
+      grid-template-columns: repeat(3, 1fr);
+      gap: 4px;
+    }
+  }
+}

package/src/components/SidePanel/CustomFields/customFieldSection.tsx

@@ -0,0 +1,547 @@
+import React, { useEffect, useState } from 'react';
+
+// Polotno and thrid 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';
+
+// Actions
+import { failure, success } from '../../../redux/actions/snackbarActions';
+import { SET_CUSTOM_FIELDS, SET_CUSTOM_FIELDS_V2, SET_PLATFORM_FIELDS } from '../../../redux/actions/action-types';
+
+// Components
+import Button from '../../GenericUIBlocks/Button';
+import GeneralTootip from '../../GenericUIBlocks/GeneralTooltip';
+
+// Utils
+import { copyToClipboard } from '../../../utils/helper';
+
+// Icons
+import InfoIcon from '../../../assets/images/templates/info-icon';
+import ContentCopyIcon from '../../..//assets/images/templates/content-copy-icon';
+import Field from '../../../assets/images/templates/field';
+
+// Styles
+import './styles.scss'
+
+
+type SideSection = typeof TemplatesSection;
+
+const iconButtonStyles = {
+  backgroundColor: 'transparent',
+}
+
+type CustomFieldsSectionProps = {
+  store: StoreType;
+  active: boolean;
+  allowSenderFields?: boolean;
+  allowPropertyFields?: boolean;
+  excludedFields?: string[] | null;
+  platformName?: string,
+  onClick: () => void;
+  onGetCustomFields?: () => Promise<any>;
+};
+
+const CustomFieldSection: SideSection = {
+  name: 'Fields',
+  Tab: observer(
+    (props: { store: StoreType; active: boolean; onClick: () => void }) => (
+      <SectionTab name="Fields" {...props}>
+        <Field fill="var(--text-color)" />
+      </SectionTab>
+    )
+  ) as SideSection['Tab'],
+
+  Panel: observer(({ store, onGetCustomFields, allowSenderFields, excludedFields, allowPropertyFields, platformName }: CustomFieldsSectionProps) => {
+    const [isShowDialog, setIsShowDialog] = useState(false);
+    const [search, setSearch] = useState('');
+    const [filteredDynamicFields, setFilteredDynamicFields] = useState([]);
+    const [filteredCustomFields, setFilteredCustomFields] = useState([]);
+    const [filteredMiscFields, setFilteredMiscFields] = useState([]);
+    const [filteredPropertyFields, setFilteredPropertyFields] = useState([]);
+    const [filteredCustomFieldsV2, setFilteredCustomFieldsV2] = useState([]);
+    const [filteredSenderFields, setFilteredSenderFields] = useState([]);
+    const [filteredPlatformFields, setFilteredPlatformFields] = useState([]);
+
+
+    const dispatch = useDispatch<AppDispatch>();
+
+    const customFields = useSelector(
+      (state: RootState) => state.customFields.customFields
+    ) as Record<string, any>;
+
+    const customFieldsV2 = useSelector(
+      (state: RootState) => state.customFields.customFieldsV2
+    ) as Record<string, any>;
+
+    const platformFields = useSelector(
+      (state: RootState) => state.customFields.platformFields
+    ) as Record<string, any>;
+
+    const defaultDynamicFields = useSelector(
+      (state: RootState) => state.customFields.defaultDynamicFields
+    ) as Record<string, any>;
+
+    const defaultSenderFields = useSelector(
+      (state: RootState) => state.templates.defaultSenderFields
+    ) as Record<string, any>;
+
+    const defaultPropertyFields = useSelector(
+      (state: RootState) => state.templates.defaultPropertyFields
+    ) as Record<string, any>;
+
+    const defaultMiscFields = useSelector(
+      (state: RootState) => state.templates.defaultMiscFields
+    ) as Record<string, any>;
+
+    const product = useSelector((state: RootState) => state.templates.product);
+    const currentTemplateType = product?.productType;
+    const currentProductId = product?.id || '';
+
+    const handleShowDialog = () => {
+      setIsShowDialog((prev) => !prev);
+    };
+
+    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 copyCustomFieldText = (key: string, value: string = '') => {
+      if (currentTemplateType === 'Real Penned Letter' && +currentProductId === 16) {
+        let modifiedString = key.replace(/{{/g, '((').replace(/}}/g, '))');
+        copyToClipboard(modifiedString);
+        dispatch(success(`${value} Copied`));
+      } else {
+        copyToClipboard(key);
+        dispatch(success(`${value} Copied`));
+      }
+    };
+
+    useEffect(() => {
+      fetchCustomFields();
+    }, []);
+
+    useEffect(() => {
+      setFilteredDynamicFields(
+        defaultDynamicFields
+          ?.filter(({ key }: any) => !excludedFields?.includes(key))
+          .filter(({ value }: any) =>
+            value?.toLowerCase().includes(search?.toLowerCase())
+          )
+      );
+
+      setFilteredMiscFields(defaultMiscFields.filter(({ value }: any) =>
+        value?.toLowerCase().includes(search?.toLowerCase())
+      ))
+
+      setFilteredPropertyFields(
+        allowPropertyFields
+          ? defaultPropertyFields
+            ?.filter(({ key }: any) => !excludedFields?.includes(key))
+            ?.filter(({ value }: any) =>
+              value?.toLowerCase().includes(search?.toLowerCase())
+            )
+          : []
+      );
+
+      setFilteredSenderFields(
+        allowSenderFields
+          ? defaultSenderFields?.filter(({ key }: any) => !excludedFields?.includes(key))?.filter(({ value }: any) =>
+            value?.toLowerCase().includes(search?.toLowerCase())
+          )
+          : []
+      );
+
+      setFilteredPlatformFields(platformFields
+        ?.filter(({ key }: any) => !excludedFields?.includes(key))
+        ?.filter(({ value }: any) =>
+          value?.toLowerCase().includes(search?.toLowerCase())
+        ));
+
+      setFilteredCustomFields(customFields
+        ?.filter(({ key }: any) => !excludedFields?.includes(key))
+        ?.filter(({ value }: any) =>
+          value?.toLowerCase().includes(search?.toLowerCase())
+        ));
+
+      if (customFieldsV2.length) {
+        const newFilteredData = customFieldsV2
+          .map((section: { fields: any[]; }) => ({
+            ...section,
+            fields: section.fields.filter((field: { value: string; }) =>
+              field.value?.toLowerCase().includes(search?.toLowerCase())
+            )
+          })).filter((section: any) => section?.fields?.length > 0);
+
+        setFilteredCustomFieldsV2(newFilteredData);
+      } else {
+        setFilteredDynamicFields(
+          defaultDynamicFields
+            ?.filter(({ key }: any) => !excludedFields?.includes(key))
+            ?.filter(({ value }: any) =>
+              value?.toLowerCase().includes(search?.toLowerCase())
+            )
+        );
+      }
+
+    }, [search, defaultSenderFields, platformFields, customFields, defaultDynamicFields, customFieldsV2]);
+
+    return (
+      <div style={{
+        height: "100%",
+        display: "flex",
+        flexDirection: "column"
+      }}>
+        <div className="bp5-input-group fields-search">
+          <span aria-hidden="true" className="bp5-icon bp5-icon-search">
+            <svg data-icon="search" height="16" role="img" viewBox="0 0 16 16" width="16">
+              <path d="M15.55 13.43l-2.67-2.68a6.94 6.94 0 001.11-3.76c0-3.87-3.13-7-7-7s-7 3.13-7 7 3.13 7 7 7c1.39 0 2.68-.42 3.76-1.11l2.68 2.67a1.498 1.498 0 102.12-2.12zm-8.56-1.44c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z" fillRule="evenodd"></path>
+            </svg>
+          </span>
+          <input type="search" placeholder="Search..." className="bp5-input"
+            onChange={(e) => setSearch(e.target.value)}
+            value={search}
+          />
+        </div>
+        <div className="dynamic-content">
+          {filteredDynamicFields.length > 0 &&
+            <>
+              <div className="dynamic-content__top">
+                <div>
+                  <span className="title">Contact Fields</span>
+                  <InfoIcon fill="var(--primary-color)" className="infoIcon" />
+                  <GeneralTootip
+                    anchorSelect=".infoIcon"
+                    place="bottom"
+                    className='contact-info-tooltip'
+                    title="Merge fields allow you to personalize your mailer with contact information."
+                  />
+                </div>
+              </div>
+              {filteredDynamicFields
+                ?.map(
+                  ({ key, value }: { key: string; value: string }, i: number) => (
+                    <div style={{ display: 'flex', alignItems: 'center' }} key={i + '_contact'}>
+                      <span
+                        className="contact-element"
+                        onClick={() =>
+                          copyCustomFieldText(key, value)
+                        }
+                      >
+                        {value}
+                      </span>
+                      <Button
+                        style={iconButtonStyles}
+                        onClick={() => copyCustomFieldText(key, value)}
+                        backdrop={false}
+                      >
+                        <ContentCopyIcon className="copy" />
+                      </Button>
+                    </div>
+                  )
+                )}
+            </>}
+          {allowPropertyFields && filteredPropertyFields.length > 0 && <>
+            <hr className="divider" />
+            <div className="dynamic-content__top">
+              <div>
+                <span className="title">Property Address</span>
+                <InfoIcon fill="var(--primary-color)" className="property" />
+                <GeneralTootip
+                  anchorSelect=".property"
+                  place="bottom"
+                  title="You can add property fields to your template."
+                />
+              </div>
+            </div>
+            {filteredPropertyFields
+              ?.map(
+                ({ key, value }: { key: string; value: string }, i: number) => (
+                  <div style={{ display: 'flex', alignItems: 'center' }} key={i + '_property'}>
+                    <span
+                      className="contact-element"
+                      onClick={() =>
+                        copyCustomFieldText(key, value)
+                      }
+                    >
+                      {value}
+                    </span>
+                    <Button
+                      style={iconButtonStyles}
+                      onClick={() => copyCustomFieldText(key, value)}
+                      backdrop={false}
+                    >
+                      <ContentCopyIcon className="copy" />
+                    </Button>
+                  </div>
+                )
+              )}
+          </>}
+          {allowSenderFields && filteredSenderFields.length > 0 && <>
+            <hr className="divider" />
+            <div className="dynamic-content__top">
+              <div>
+                <span className="title">Sender Fields</span>
+                <InfoIcon fill="var(--primary-color)" className="sender" />
+                <GeneralTootip
+                  anchorSelect=".sender"
+                  place="bottom"
+                  title="You can add sender fields to your template."
+                />
+              </div>
+            </div>
+            {filteredSenderFields
+              ?.map(
+                ({ key, value }: { key: string; value: string }, i: number) => (
+                  <div style={{ display: 'flex', alignItems: 'center' }} key={i + '_sender'}>
+                    <span
+                      className="contact-element"
+                      onClick={() =>
+                        copyCustomFieldText(key, value)
+                      }
+                    >
+                      {value}
+                    </span>
+                    <Button
+                      style={iconButtonStyles}
+                      onClick={() => copyCustomFieldText(key, value)}
+                      backdrop={false}
+                    >
+                      <ContentCopyIcon className="copy" />
+                    </Button>
+                  </div>
+                )
+              )}
+          </>}
+          <GeneralTootip anchorSelect=".copy" place="bottom" title="Copy" />
+          {onGetCustomFields && platformFields?.length > 0 && (
+            <>
+              <hr className="divider" />
+              <div className="dynamic-content__top">
+                <div>
+                  <span className="title">{platformName ? `${platformName} Fields` : 'OLC Fields'}</span>
+                  <InfoIcon fill="var(--primary-color)" className="platform" />
+                  <GeneralTootip
+                    anchorSelect=".platform"
+                    place="bottom"
+                    title={`You can add ${platformName ? `${platformName} Fields` : 'OLC Fields'} to your template.`}
+                  />
+                </div>
+                <Button onClick={handleShowDialog}></Button>
+              </div>
+              {filteredPlatformFields
+                ?.map(
+                  ({ key, value }: { key: string; value: string }, i: number) => (
+                    <div style={{ display: 'flex', alignItems: 'center' }} key={i + '_platform'}>
+                      <span
+                        className="contact-element"
+                        onClick={() =>
+                          copyCustomFieldText(key, value)
+                        }
+                      >
+                        {value}
+                      </span>
+                      <Button
+                        style={iconButtonStyles}
+                        onClick={() => copyCustomFieldText(key, value)}
+                        backdrop={false}
+                      >
+                        <ContentCopyIcon className="copy" />
+                      </Button>
+                    </div>
+                  )
+                )}
+            </>
+          )
+          }
+          {onGetCustomFields && filteredCustomFieldsV2.length > 0 ?
+            filteredCustomFieldsV2.map((section: any, index: number): any => (
+              <div key={index + 'custom-section'}>
+                <hr className="divider" />
+                <div className="dynamic-content__top">
+                  <div>
+                    <span className="title">{section?.section}</span>
+                    <InfoIcon fill="var(--primary-color)" className={section?.section
+                      ?.toLowerCase()
+                      .replace(/[^a-z0-9\s]/g, '')
+                      .trim()
+                      .replace(/\s+/g, '-')} />
+                    <GeneralTootip
+                      anchorSelect={`.${section?.section
+                        ?.toLowerCase()
+                        .replace(/[^a-z0-9\s]/g, '')
+                        .trim()
+                        .replace(/\s+/g, '-')}`}
+                      place="bottom"
+                      title={`You can add ${section?.section} to your template.`}
+                    />
+                  </div>
+
+                  <Button onClick={handleShowDialog}></Button>
+                </div>
+
+                {section.fields.map(({ key, value }: { key: string; value: string }, i: number) => (
+                  <div style={{ display: 'flex', alignItems: 'center' }} key={i + value}>
+                    <span
+                      className="contact-element"
+                      onClick={() =>
+                        copyCustomFieldText(key, value)
+                      }
+                    >
+                      {value}
+                    </span>
+                    <Button
+                      style={iconButtonStyles}
+                      onClick={() => copyCustomFieldText(key, value)}
+                      backdrop={false}
+                    >
+                      <ContentCopyIcon className="copy" />
+                    </Button>
+                  </div>
+                ))}
+              </div>
+            ))
+            : onGetCustomFields && customFields?.length > 0 && filteredCustomFields.length > 0 && (
+              <>
+                <hr className="divider" />
+                <div className="dynamic-content__top">
+                  <div>
+                    <span className="title">Custom Fields</span>
+                    <InfoIcon fill="var(--primary-color)" className="custom" />
+                    <GeneralTootip
+                      anchorSelect=".custom"
+                      place="bottom"
+                      title="You can add custom fields to your template."
+                    />
+                  </div>
+                  <Button onClick={handleShowDialog}></Button>
+                </div>
+                {filteredCustomFields
+                  ?.map(
+                    ({ key, value }: { key: string; value: string }, i: number) => (
+                      <div style={{ display: 'flex', alignItems: 'center' }} key={i + '_custom'}>
+                        <span
+                          className="contact-element"
+                          onClick={() =>
+                            copyCustomFieldText(key, value)
+                          }
+                        >
+                          {value}
+                        </span>
+                        <Button
+                          style={iconButtonStyles}
+                          onClick={() => copyCustomFieldText(key, value)}
+                          backdrop={false}
+                        >
+                          <ContentCopyIcon className="copy" />
+                        </Button>
+                      </div>
+                    )
+                  )}
+              </>
+            )
+          }
+          {defaultMiscFields && filteredMiscFields.length > 0 && <>
+            <hr className="divider" />
+            <div className="dynamic-content__top">
+              <div>
+                <span className="title">Miscellaneous Fields</span>
+                <InfoIcon fill="var(--primary-color)" className="miscellaneous" />
+                <GeneralTootip
+                  anchorSelect=".miscellaneous"
+                  place="bottom"
+                  title="You can add miscellaneous fields to your template."
+                />
+              </div>
+            </div>
+            {filteredMiscFields
+              ?.filter(({ key }) => !excludedFields?.includes(key))
+              ?.map(
+                ({ key, value }: { key: string; value: string }, i: number) => (
+                  <div style={{ display: 'flex', alignItems: 'center' }} key={i + '_property'}>
+                    <span
+                      className="contact-element"
+                      onClick={() =>
+                        copyCustomFieldText(key, value)
+                      }
+                    >
+                      {value}
+                    </span>
+                    <Button
+                      style={iconButtonStyles}
+                      onClick={() => copyCustomFieldText(key, value)}
+                      backdrop={false}
+                    >
+                      <ContentCopyIcon className="copy" />
+                    </Button>
+                  </div>
+                )
+              )}
+          </>}
+          {filteredDynamicFields.length <= 0 && filteredCustomFieldsV2.length <= 0 && filteredPropertyFields.length <= 0 && filteredSenderFields.length <= 0 && filteredPlatformFields.length <= 0 && filteredCustomFields.length <= 0 &&
+            filteredMiscFields.length <= 0 &&
+            <div className="no-result">No results</div>
+          }
+        </div >
+      </div>
+    );
+  }) as unknown as SideSection['Panel'],
+};
+
+export default CustomFieldSection;

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

@@ -0,0 +1,64 @@
+.dynamic-content {
+  & .dynamic-content__top {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin: 8px auto;
+    & .title {
+      font-weight: 600;
+      font-size: 16px;
+      line-height: 19.36px;
+      color: var(--primary-color);
+      margin-right: 5px;
+    }
+    & .icon {
+      width: 12px;
+      height: 12px;
+      cursor: pointer;
+    }
+    & .contact-info-tooltip {
+      width: 90% !important;
+      max-width: fit-content !important;
+    }
+    & .custom-add-on-tooltip {
+      width: 90% !important;
+      max-width: fit-content !important;
+    }
+    svg{
+      &:focus{
+        outline: none !important;
+      }
+    }
+  }
+
+  & .divider {
+    margin-top: 10px;
+    color: #44424145;
+  }
+
+  & .contact-element {
+    width: 100%;
+    border-radius: 3px;
+    border: 0.5px solid var(--border-color);
+    text-align: center;
+    height: 35px;
+    line-height: 35px;
+    margin: 5px auto;
+    cursor: pointer;
+    transition: 0.1s ease-in all;
+
+    &:hover {
+      background-color: var(--secondary-color);
+    }
+  }
+  .copy {
+    fill: #000 !important;
+  }
+}
+
+.no-result {
+  display: flex;
+  justify-content: center;
+  margin: 20px;
+}