@openlettermarketing/olc-react-sdk 0.0.18 → 0.0.20

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/customFields/customFieldSection.tsx

@@ -1,173 +0,0 @@
-import React from 'react';
-import { observer } from 'mobx-react-lite';
-import { SectionTab, } from 'polotno/side-panel';
-import { useDispatch, useSelector } from 'react-redux';
-import { useEffect , useState} from 'react';
-import type { StoreType } from 'polotno/model/store';
-import type { TemplatesSection } from 'polotno/side-panel';
-import { AppDispatch, RootState } from '../../../redux/store';
-import { fetchCustomFields } from '../../../redux/actions/customFieldAction';
-import Button from '../../GenericUIBlocks/Button';
-import { copyToClipboard } from '../../../utils/helper';
-import './styles.scss'
-import GeneralTootip from '../../GenericUIBlocks/GeneralTooltip';
-import InfoIcon from '../../../assets/images/templates/info-icon';
-import ContentCopyIcon from '../../..//assets/images/templates/content-copy-icon';
-import DynamicField from '../../../assets/images/templates/dynamic-field';
-import { success } from '../../../redux/actions/snackbarActions';
-
-type SideSection = typeof TemplatesSection;
-
-const iconButtonStyles= {
-  backgroundColor: 'transparent',
-}
-
-const customFieldSection: SideSection = {
-  name: 'Fields',
-  Tab: observer(
-    (props: {store: StoreType; active: boolean; onClick: () => void}) => (
-      <SectionTab name="Fields" {...props}>
-        <DynamicField stroke="var(--sidepanelSVGColor)" />
-      </SectionTab>
-    )
-  ) as SideSection['Tab'],
-
-  Panel: observer(({store}) => {
-    const [isShowDialog, setIsShowDialog] = useState(false);
-    const dispatch = useDispatch<AppDispatch>();
-    const customFields = useSelector(
-      (state: RootState) => state.customFields.customFields
-    ) as Record<string, any>;
-    const defaultDynamicFields = useSelector(
-      (state: RootState) => state.customFields.defaultDynamicFields
-    );
-    const product = useSelector((state: RootState) => state.templates.product);
-    const currentTemplateType = product?.productType;
-
-    const handleShowDialog = () => {
-      setIsShowDialog((prev) => !prev);
-    };
-
-    useEffect(() => {
-      dispatch(fetchCustomFields());
-    }, [dispatch]);
-
-
-    const copyCustomFieldText = (value: string) => {
-      if (currentTemplateType === "Real Penned Letter") {
-        let modifiedString = value.replace(/{{/g, "((").replace(/}}/g, "))");
-        copyToClipboard(modifiedString);
-        dispatch(success(`${modifiedString} Copied`));
-      } else {
-        copyToClipboard(value);
-        dispatch(success(`${value} Copied`));
-      }
-    };
-
-    const handleAddElementOnScreen = (event: any, value: any, type: any) => {
-      event.preventDefault();
-
-      if (currentTemplateType === "Real Penned Letter") {
-        copyCustomFieldText(value);
-        return;
-      }
-
-      let x, y;
-
-      if (type === 'drag') {
-        const rect = event.currentTarget.getBoundingClientRect();
-        x = event.clientX - rect.left;
-        y = event.clientY - rect.top;
-      } else {
-        // For click events, use nativeEvent.offsetX and nativeEvent.offsetY
-        x = store.width / 2 - 200;
-        y = 300;
-      }
-      x /= store.activePage.scale;
-      y /= store.activePage.scale;
-
-      store.activePage.addElement({
-        type: 'text',
-        x,
-        y,
-        text: value,
-        width: value.length > 15 ? 10 * value.length : 150,
-        contentEditable: false,
-      });
-    };
-
-    return (
-      <div className="dynamic-content">
-        <div className="dynamic-content__top">
-          <div>
-            <span className="title">Contact Fields</span>
-            <InfoIcon fill="var(--primaryColor)" className="infoIcon" />
-            <GeneralTootip
-              anchorSelect=".infoIcon"
-              place="bottom"
-              title="Merge fields allow you to personalize your mailer with contact information."
-            />
-          </div>
-        </div>
-        {defaultDynamicFields.map(
-          ({key, value}: {key: string; value: string}, i: number) => (
-            <div style={{display: 'flex', alignItems: 'center'}} key={i}>
-              <span
-                className="contact-element"
-                onClick={(event) =>
-                  handleAddElementOnScreen(event, key, 'click')
-                }
-              >
-                {value}
-              </span>
-              <Button
-                style={iconButtonStyles}
-                onClick={() => copyCustomFieldText(key)}
-              >
-                <ContentCopyIcon className="copy" />
-              </Button>
-            </div>
-          )
-        )}
-        <GeneralTootip anchorSelect=".copy" place="bottom" title="Copy" />
-        <hr className="divider" />
-        <div className="dynamic-content__top">
-          <div>
-            <span className="title">Custom Fields</span>
-            <InfoIcon fill="var(--primaryColor)" className="custom" />
-            <GeneralTootip
-              anchorSelect=".custom"
-              place="bottom"
-              title="You can add custom fields to your template."
-            />
-          </div>
-          <Button onClick={handleShowDialog}></Button>
-        </div>
-        {customFields?.data?.map(
-          ({key, value}: {key: string; value: string}, i: number) => (
-            <div style={{display: 'flex', alignItems: 'center'}} key={i}>
-              <span
-                className="contact-element"
-                onClick={(event) =>
-                  handleAddElementOnScreen(event, key, 'click')
-                }
-              >
-                {value}
-              </span>
-              <Button
-                style={iconButtonStyles}
-                onClick={() => copyCustomFieldText(key)}
-              >
-                <ContentCopyIcon
-                  className="copy"
-                />
-              </Button>
-            </div>
-          )
-        )}
-      </div>
-    );
-  }) as SideSection['Panel'],
-};
-
-export default customFieldSection;

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

