@openlettermarketing/olc-react-sdk 2.1.7 → 2.1.8

package/src/components/CreateTemplate/index.tsx

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