@openlettermarketing/olc-react-sdk 2.1.7 → 2.1.8

package/src/components/SidePanel/Templates/ModalGallery/V2/index.tsx

@@ -1,235 +0,0 @@
-import React from 'react';
-
-// Utils
-import {
-  TemplateCategory,
-  TemplateRecord,
-  TemplateType,
-} from '../../customTemplateSection';
-import {hexToRgba, removeSThroughOne} from '../../../../../utils/helper';
-import {Products} from '../../../../../utils/products';
-
-// Components
-import TempCard from '../../TemplatesCard/V2';
-import GeneralSelect from '../../../../GenericUIBlocks/GeneralSelect';
-import Input from '../../../../GenericUIBlocks/Input';
-import Dialog from '../../../../GenericUIBlocks/Dialog/V2';
-
-// styles
-import './styles.scss';
-
-const galleryDialogStyles = {
-  maxWidth: '1025px',
-  minHeight: 'calc(100% - 50px)',
-  backgroundColor: '#fff',
-  padding: '40px 0 40px 40px',
-};
-
-type CustomTemplateSectionProps = {
-  product: any;
-  openGalleryModal: boolean;
-  selectedCategory: TemplateCategory | null;
-  templateCategories: TemplateCategory[];
-  currentTemplateType: TemplateType | undefined;
-  templateTypes: TemplateType[] | null | undefined;
-  designerQueryAmount?: string | number;
-  search: any;
-  searchApplied: boolean;
-  loader: boolean;
-  platformName: any;
-  myTemplates: TemplateRecord[];
-  teamTemplates: TemplateRecord[];
-  olcTemplates: TemplateRecord[];
-  pagination: any;
-  setSearch: any;
-  handleSearch: any;
-  removeSearchInput: any;
-  searchKeyDown: any;
-  currentTemplateTypeRef: any;
-  setCurrentTemplateType: any;
-  setSelectedCategory: any;
-  handleLoadTemplateModel: any;
-  handleTabChange: any;
-  handleDialogChange: any;
-  closeGalleryModal: any;
-  setOpenGalleryModal: any;
-  setHireDesignerModal: any;
-  currentTheme?: string | null | undefined;
-};
-
-const ModalGalleryV2 = (props: CustomTemplateSectionProps) => {
-  const {
-    product,
-    openGalleryModal,
-    selectedCategory,
-    templateCategories,
-    currentTemplateType,
-    templateTypes,
-    designerQueryAmount,
-    search,
-    searchApplied,
-    loader,
-    platformName,
-    myTemplates,
-    teamTemplates,
-    olcTemplates,
-    pagination,
-    setSearch,
-    handleSearch,
-    removeSearchInput,
-    searchKeyDown,
-    currentTemplateTypeRef,
-    setCurrentTemplateType,
-    setSelectedCategory,
-    handleLoadTemplateModel,
-    handleTabChange,
-    handleDialogChange,
-    closeGalleryModal,
-    setOpenGalleryModal,
-    setHireDesignerModal,
-    currentTheme,
-  } = props;
-
-  const primaryColorExtract = getComputedStyle(document.documentElement)
-    .getPropertyValue('--primary-color')
-    .trim();
-
-  const primaryColorRGBA = hexToRgba(primaryColorExtract, 0.5);
-
-  const currentTemplates =
-    currentTemplateType?.id === '1'
-      ? myTemplates
-      : currentTemplateType?.id === '2'
-        ? teamTemplates
-        : currentTemplateType?.id === '3'
-          ? olcTemplates
-          : [];
-
-  const uniqueCurrentTemplates = Array.from(
-    new Map(currentTemplates.map((item) => [item.id, item])).values()
-  );
-
-  const ModalTitle = ({title}: {title: string}) => {
-    return (
-      <>
-        {`${title}`}
-        <span
-          style={{
-            fontSize: '16px',
-            fontWeight: '400',
-            color: '#00000099',
-            marginLeft: '12px',
-            fontFamily: 'var(--font-family)',
-          }}
-        >{`(${removeSThroughOne(`${currentTemplates.length > 0 ? pagination.total : 0} templates`)})`}</span>
-      </>
-    );
-  };
-
-  return (
-    <>
-      <Dialog
-        customStyles={galleryDialogStyles}
-        open={openGalleryModal}
-        handleClose={closeGalleryModal}
-        isGallery={true}
-        currentTheme="v2"
-        title={
-          <ModalTitle
-            title={
-              product?.productType === 'Postcards'
-                ? `${product?.productType} (${product?.selectedSize || product?.paperSize}) `
-                : product?.productType === 'Real Penned Letter'
-                  ? 'Real Penned ' +
-                    product?.size.find(
-                      (item: {id: any}) => item?.id === product?.id
-                    )?.title
-                  : Products?.find((item) => item?.id === product?.id)?.title ||
-                    product?.productType
-            }
-          />
-        }
-      >
-        <div className="topBar-v2">
-          <div className="filters-container">
-            {currentTemplateType?.id === '3' &&
-              templateCategories?.length > 1 && (
-                <div className="filter-select" style={{minWidth: '200px'}}>
-                  <>
-                    <GeneralSelect
-                      placeholder="Industry/Theme"
-                      options={templateCategories as any}
-                      setSelectedValue={setSelectedCategory as any}
-                      selectedValue={selectedCategory as any}
-                      builderSelect={false}
-                      gallerySelect={true}
-                      clearField={true}
-                      search={false}
-                      isError={false}
-                      currentTheme="v2"
-                    />
-                  </>
-                </div>
-              )}
-            <div className="filter-select" style={{minWidth: '180px'}}>
-              <GeneralSelect
-                placeholder="All Templates"
-                options={templateTypes || []}
-                setSelectedValue={setCurrentTemplateType as any}
-                selectedValue={currentTemplateType as any}
-                builderSelect={false}
-                gallerySelect={true}
-                clearField={false}
-                search={false}
-                isError={false}
-                currentTheme="v2"
-              />
-            </div>
-          </div>
-          <Input
-            type="text"
-            value={search}
-            // @ts-ignore
-            onKeyDown={searchKeyDown}
-            onChange={(e: any) => setSearch(e.target.value.trimStart())}
-            placeholder="Search templates"
-            onClick={handleSearch}
-            searchApplied={searchApplied}
-            removeSearchInput={removeSearchInput}
-            inputIcon={true}
-            gellerySearch={true}
-            currentTheme="v2"
-            className="searchInput-v2"
-          />
-        </div>
-        <div
-          className={`templatesContent-v2 ${currentTemplateType?.id === '3' && 'heightOLC-v2'}`}
-          style={{
-            justifyContent: 'flex-start',
-            alignItems: 'center',
-            overflowY:
-              product?.productType === 'Personal Letters' &&
-              currentTemplates.length === 0
-                ? 'hidden'
-                : 'scroll',
-          }}
-        >
-          <TempCard
-            templates={uniqueCurrentTemplates}
-            handleLoadTemplateModel={handleLoadTemplateModel}
-            loading={loader}
-            platformName={platformName}
-            currentTemplateType={currentTemplateType}
-            product={product}
-            searchApplied={searchApplied}
-            primaryColorRGBA={primaryColorRGBA}
-            designerQueryAmount={designerQueryAmount}
-            currentTheme="v2"
-          />
-        </div>
-      </Dialog>
-    </>
-  );
-};
-
-export default ModalGalleryV2;

