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

package/src/components/CreateTemplate/index.tsx

@@ -0,0 +1,508 @@
+import React, { ReactElement, useEffect, useState } from 'react';
+
+//hooks
+import { NavLink, useNavigate } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
+import { AppDispatch, RootState } from '../../redux/store';
+
+//actions
+import {
+  clearTemplateFields,
+  searchAndAdvanceChange,
+  selectPostCard,
+  selectProduct,
+} from '../../redux/actions/templateActions';
+import { CLEAR_TEMPLATE } from '../../redux/actions/action-types';
+import { clearQrFields } from '../../redux/actions/customQRCodeActions';
+
+//utils
+import { PRODUCT_LEARN_URL, sortOrderForTemplates } from '../../utils/constants';
+import { removeItem } from '../../utils/local-storage';
+import { MESSAGES } from '../../utils/message';
+import { envelopeTypes } from '../../utils/template-builder';
+
+// UI Components
+import { GridContainer, GridItem } from '../GenericUIBlocks/Grid';
+import Typography from '../GenericUIBlocks/Typography';
+import Button from '../GenericUIBlocks/Button';
+import GeneralSelect from '../GenericUIBlocks/GeneralSelect';
+import GenericSnackbar from '../GenericUIBlocks/GenericSnackbar/Toast';
+import GeneralTooltip from '../GenericUIBlocks/GeneralTooltip';
+
+// Images
+//@ts-ignore
+import Postcard from '../../assets/images/templates/postcard.tsx';
+//@ts-ignore
+import PersonalLetter from '../../assets/images/templates/personal-letter.tsx';
+//@ts-ignore
+import ProfessionalLetter from '../../assets/images/templates/professional-letter.tsx';
+//@ts-ignore
+import RealPennedLetter from '../../assets/images/templates/real-penned-letters.tsx';
+//@ts-ignore
+import TriFoldSelfMailers from '../../assets/images/templates/tri-fold-self-mailers.tsx';
+//@ts-ignore
+import BiFoldSelfMailers from '../../assets/images/templates/bi-fold-self-mailers.tsx';
+//@ts-ignore
+import SnapPackMailers from '../../assets/images/templates/snap-pack.tsx';
+//@ts-ignore
+import InfoIcon from '../../assets/images/templates/info-icon';
+
+
+import SizeImage from '../../assets/images/templates/size-image';
+import SizeImageMid from '../../assets/images/templates/size-image-mid';
+import SizeImageLarge from '../../assets/images/templates/size-image-lg';
+import SizeImageXLarge from '../../assets/images/templates/size-image-xl';
+
+import Input from '../GenericUIBlocks/Input';
+import Divider from '../GenericUIBlocks/Divider';
+
+// styles
+import './styles.scss';
+
+const templateHeadingStyles: React.CSSProperties = {
+  color: `var(--primary-color)`,
+  fontSize: `24px`,
+  fontStyle: `normal`,
+  fontWeight: `600`,
+  lineHeight: `normal`,
+  marginBottom: `20px`,
+};
+
+const templateTextStyles: React.CSSProperties = {
+  color: `var(--text-color)`,
+  fontSize: `14px`,
+  fontStyle: `normal`,
+  fontWeight: `400`,
+  lineHeight: `normal`,
+  marginBottom: `16px`,
+};
+
+const footerButtonStyles: React.CSSProperties = {
+  width: '100%',
+  maxWidth: '100px',
+  height: '100%',
+  minHeight: '40px',
+  textTransform: 'capitalize',
+  borderRadius: '3px',
+  backgroundColor: 'transparent',
+  color: `var(--text-color)`,
+  fontSize: `14px`,
+  fontWeight: `500`,
+};
+
+const Images: Record<string, ReactElement> = {
+  Postcards: <Postcard fill="var(--svg-color)" />,
+  'Professional Letters': <ProfessionalLetter fill="var(--svg-color)" />,
+  'Personal Letters': <PersonalLetter fill="var(--svg-color)" />,
+  'Real Penned Letter': <RealPennedLetter fill="var(--svg-color)" />,
+  'Tri-Fold Self-Mailers': <TriFoldSelfMailers fill="var(--svg-color)" />,
+  'Bi-Fold Self-Mailers': <BiFoldSelfMailers fill="var(--svg-color)" />,
+  'Snap Pack Mailers': <SnapPackMailers fill="var(--svg-color)" />
+};
+
+interface CreateTemplateProps {
+  onReturnAndNavigate?: () => void;
+  createTemplateRoute?: string | null;
+  templateBuilderRoute?: string | null;
+  restrictedProducts?: any;
+  disallowedProducts?: string[] | null | undefined;
+  currentTheme?: string | null | undefined;
+}
+
+const CreateTemplate: React.FC<CreateTemplateProps> = ({
+  onReturnAndNavigate,
+  createTemplateRoute,
+  templateBuilderRoute,
+  restrictedProducts,
+  disallowedProducts,
+  currentTheme
+}) => {
+  const [isError, setIsError] = useState<boolean>(false);
+  const [envelopeType, setEnvelopeType] = useState<[]>([]);
+  const [inputValue, setInputValue] = useState('');
+
+  const title = useSelector((state: RootState) => state.templates.title) || '';
+  const product = useSelector(
+    (state: RootState) => state.templates.product
+  ) as Record<string, any>;
+  const products = useSelector((state: RootState) => state.templates.products);
+  const templateType = useSelector(
+    (state: RootState) => state.templates.templateType
+  );
+
+  const dispatch: AppDispatch = useDispatch();
+  const navigate = useNavigate();
+
+  const restrictedSet = new Set(
+    (restrictedProducts ?? []).map((id: any) => String(id))
+  );
+
+  const disallowedSet = new Set(disallowedProducts ?? []);
+  const sortedProducts = products
+    ?.sort((a, b) => {
+      const indexA = sortOrderForTemplates.indexOf(a.productType);
+      const indexB = sortOrderForTemplates.indexOf(b.productType);
+      return indexA - indexB;
+    })
+    .filter((product) => {
+      return (
+        !restrictedSet.has(String(product.id)) &&
+        !disallowedSet.has(product.productType.toLowerCase().replace(/\s+/g, '_'))
+      );
+    });
+
+  const filteredEnvelopeTypes = envelopeTypes.filter((type) => {
+    return !restrictedProducts?.includes(type.productId);
+  });
+
+  const handleNext = () => {
+    const trimedTitle = title.trim();
+    if (
+      !trimedTitle ||
+      trimedTitle?.length > 50 ||
+      !templateType ||
+      !product ||
+      (product &&
+        product.productType === 'Postcards' &&
+        !product?.selectedSize) ||
+      (product &&
+        product.productType === 'Professional Letters' &&
+        !Object.keys(envelopeType).length)
+    ) {
+      setIsError(true);
+    } else {
+      let envelope: string | string[] = '';
+      if (product.productType === 'Professional Letters') {
+        //@ts-ignore
+        envelope = envelopeTypes.find(
+          //@ts-ignore
+          (envelope) => envelope?.label === envelopeType.label
+        )?.type;
+      }
+      dispatch(searchAndAdvanceChange('title', trimedTitle));
+      dispatch(searchAndAdvanceChange('envelopeType', envelope));
+      navigate(
+        templateBuilderRoute ? templateBuilderRoute : '/template-builder'
+      );
+    }
+  };
+
+  const ProductTooltipContent = ({ product }: { product: any }) => (
+    <div className="productTooltipContent">
+      <Typography className='heading'>{product?.productType}</Typography>
+      <div className='contentWrapper'>
+        {product?.size && product?.size.map((size: any, idx: any) => (
+          <Typography key={idx}><span>Size:</span> {size.size}</Typography>
+        ))}
+        {product?.paper && <Typography><span>Paper: </span> {product?.paper} </Typography>}
+        {+product?.id !== 2 && product?.envelope && <Typography><span>Envelope: </span> {product?.envelope} </Typography>}
+        {+product?.id === 2 && product?.envelope && <Typography><span>Windowed Envelope: </span> {product?.envelope} </Typography>}
+        {+product?.id === 2 && product?.nonEnvelope && <Typography><span>Non-Windowed Envelope: </span> {product?.nonEnvelope} </Typography>}
+        {/* {product?.ink && <Typography><span>Ink: </span> {product?.ink} </Typography>} */}
+      </div>
+    </div>
+  );
+
+  useEffect(() => {
+    dispatch(clearTemplateFields());
+    dispatch(clearQrFields());
+    removeItem('formData');
+    dispatch({ type: CLEAR_TEMPLATE });
+  }, []);
+
+  useEffect(() => {
+    if (sortedProducts?.length) {
+      dispatch(selectProduct(sortedProducts[0]));
+    }
+  }, [products]);
+
+  useEffect(() => {
+    if (product && product?.productType === 'Professional Letters') {
+      if (Object.keys(envelopeType).length) {
+        setIsError(false);
+      }
+      //@ts-ignore
+      if (envelopeType?.label === 'Non-Windowed Envelope') {
+        dispatch(
+          selectProduct(sortedProducts.find((item) => item.windowed === false))
+        );
+        //@ts-ignore
+      } else if (envelopeType?.label === 'Windowed Envelope') {
+        dispatch(
+          selectProduct(sortedProducts.find((item) => item.windowed === true))
+        );
+      }
+    }
+  }, [envelopeType]);
+
+  return (
+    <>
+      <Typography className="hideTemplateBuilder">
+        {MESSAGES.TEMPLATE_MESSAGE_ON_SMALL_SCREEN}
+      </Typography>
+      <div className="createTemplateMaindiv">
+        <div>
+          <GridContainer>
+            <GridItem lg={6} md={6} sm={12} xs={12}>
+              <div className="createTemplateHeader">
+                <Typography style={templateHeadingStyles}>
+                  {MESSAGES.TEMPLATE.CREATE.TITLE}
+                </Typography>
+                <div className="templateInputWrapper">
+                  <Input
+                    type="text"
+                    value={inputValue}
+                    onChange={(e: any) => {
+                      setInputValue(e.target.value);
+                      dispatch(searchAndAdvanceChange('title', e.target.value));
+                    }}
+                    placeholder="Template Name"
+                    inputIcon={false}
+                    error={
+                      !title.trim() && isError
+                        ? MESSAGES.TEMPLATE.NAME_REQUIRED
+                        : title.length > 50 && isError
+                          ? MESSAGES.TEMPLATE.NAME_LESS_50
+                          : ''
+                    }
+                    label={MESSAGES.TEMPLATE.CREATE.TEMPLATE_LABEL}
+                  />
+                </div>
+              </div>
+            </GridItem>
+          </GridContainer>
+          <Divider />
+          <GridContainer>
+            <GridItem lg={12} md={12} sm={12} xs={12}>
+              <div className="productTypeWrapper">
+                <div className="productHeading">
+                  <Typography
+                    style={{ ...templateTextStyles, marginBottom: '0px' }}
+                  >
+                    {MESSAGES.TEMPLATE.CREATE.PRODUCT_LABEL}
+                  </Typography>
+                  <NavLink to={PRODUCT_LEARN_URL} target="_blank">
+                    <Typography>
+                      {' '}
+                      {MESSAGES.TEMPLATE.CREATE.LEARN_TEXT}
+                    </Typography>
+                  </NavLink>
+                </div>
+                <div
+                  className="productsWrapper"
+                  style={{
+                    marginBottom:
+                      product &&
+                        (product.productType.includes('Postcards') || product.productType.includes('Professional Letters') || product.productType.includes('Real Penned Letter'))
+                        ? undefined
+                        : '100px',
+                  }}
+                >
+                  {sortedProducts &&
+                    sortedProducts
+                      ?.filter((prod) => {
+                        if (restrictedSet.has('2') || restrictedSet.has('4')) {
+                          return true;
+                        } else {
+                          return prod.windowed !== false;
+                        }
+                      })
+                      .map((prod, index) => {
+                        return (
+                          <div
+                            className={`productCard ${prod.productType ===
+                              (product && product.productType)
+                              ? 'active'
+                              : ''
+                              } ${isError && !product ? 'error' : ''} `}
+                            key={index}
+                            onClick={() => dispatch(selectProduct(prod))}
+                          >
+                            {Images[prod.productType]}
+                            <Typography>{prod.productType}</Typography>
+                            <div className={`productTooltip productTooltip-${index}`}>
+                              <InfoIcon fill="var(--primary-color)" className={`productTooltipIcon-${index}`} />
+                              <GeneralTooltip
+                                anchorSelect={`.productTooltipIcon-${index}`}
+                                place="right"
+                                className='customTooltipClass'
+                                title={<ProductTooltipContent product={prod} />}
+                              />
+                            </div>
+                          </div>
+                        );
+                      })}
+                </div>
+                {isError && !product && (
+                  <Typography className="error-field">
+                    *{MESSAGES.TEMPLATE.PRODUCT_TYPE_REQUIRED}
+                  </Typography>
+                )}
+              </div>
+            </GridItem>
+          </GridContainer>
+          {product?.productType?.includes('Postcards') ||
+            product?.productType?.includes('Professional Letters') || product?.productType?.includes('Real Penned Letter') ? (
+            <Divider />
+          ) : null}
+          {product && product.productType === 'Professional Letters' && (
+            <GridContainer>
+              <GridItem lg={6} md={6} sm={12} xs={12}>
+                <div className="templateSelectWrapper">
+                  <GeneralSelect
+                    className={isError && ![envelopeType].length ? 'error' : ''}
+                    //@ts-ignore
+                    selectedValue={envelopeType}
+                    //@ts-ignore
+                    setSelectedValue={setEnvelopeType}
+                    //@ts-ignore
+                    options={filteredEnvelopeTypes}
+                    placeholder="Envelope Type"
+                    error={MESSAGES.TEMPLATE.ENVELOPE_TYPE_REQUIRED}
+                    isError={isError && !Object.keys(envelopeType).length}
+                    label="Envelope Type*"
+                  />
+                </div>
+              </GridItem>
+            </GridContainer>
+          )}
+          {product && (product?.productType === 'Postcards' || product?.productType === 'Real Penned Letter') && product?.size && (
+            <GridContainer>
+              <GridItem lg={12} md={12} sm={12} xs={12}>
+                <div className="postCardSizeWrapper">
+                  <div className="postCardHeading">
+                    <Typography style={templateTextStyles}>
+                      {product?.productType === 'Real Penned Letter' ? 'Real Penned Letter Size*' : 'Postcard Size*'}
+                    </Typography>
+                  </div>
+                  <div className="postCardWrapper">
+                    {product?.size
+                      .sort((a: any, b: any) => a.id.localeCompare(b.id))
+                      .map((type: any, index: any) => {
+                        const size = type?.label?.split('x') || type?.size?.split('x');
+                        return (
+                          <div
+                            onClick={() => {
+                              if (product?.productType === 'Real Penned Letter') {
+                                dispatch(selectPostCard({
+                                  ...product,
+                                  id: type.id,
+                                  size: product.size,
+                                  selectedSize: type.size,
+                                }, 'Real Penned Letter'));
+                              } else {
+                                dispatch(selectPostCard({
+                                  ...type,
+                                  size: product.size,
+                                  selectedSize: type.size,
+                                },
+                                  'Postcards'
+                                ));
+                              }
+                            }}
+                            className={
+                              product?.productType === 'Real Penned Letter' ?
+                                `postCard ${product.selectedSize === type.size
+                                  ? 'active'
+                                  : ''
+                                }` :
+                                index === 0
+                                  ? `postCard postCard-small ${product.selectedSize === type.size
+                                    ? 'active'
+                                    : ''
+                                  }`
+                                  : index === 1
+                                    ? `postCard postCard-mid ${product.selectedSize === type.size
+                                      ? 'active'
+                                      : ''
+                                    }`
+                                    : index === 2
+                                      ? `postCard postCard-large ${product.selectedSize === type.size
+                                        ? 'active'
+                                        : ''
+                                      }`
+                                      : `postCard ${product.selectedSize === type.size
+                                        ? 'active'
+                                        : ''
+                                      }`
+                            }
+                            key={index}
+                          >
+                            <Typography>
+                              {product?.productType === 'Real Penned Letter'
+                                ? type?.title
+                                : `${size[0]}" x ${size[1]}"`}
+                            </Typography>
+                            {product?.productType === 'Real Penned Letter' ?
+                              <>
+                                {index === 0 &&
+                                  <div className='rplSubCards'>
+                                    <PersonalLetter fill="var(--svg-color)" />
+                                  </div>
+                                }
+
+                                {index === 1 &&
+                                  <div className='rplSubCards'>
+                                    <ProfessionalLetter fill="var(--svg-color)" />
+                                  </div>
+                                }
+                              </> :
+                              index === 0 ? (
+                                <SizeImage />
+                              ) : index === 1 ? (
+                                <SizeImageMid />
+                              ) : index === 2 ? (
+                                <SizeImageLarge />
+                              ) : <SizeImageXLarge />
+                            }
+                          </div>
+                        );
+                      })}
+                  </div>
+                  {isError &&
+                    product &&
+                    product.productType === 'Postcards' &&
+                    !product.selectedSize && (
+                      <Typography className="error-field">
+                        *{MESSAGES.TEMPLATE.POSTCARD_SIZE_REQUIRED}
+                      </Typography>
+                    )}
+                </div>
+              </GridItem>
+            </GridContainer>
+          )}
+        </div>
+        <div className="footerBtns">
+          <div className="createTemplateBtns">
+            <Button
+              style={{
+                ...footerButtonStyles,
+                border: '0.5px solid var(--border-color)',
+              }}
+              onClick={() =>
+                onReturnAndNavigate
+                  ? onReturnAndNavigate()
+                  : navigate(createTemplateRoute || '/create-template')
+              }
+            >
+              {MESSAGES.TEMPLATE.CREATE.CANCEL_BUTTON}
+            </Button>
+            <Button
+              style={{
+                ...footerButtonStyles,
+                color: '#ffffff',
+                backgroundColor: 'var(--primary-color)',
+              }}
+              onClick={handleNext}
+            >
+              {MESSAGES.TEMPLATE.CREATE.SUBMIT_BUTTON}
+            </Button>
+          </div>
+        </div>
+        <GenericSnackbar />
+      </div>
+    </>
+  );
+};
+
+export default CreateTemplate;