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

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

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

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

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