package/src/components/SidePanel/Templates/ModalGallery/V2/styles.scss

@@ -1,244 +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 var(--border-color);
-        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 {
-      width: 100%;
-      max-width: 480px;
-  
-      @media (width <= 800px) {
-        max-width: none !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;
-      width: 100%;
-      p {
-        color: var(--text-color);
-        font-size: 18px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: normal;
-      }
-    }
-  
-    .searchWrapper {
-      margin: 16px 0;
-    }
-  }
-  
-  .topBar-v2 {
-    display: flex;
-    justify-content: space-between;
-    gap: 16px;
-    align-items: center;
-    flex-wrap: wrap;
-    width: 100%;
-    position: relative;
-    gap: 10px;
-    margin: 24px 0 10px;
-    padding-right: 40px;
-  
-    @media (width <= 930px){
-      flex-direction: column-reverse;
-      justify-content: center;
-    }
-  
-    @media (width <= 768px){
-    padding: 0 15px 20px;
-    }
-
-    .filters-container {
-      display: flex;
-      gap: 16px;
-      align-items: center;
-      flex-wrap: wrap;
-
-      @media (width <= 768px){
-        gap: 10px;
-      }
-
-      .filter-select {
-
-        @media (width <= 768px){
-          min-width: 100%;
-        }
-
-        .select-layout-v2 {
-          margin: 0;
-          gap: 0;
-        }
-      }
-    }
-  }
-  .selectBar {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    margin-top: 25px;
-    padding: 0 35px;
-  
-    p {
-      color: #6A6565 !important;
-      font-weight: 400 !important;
-      font-size: 14px !important;
-      margin: 0;
-      width: 100%;
-      text-align: end;
-    }
-  }
-  
-  .templatesContent-v2 {
-    display: flex;
-    justify-content: flex-start;
-    align-items: flex-start;
-    flex-direction: row;
-    flex-wrap: wrap;
-    // padding: 15px 35px 0;
-    gap: 16px;
-    height: 100%;
-    max-height: calc(100vh - 248px);
-    overflow-y: scroll;
-    margin-top: 10px;
-    width: 100%;
-    padding-right: 30px;
-  
-     @media (width <= 1340px){
-        justify-content: center !important;
-      }
-  
-    @media (width <= 1125px){
-      max-height: calc(100vh - 320px);
-    }
-  
-    &::-webkit-scrollbar {
-      width: 8px;
-    }
-  
-    &::-webkit-scrollbar-track {
-      background: transparent !important;
-      border-radius: 1px;
-    }
-  
-    &::-webkit-scrollbar-thumb {
-      background: var(--scrollbar-thumb-color) !important;
-      border-radius: 10px;
-    }
-  
-    @supports not selector(::-webkit-scrollbar) {
-      body {
-        scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
-      }
-    }
-  
-    .defaultDesign {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      min-width: 440px;
-      height: 100%;
-      min-height: 358px;
-      flex: 0 440px;
-      cursor: pointer;
-      border: 0.36px solid #00000066;
-      padding: 20px;
-      border-radius: 12px;
-      padding: 1.5px;
-      position: relative;
-  
-      p {
-        color: var(--text-color);
-        font-weight: 600;
-        font-size: 12px;
-        line-height: 14.52px;
-        margin-top: 5px;
-      }
-      
-      .ownHeading-v2{
-        color: var(--text-color);
-        font-weight: 400 !important;
-        font-size: 18px !important;
-        line-height: 14.52px;
-        position: absolute;
-        bottom: 20px;
-        left: 20px;
-      }
-  
-    }
-  }
-  