@@ -1,47 +0,0 @@
-.dynamic-icon{
-    width:20px;
-    height: 20px;
-}
-.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(--primaryColor);
-            margin-right: 5px;
-        }
-        & .icon{
-            width: 12px;
-            height: 12px;
-            cursor: pointer;
-        }
-        & .plus-icon{
-            // margin-right: 6px;
-        }
-    }
-
-    & .divider{
-        margin-top: 10px;
-        color: #44424145;
-    }
-
-    & .contact-element{
-        width: 100%;
-        border-radius: 3px;
-        border: 0.5px solid var(--customFieldBorderColor);
-        text-align: center;
-        height: 35px;
-        line-height: 35px;
-        margin: 5px auto;
-        color: var(--customFieldTextColor);
-    }
-    .copy{
-        fill: var(--customFieldCopySVGColor) !important;
-    }
-}

package/src/components/SidePanel/index.tsx

@@ -1,42 +0,0 @@
-import React from 'react';
-
-// Polotno Imports
-import { SidePanelWrap } from 'polotno';
-import type { StoreType } from 'polotno/model/store';
-import { SidePanel as PolotnoSidePanel, DEFAULT_SECTIONS } from 'polotno/side-panel';
-
-// Custom Sections
-import customTemplateSection from './templates/customTemplateSection';
-import customFieldSection from './customFields/customFieldSection';
-
-
-interface Props {
-  store: StoreType;
-  currentTemplateType: string;
-}
-
-const SidePanel: React.FC<Props> = (props) => {
-  const sections =
-    props.currentTemplateType === "Real Penned Letter"
-      ? DEFAULT_SECTIONS.filter((section) => section.name === "")
-      : DEFAULT_SECTIONS.filter(
-        (section) => !["photos", "size", "templates"].includes(section.name)
-      );
-
-  return (
-    <SidePanelWrap>
-      <PolotnoSidePanel store={props.store}
-        sections={[
-          ...(props.currentTemplateType !== "Real Penned Letter"
-            ? [customTemplateSection]
-            : []),
-          ...sections,
-          customFieldSection,
-        ]}
-        defaultSection="text" />
-    </SidePanelWrap>
-  );
-};
-
-
-export default SidePanel;