@openlettermarketing/olc-react-sdk 0.0.18 → 0.0.20

package/src/components/SidePanel/templates/customTemplateSection.tsx

@@ -1,503 +0,0 @@
-import React, {useEffect, useState} from 'react';
-import {observer} from 'mobx-react-lite';
-import {SectionTab} from 'polotno/side-panel';
-import {useDispatch, useSelector} from 'react-redux';
-import type {StoreType} from 'polotno/model/store';
-import type {TemplatesSection} from 'polotno/side-panel';
-import {
-  clearAllTemplates,
-  getOneTemplate,
-  getAllTemplateCategories,
-  getAllTemplatesByTab,
-} from '../../../../src/redux/actions/templateActions';
-import {AppDispatch, RootState} from '../../../redux/store';
-// @ts-ignore
-import DesignIcon from '../../../assets/images/templates/template-default-design.tsx';
-// @ts-ignore
-import dummyTemplateIcon from '../../../assets/images/templates/dummy-template.svg';
-// @ts-ignore
-import CustomTemplate from '../../../assets/images/templates/custom-template';
-import Typography from '../../GenericUIBlocks/Typography';
-import './styles.scss';
-import Dialog from '../../GenericUIBlocks/Dialog';
-import {multiPageLetters, templateTypes, DPI} from '../../../utils/constants';
-import {drawRestrictedAreaOnPage} from '../../../utils/template-builder';
-import GeneralSelect from '../../GenericUIBlocks/GeneralSelect';
-import Input from '../../GenericUIBlocks/Input';
-import ModalCross from '../../../assets/images/modal-icons/modal-cross';
-import {MESSAGES} from '../../../utils/message';
-import {TEMPLATE_LOADING} from '../../../redux/actions/action-types';
-
-type SideSection = typeof TemplatesSection;
-
-const designDialogStyles = {
-  maxWidth: '600px',
-  minHeight: '270px',
-};
-
-const templateTextStyles: React.CSSProperties = {
-  color: `var(--textColor)`,
-  fontSize: `12px`,
-  fontStyle: `normal`,
-  fontWeight: `500`,
-  lineHeight: `normal`,
-  marginBottom: `16px`,
-};
-
-export type Payload = {
-  tab: string;
-  page: number;
-  pageSize: number;
-  productId: string | null;
-  search?: string;
-  categoryIds?: string[];
-};
-
-export type TemplateType = {
-  id: string;
-  label: string;
-};
-
-export type TemplateCategory = {
-  id: string;
-  title: string;
-  totalTemplates: number;
-  label?: string;
-};
-
-type TemplateRecord = {
-  id: string;
-  thumbnailUrl: string;
-  title: string;
-};
-
-const customTemplateSection: SideSection = {
-  name: 'Templates',
-  Tab: observer(
-    (props: {store: StoreType; active: boolean; onClick: () => void}) => (
-      <SectionTab name="Templates" {...props}>
-        <CustomTemplate fill="var(--sidepanelSVGColor)" />
-      </SectionTab>
-    )
-  ) as SideSection['Tab'],
-  Panel: observer(({store}) => {
-    const dispatch: AppDispatch = useDispatch();
-
-    const [currentTemplateType, setCurrentTemplateType] =
-      useState<TemplateType>(templateTypes[0]);
-    const [selectedCategory, setSelectedCategory] =
-      useState<TemplateCategory | null>(null);
-    const [selectedRecord, setSelectedRecord] = useState<TemplateRecord | null>(
-      null
-    );
-    const [templateCategories, setTemplateCategories] = useState<
-      TemplateCategory[]
-    >([]);
-    const [myTemplates, setMyTemplates] = useState<TemplateRecord[]>([]);
-    const [teamTemplates, setTeamTemplates] = useState<TemplateRecord[]>([]);
-    const [olcTemplates, setOlcTemplates] = useState<TemplateRecord[]>([]);
-    const [searchApplied, setSearchApplied] = useState(false);
-    const [search, setSearch] = useState('');
-
-    const templates = useSelector(
-      (state: RootState) => state.templates.templates
-    ) as Record<string, any>;
-    const template = useSelector(
-      (state: RootState) => state.templates.template
-    ) as Record<string, any>;
-    const templatesPagination = useSelector(
-      (state: any) => state.templates.templatesPagination
-    );
-    const product = useSelector((state: any) => state.templates.product);
-    const envelopeType = useSelector(
-      (state: RootState) => state.templates.envelopeType
-    );
-    const templateLoading = useSelector(
-      (state: RootState) => state.templates.templateLoading
-    );
-
-    const [isShowDialog, setIsShowDialog] = useState({
-      open: false,
-      model: '',
-    });
-
-    const handleLoadTemplateModel = (record: any) => {
-      setSelectedRecord(record);
-      handleDialogChange('load-template');
-    };
-
-    const getTemplatesByTab = async () => {
-      const payload: Payload = {
-        tab:
-          currentTemplateType?.id === '1'
-            ? 'my-templates'
-            : currentTemplateType?.id === '2'
-              ? 'team-templates'
-              : 'olc-templates',
-        page: 1,
-        pageSize: 500,
-        productId: product?.id,
-      };
-      search.length ? (payload.search = search) : undefined;
-      currentTemplateType?.id === '3'
-        ? (payload.categoryIds = selectedCategory?.id.split(','))
-        : undefined;
-
-      const templates = await getAllTemplatesByTab(payload);
-      if (templates.status === 200) {
-        if (currentTemplateType?.id === '1') {
-          setMyTemplates(templates?.data?.data?.rows);
-        } else if (currentTemplateType?.id === '2') {
-          setTeamTemplates(templates?.data?.data?.rows);
-        } else {
-          setOlcTemplates(templates?.data?.data?.rows);
-        }
-      }
-    };
-
-    const getAllCategories = async () => {
-      const categories: Record<string, any> = await dispatch(
-        getAllTemplateCategories
-      );
-      if (categories?.status === 200) {
-        setTemplateCategories(
-          categories?.data?.data
-            .filter((item: any) => item.totalTemplates > 0)
-            .map((item: any) => ({
-              ...item,
-              label: item.title,
-            }))
-        );
-      }
-    };
-
-    const handleSearch = () => {
-      if (search) {
-        setSearchApplied(true);
-        getTemplatesByTab();
-      }
-    };
-
-    const removeSearchInput = () => {
-      setSearchApplied(false);
-      setSearch('');
-    };
-
-    const searchKeyDown = (event: any) => {
-      if (event.key === 'Enter') {
-        handleSearch();
-      }
-    };
-
-    const handleLoadAllTemplate = (pagination = false, initialCall = false) => {
-      let page = pagination ? ++templates.currentPage : templates.currentPage;
-      if (initialCall) {
-        page = 1;
-      }
-      // Call getAllTemplates if required.
-    };
-
-    const handleLoadTemplate = (id: any) => {
-      dispatch(getOneTemplate(id, 'copy'));
-      handleDialogChange('');
-    };
-
-    const handleDialogChange = (model = '') => {
-      setIsShowDialog((prev) => ({open: !prev.open, model: model}));
-    };
-
-    const processPage = async (index: any, page: any) => {
-      return new Promise<void>((resolve, reject) => {
-        let pageNumber = page.children.find(
-          (el: any) => el.custom?.name === 'page-number'
-        );
-        const text = index === 0 ? 'Front' : 'Back';
-
-        if (pageNumber) {
-          pageNumber.set({text});
-          resolve();
-        } else {
-          page.addElement({
-            type: 'text',
-            custom: {name: 'page-number'},
-            text,
-            width: store.width,
-            align: 'center',
-            fontSize: 40,
-            x: -150,
-            y: -50,
-            selectable: false,
-            alwaysOnTop: true,
-          });
-          resolve();
-        }
-      });
-    };
-
-    const checkPageNumbers = async () => {
-      const promises = store.pages.map(async (page: any, index: any) => {
-        await processPage(index, page);
-      });
-
-      await Promise.all(promises); // Wait for all promises to resolve
-    };
-
-    const handleClearStore = () => {
-      store.clear();
-      let size: string | string[] = '';
-      let isPostCards = false;
-      let _product = product;
-      if (template?.product) {
-        size = template?.product?.paperSize;
-        isPostCards = template.product.productType === 'Postcards' || false;
-        _product = template.product;
-      } else if (product) {
-        size = product.selectedSize;
-        isPostCards = product.productType === 'Postcards' || false;
-      }
-      store.setUnit({
-        unit: 'in',
-        dpi: DPI,
-      });
-      size = (size as string)?.split('x');
-      store.setSize(+size[1] * DPI, +size[0] * DPI);
-      store.addPage();
-
-      if (multiPageLetters.includes(_product.productType)) {
-        store.addPage();
-        store.selectPage(store.pages[0].id);
-      }
-      drawRestrictedAreaOnPage(store, product, envelopeType);
-      handleDialogChange('');
-    };
-
-    useEffect(() => {
-      if (templateLoading !== null && templateLoading === false) {
-        handleDialogChange('');
-        dispatch({type: TEMPLATE_LOADING, payload: null});
-      }
-    }, [templateLoading]);
-
-    useEffect(() => {
-      if (!search) {
-        setSearchApplied(false);
-        setSearch('');
-        getTemplatesByTab();
-      }
-    }, [search]);
-
-    useEffect(() => {
-      handleLoadAllTemplate(true, true);
-      getAllCategories();
-      return () => {
-        dispatch(clearAllTemplates());
-      };
-    }, []);
-
-    useEffect(() => {
-      getTemplatesByTab();
-    }, [currentTemplateType, selectedCategory]);
-
-    useEffect(() => {
-      const div = document.querySelector('.polotno-panel-container');
-      const handleScroll = () => {
-        if (div) {
-          const isAtBottom =
-            div.scrollTop + div.clientHeight >= div.scrollHeight;
-          const isNeedToLoadMore =
-            templates.currentPage * templates.perPage < templates.count;
-          if (isAtBottom && !templatesPagination.loading && isNeedToLoadMore) {
-            handleLoadAllTemplate(true);
-          }
-        }
-      };
-
-      if (div) {
-        div.removeEventListener('scroll', handleScroll);
-        div.addEventListener('scroll', handleScroll);
-      }
-      return () => {
-        div?.removeEventListener('scroll', handleScroll);
-      };
-    }, [templates]);
-
-    return (
-      <div className="custom-template-section">
-        {isShowDialog.open && isShowDialog.model === 'design-own' && (
-          <Dialog
-            icon={<ModalCross fill="var(--primaryColor)" />}
-            title={MESSAGES.TEMPLATE.DESIGN_YOUR_OWN.TITLE}
-            subHeading={MESSAGES.TEMPLATE.DESIGN_YOUR_OWN.HEADING}
-            description={MESSAGES.TEMPLATE.DESIGN_YOUR_OWN.PARAGRAPH}
-            open={isShowDialog.open}
-            handleClose={() => handleDialogChange('')}
-            onCancel={() => handleDialogChange('')}
-            onSubmit={handleClearStore}
-            customStyles={designDialogStyles}
-            cancelText="Cancel"
-            submitText="OK"
-          />
-        )}
-        {isShowDialog.open && isShowDialog.model === 'load-template' && (
-          <Dialog
-            icon={<ModalCross />}
-            title={MESSAGES.TEMPLATE.SELECT_TEMPLATE.TITLE}
-            subHeading={MESSAGES.TEMPLATE.SELECT_TEMPLATE.HEADING}
-            description={MESSAGES.TEMPLATE.SELECT_TEMPLATE.PARAGRAPH}
-            open={isShowDialog.open}
-            handleClose={() => handleDialogChange('')}
-            onCancel={() => handleDialogChange('')}
-            onSubmit={() => handleLoadTemplate(selectedRecord?.id)}
-            customStyles={designDialogStyles}
-            cancelText="Cancel"
-            submitText="OK"
-          />
-        )}
-        <div
-          className="templateTabsWrapper"
-          style={{
-            maxWidth: window.innerWidth <= 600 ? '320px' : '480px',
-            backgroundColor: '#fff',
-          }}
-        >
-          <div style={{marginTop: '8px'}}>
-            <GeneralSelect
-              placeholder="Template Types"
-              options={templateTypes as any}
-              setSelectedValue={setCurrentTemplateType as any}
-              selectedValue={currentTemplateType as any}
-              // @ts-ignore
-              search={() => {}}
-              updateErrors={() => {}}
-              disableClearable={true}
-              templateBuilder={true}
-            />
-          </div>
-          {currentTemplateType?.id === '3' && (
-            <div style={{marginTop: 8}}>
-              <GeneralSelect
-                placeholder="Select Category"
-                options={templateCategories as any}
-                setSelectedValue={setSelectedCategory as any}
-                selectedValue={selectedCategory as any}
-                // @ts-ignore
-                search={(() => {}) as any}
-                updateErrors={() => {}}
-                disableClearable={false}
-                templateBuilder={true}
-              />
-            </div>
-          )}
-          <div
-            className="searchWrapper"
-            style={{marginTop: '16px', marginBottom: '16px'}}
-          >
-            <Input
-              type="text"
-              value={search}
-              name="search"
-              // @ts-ignore
-              onKeyDown={searchKeyDown}
-              onChange={(e: any) => setSearch(e.target.value.trimStart())}
-              placeholder="Search by template name"
-              inputIcon={true}
-              onClick={handleSearch}
-              searchApplied={searchApplied}
-              removeSearchInput={removeSearchInput}
-            />
-          </div>
-          {currentTemplateType?.id === '1' ? (
-            <>
-              <div
-                className="default-design"
-                onClick={() => handleDialogChange('design-own')}
-              >
-                <DesignIcon fill="var(--svgColorSecondary)" />
-                <Typography style={templateTextStyles}>
-                  Design Your Own
-                </Typography>
-              </div>
-              {myTemplates.length ? (
-                myTemplates.map((template: any, i: number) => (
-                  <div
-                    className="design-template"
-                    key={i}
-                    onClick={() => handleLoadTemplateModel(template)}
-                  >
-                    <img
-                      src={template.thumbnailUrl}
-                      alt={template.title}
-                      onError={({currentTarget}) => {
-                        currentTarget.onerror = null; // prevents looping
-                        currentTarget.src = dummyTemplateIcon;
-                        currentTarget.classList.add('dummy-image');
-                      }}
-                    />
-                  </div>
-                ))
-              ) : (
-                <div className="noTemplateText">
-                  <Typography>No My Templates to show</Typography>
-                </div>
-              )}
-            </>
-          ) : currentTemplateType?.id === '2' ? (
-            <>
-              {teamTemplates.length ? (
-                teamTemplates?.map((template, i) => (
-                  <div
-                    className="design-template"
-                    key={i}
-                    onClick={() => handleLoadTemplateModel(template)}
-                  >
-                    <img
-                      src={template.thumbnailUrl}
-                      alt={template.title}
-                      onError={({currentTarget}) => {
-                        currentTarget.onerror = null; // prevents looping
-                        currentTarget.src = dummyTemplateIcon;
-                        currentTarget.classList.add('dummy-image');
-                      }}
-                    />
-                  </div>
-                ))
-              ) : (
-                <div className="noTemplateText">
-                  <Typography>No Team Templates to show</Typography>
-                </div>
-              )}
-            </>
-          ) : currentTemplateType?.id === '3' ? (
-            <>
-              {olcTemplates.length ? (
-                olcTemplates?.map((template, i) => (
-                  <div
-                    className="design-template"
-                    key={i}
-                    onClick={() => handleLoadTemplateModel(template)}
-                  >
-                    <img
-                      src={template.thumbnailUrl}
-                      alt={template.title}
-                      onError={({currentTarget}) => {
-                        currentTarget.onerror = null; // prevents looping
-                        currentTarget.src = dummyTemplateIcon;
-                        currentTarget.classList.add('dummy-image');
-                      }}
-                    />
-                  </div>
-                ))
-              ) : (
-                <div className="noTemplateText">
-                  <Typography>No OLC Templates to show</Typography>
-                </div>
-              )}
-            </>
-          ) : null}
-        </div>
-      </div>
-    );
-  }) as SideSection['Panel'],
-};
-
-export default customTemplateSection;

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