package/src/components/SidePanel/Templates/ModalGallery/index.tsx

@@ -1,231 +0,0 @@
-import React from 'react';
-
-// Utils
-import { TemplateCategory, TemplateRecord, TemplateType } from '../customTemplateSection';
-import { hexToRgba, removeSThroughOne } from '../../../../utils/helper';
-import { Products } from '../../../../utils/products';
-
-// Components
-import TempCard from '../TemplatesCard';
-import Tabs from '../../../GenericUIBlocks/Tabs';
-import Typography from '../../../GenericUIBlocks/Typography';
-import GeneralSelect from '../../../GenericUIBlocks/GeneralSelect';
-import Input from '../../../GenericUIBlocks/Input';
-import Dialog from '../../../GenericUIBlocks/Dialog';
-
-// Icons
-import DesignIcon from '../../../../assets/images/templates/template-default-design';
-import Designer from '../../../../assets/images/templates/designer';
-
-const galleryDialogStyles = {
-    maxWidth: '1090px',
-    minHeight: 'calc(100% - 50px)',
-};
-
-type CustomTemplateSectionProps = {
-    product: any,
-    openGalleryModal: boolean,
-    selectedCategory: TemplateCategory | null,
-    templateCategories: TemplateCategory[],
-    currentTemplateType: TemplateType | undefined,
-    templateTypes: TemplateType[] | null | undefined,
-    designerQueryAmount?: string | number;
-    search: any,
-    searchApplied: boolean,
-    loader: boolean,
-    platformName: any,
-    myTemplates: TemplateRecord[],
-    teamTemplates: TemplateRecord[],
-    olcTemplates: TemplateRecord[],
-    pagination: any,
-    setSearch: any,
-    handleSearch: any,
-    removeSearchInput: any,
-    searchKeyDown: any,
-    currentTemplateTypeRef: any,
-    setCurrentTemplateType: any,
-    setSelectedCategory: any,
-    handleLoadTemplateModel: any,
-    handleTabChange: any,
-    handleDialogChange: any,
-    closeGalleryModal: any,
-    setOpenGalleryModal: any
-    setHireDesignerModal: any;
-};
-
-
-const ModalGallery = (props: CustomTemplateSectionProps) => {
-
-    const {
-        product,
-        openGalleryModal,
-        selectedCategory,
-        templateCategories,
-        currentTemplateType,
-        templateTypes,
-        designerQueryAmount,
-        search,
-        searchApplied,
-        loader,
-        platformName,
-        myTemplates,
-        teamTemplates,
-        olcTemplates,
-        pagination,
-        setSearch,
-        handleSearch,
-        removeSearchInput,
-        searchKeyDown,
-        currentTemplateTypeRef,
-        setSelectedCategory,
-        handleLoadTemplateModel,
-        handleTabChange,
-        handleDialogChange,
-        closeGalleryModal,
-        setOpenGalleryModal,
-        setHireDesignerModal,
-    } = props;
-
-    const primaryColorExtract = getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim();
-
-    const primaryColorRGBA = hexToRgba(primaryColorExtract, 0.5);
-
-    const currentTemplates = currentTemplateType?.id === '1'
-        ? myTemplates
-        : currentTemplateType?.id === '2'
-            ? teamTemplates
-            : currentTemplateType?.id === '3'
-                ? olcTemplates
-                : []
-
-    const uniqueCurrentTemplates = Array.from(
-        new Map(currentTemplates.map((item) => [item.id, item])).values()
-    );
-
-    return (
-        <>
-            <Dialog
-                customStyles={galleryDialogStyles}
-                open={openGalleryModal}
-                handleClose={closeGalleryModal}
-                title={
-                    product?.productType === 'Postcards'
-                        ? `${product?.productType} (${product?.label || product?.paperSize || product?.selectedSize})`
-                        :  product?.productType === 'Real Penned Letter' ? product.id == '16' ? "Real Penned Personal Letter" : "Real Penned Professional Letter"
-                        : Products?.find(item => item?.id === product?.id)?.title || product?.productType
-                }
-                isGallery={true}
-            >
-                <div className="topBar">
-                    <div>
-                        <Tabs
-                            value={currentTemplateType || {}}
-                            onChange={handleTabChange}
-                            tabs={templateTypes || []}
-                            className="myCustomTabs"
-                            tabClassName="myTab"
-                            indicatorClassName="myIndicator"
-                        />
-                    </div>
-                    <div>
-                        <Input
-                            type="text"
-                            value={search}
-                            // @ts-ignore
-                            onKeyDown={searchKeyDown}
-                            onChange={(e: any) => setSearch(e.target.value.trimStart())}
-                            placeholder="Search templates by name or ID"
-                            onClick={handleSearch}
-                            searchApplied={searchApplied}
-                            removeSearchInput={removeSearchInput}
-                            inputIcon={true}
-                            gellerySearch={true}
-                        />
-                    </div>
-                </div>
-                <div className="selectBar">
-                    {currentTemplateType?.id === '3' &&
-                        templateCategories?.length > 1 && (
-                            <div>
-                                <GeneralSelect
-                                    placeholder="Select Category"
-                                    options={templateCategories as any}
-                                    setSelectedValue={setSelectedCategory as any}
-                                    selectedValue={selectedCategory as any}
-                                    builderSelect={true}
-                                    gallerySelect={true}
-                                    clearField={true}
-                                    search={false}
-                                    isError={false}
-                                />
-                            </div>
-                        )}
-                    <Typography>{removeSThroughOne(`${currentTemplates.length > 0 ? pagination.total : 0} templates`)}</Typography>
-                </div>
-                <div className={`templatesContent ${currentTemplateType?.id === '3' && "heightOLC"}`} style={{
-                    justifyContent: loader || searchApplied ? "center" : "flex-start",
-                    alignItems: searchApplied ? "center" : "flex-start",
-                    height: searchApplied ? "calc(100vh - 300px)" : "auto",
-                    overflowY: product?.productType === "Personal Letters" && currentTemplates.length === 0 ? "hidden" : "scroll"
-                }}>
-                    {!loader && !searchApplied && currentTemplateTypeRef.current?.id === '1' && (
-                        <div>
-                            <div
-                                className={`defaultDesign 
-                                    ${product?.id === '13' &&
-                                        product?.size?.find((product: any) => product?.size === "4x6") || product?.paperSize === "4x6" ? "postcard-4x6"
-                                        : product?.id === '15' && product?.size?.find((product: any) => product?.size === "6x11") || product?.paperSize === "6x11" ? "postcard-6x11"
-                                            : product?.id === '14' && product?.size?.find((product: any) => product?.size === "6x9") || product?.paperSize === "6x9" ? "postcard-6x9"
-                                                : product?.id === '5' || product?.id === '16' ? 'personalLetter' : product?.id === '2' || product?.id === '4' || product?.id === '18' || product?.id === '38' ? 'professionalLetter' : product?.id === '9' ? 'biFold' : product?.id === '11' || product?.id === "21" ? 'triFold' : null}`}
-                                onClick={() => handleDialogChange('design-own')}
-                                style={{
-                                    boxShadow: `inset 0 0 0 2px ${primaryColorRGBA}`
-                                }}
-                            >
-                                <DesignIcon fill="var(--primary-color)" />
-                                <Typography>Design Your Own</Typography>
-                            </div>
-                            <Typography className='ownHeading'>Design Your Own</Typography>
-                        </div>
-                    )}
-                    {!loader && !searchApplied && currentTemplateTypeRef.current?.id !== '2' && designerQueryAmount && (
-                        <div>
-                            <div
-                                className={`defaultDesign 
-                                    ${product?.id === '13' &&
-                                        product?.size?.find((product: any) => product?.size === "4x6") || product?.paperSize === "4x6" ? "postcard-4x6"
-                                        : product?.id === '15' && product?.size?.find((product: any) => product?.size === "6x11") || product?.paperSize === "6x11" ? "postcard-6x11"
-                                            : product?.id === '14' && product?.size?.find((product: any) => product?.size === "6x9") || product?.paperSize === "6x9" ? "postcard-6x9"
-                                                : product?.id === '5' || product?.id === '16' ? 'personalLetter' : product?.id === '2' || product?.id === '4' || product?.id === '18' || product?.id === '38' ? 'professionalLetter' : product?.id === '9' ? 'biFold' : product?.id === '11' || product?.id === "21" ? 'triFold' : null}`}
-                                onClick={() => {
-                                    setOpenGalleryModal(false);
-                                    setHireDesignerModal(true);
-                                }}
-                                style={{
-                                    boxShadow: `inset 0 0 0 2px ${primaryColorRGBA}`
-                                }}
-                            >
-                                <Designer fill="var(--primary-color)" />
-                                <Typography>Hire a Designer</Typography>
-                            </div>
-                            <Typography className='ownHeading'>Hire a Designer +${designerQueryAmount}</Typography>
-                        </div>
-                    )}
-                    <TempCard
-                        templates={uniqueCurrentTemplates}
-                        handleLoadTemplateModel={handleLoadTemplateModel}
-                        loading={loader}
-                        platformName={platformName}
-                        currentTemplateType={currentTemplateType}
-                        product={product}
-                        searchApplied={searchApplied}
-                        primaryColorRGBA={primaryColorRGBA}
-                        designerQueryAmount={designerQueryAmount}
-                    />
-                </div>
-            </Dialog>
-        </>
-    );
-}
-
-export default ModalGallery;