@openlettermarketing/olc-react-sdk 0.0.8 → 0.0.10

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

@@ -0,0 +1,66 @@
+import React, { useEffect } from 'react';
+
+//Hooks
+//@ts-ignore
+import { useSnackbar } from 'react-simple-snackbar';
+import { useDispatch, useSelector } from "react-redux";
+import { AppDispatch, RootState } from '../../../redux/store';
+
+// Actions
+import { closeSnackbar } from '../../../redux/actions/snackbarActions';
+
+// components
+import Typography from '../Typography';
+
+// styles
+import './styles.scss'
+
+
+const options = {
+  position: 'top-right',
+  style: {
+    backgroundColor: '#EF7820',
+    width: '400px',
+    color: 'white',
+    fontSize: '16px',
+    textAlign: 'center',
+  },
+  closeStyle: {
+    color: 'white',
+    fontSize: '16px',
+  },
+};
+
+const Snackbar:React.FC = () => {
+  const [openSnackbar] = useSnackbar(options);
+
+  const open = useSelector((state: RootState) => state.snackbarReducers.snackbar.open);
+
+  const heading = useSelector(
+    (state: RootState) => state.snackbarReducers.snackbar.heading
+  );
+  const message = useSelector(
+    (state: RootState) => state.snackbarReducers.snackbar.message
+  );
+
+  const dispatch: AppDispatch = useDispatch();
+
+  const Element =
+    <div className="snackbar">
+      <Typography>{heading || ''}</Typography>
+      <Typography>{message || ''}</Typography>
+    </div>
+
+  useEffect(() => {
+    if (open) {
+      openSnackbar(Element, [5000])
+      dispatch(closeSnackbar())
+    }
+  }, [open]);
+
+  return (
+    Element
+  )
+};
+
+export default Snackbar;

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

@@ -0,0 +1,162 @@
+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 handleAddElementOnScreen = (event: any, value: any, type: any) => {
+      event.preventDefault();
+
+      if (currentTemplateType === 'Real Penned Letter') {
+        copyToClipboard(value);
+        dispatch(success(`${value} Copied`));
+        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={() => copyToClipboard(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={() => copyToClipboard(key)}
+              >
+                <ContentCopyIcon
+                  className="copy"
+                />
+              </Button>
+            </div>
+          )
+        )}
+      </div>
+    );
+  }) as SideSection['Panel'],
+};
+
+export default customFieldSection;

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

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

@@ -0,0 +1,30 @@
+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;
+}
+
+const SidePanel: React.FC<Props> = (props) => {
+    const sections = DEFAULT_SECTIONS.filter(
+      (section) => !['photos', 'size', 'templates'].includes(section.name)
+  );
+  
+  return (
+    <SidePanelWrap>
+      <PolotnoSidePanel store={props.store} sections={[customTemplateSection, ...sections, customFieldSection]} defaultSection="text" />
+    </SidePanelWrap>
+  );
+};
+
+
+export default SidePanel;