@@ -1,151 +0,0 @@
-.polotno-panel-container {
-  overflow-y: auto;
-
-  & .custom-template-section {
-    display: "flex";
-    flex-wrap: "wrap";
-    overflow-y: "scroll";
-
-    & .title {
-      & span {
-        font-size: 16px;
-        font-weight: 600;
-        color: #ed5c2f;
-      }
-    }
-    @mixin designCommonStyles {
-      width: 320px;
-      height: 224px;
-      border-radius: 3px;
-      border: 0.5px solid #303030;
-      margin: 10px auto;
-      cursor: pointer;
-    }
-    & .default-design {
-      @include designCommonStyles;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      & p {
-        color: #303030;
-        font-weight: 600;
-        font-size: 12px;
-        line-height: 14.52px;
-        margin-top: 5px;
-      }
-    }
-    & .design-template {
-      @include designCommonStyles;
-      & img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-    }
-  }
-}
-
-.dummy-image {
-  padding: 85px;
-  object-fit: fill !important;
-}
-
-.MuiTabs-indicator {
-  background-color: #ed5c2f !important;
-}
-
-.templateTabsWrapper {
-  background-color: var(--sidepanelBgColor) !important;
-  .templateTabs {
-    .MuiTabScrollButton-root {
-      width: 15px;
-      opacity: 1 !important;
-      &:hover {
-        svg {
-          color: #ed5c2f !important;
-        }
-      }
-      .Mui-disabled {
-        opacity: 1 !important;
-      }
-    }
-  }
-}
-
-.noTemplateText {
-  height: 100%;
-  min-height: 200px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  p {
-    color: var(--textColor);
-    font-size: 18px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: normal;
-  }
-}
-
-.searchWrapper {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  width: 100%;
-  gap: 10px;
-  position: relative;
-
-  .searchInput {
-    border-radius: 3px;
-    border: 0.5px solid rgba(68, 66, 65, 0.5);
-    background: #fff;
-    width: 100%;
-    max-width: 520px;
-    padding: 5px 20px;
-    color: #000;
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: normal;
-    height: 40px;
-    width: 514px;
-    // position: relative;
-    &::after,
-    &::before {
-      display: none;
-    }
-
-    .searchIcon {
-      position: relative;
-      color: #ed5c2f;
-
-      &::before {
-        position: absolute;
-        content: "";
-        width: 1px;
-        height: 90%;
-        background-color: #000;
-        left: -5px;
-        opacity: 0.5;
-      }
-    }
-
-  }
-  
-  .searchApplied {
-    background: #fff8ee;
-    input {
-      padding-right: 28px;
-    }
-  }
-
-  .clearSerach {
-      position: absolute;
-      top: 10px;
-      right: 55px;
-      font-size: 18px;
-      opacity: 0.6;
-      cursor: pointer;
-    }
-}