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

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

@@ -0,0 +1,233 @@
+import React from 'react';
+
+// Utils
+import { MESSAGES } from '../../../../utils/message';
+import { TemplateCategory, TemplateRecord, TemplateType } from '../customTemplateSection';
+
+// Components
+import Typography from '../../../GenericUIBlocks/Typography';
+import GeneralSelect from '../../../GenericUIBlocks/GeneralSelect';
+import Input from '../../../GenericUIBlocks/Input';
+
+// Icons
+import DesignIcon from '../../../../assets/images/templates/template-default-design';
+import dummyTemplateIcon from '../../../../assets/images/templates/template-default-design';
+
+// styles
+import './styles.scss';
+
+
+const templateTextStyles: React.CSSProperties = {
+    color: `#000`,
+    fontSize: `12px`,
+    fontStyle: `normal`,
+    fontWeight: `500`,
+    lineHeight: `normal`,
+    marginBottom: `16px`,
+};
+
+
+type CustomTemplateSectionProps = {
+    selectedCategory: TemplateCategory | null,
+    templateCategories: TemplateCategory[],
+    currentTemplateType: TemplateType | undefined,
+    templateTypes: TemplateType[] | null | undefined,
+    search: any,
+    searchApplied: boolean,
+    loader: boolean,
+    platformName: any,
+    myTemplates: TemplateRecord[],
+    teamTemplates: TemplateRecord[],
+    olcTemplates: TemplateRecord[],
+    setSearch: any,
+    handleSearch: any,
+    removeSearchInput: any,
+    searchKeyDown: any,
+    setCurrentTemplateType: any,
+    setSelectedCategory: any,
+    handleLoadTemplateModel: any,
+    handleDialogChange: any,
+};
+
+
+const SideBarSelction = (props: CustomTemplateSectionProps) => {
+
+    const {
+        selectedCategory,
+        templateCategories,
+        currentTemplateType,
+        templateTypes,
+        search,
+        searchApplied,
+        loader,
+        platformName,
+        myTemplates,
+        teamTemplates,
+        olcTemplates,
+        setSearch,
+        handleSearch,
+        removeSearchInput,
+        searchKeyDown,
+        setCurrentTemplateType,
+        setSelectedCategory,
+        handleLoadTemplateModel,
+        handleDialogChange,
+    } = props;
+
+    const uniqueCurrentTemplates = Array.from(
+        new Map(olcTemplates.map((item) => [item.id, item])).values()
+    );
+
+    return (
+        <div className="custom-template-section">
+            <div className="templateTabsWrapper">
+                <div style={{ marginTop: '8px' }}>
+                    <GeneralSelect
+                        placeholder="Template Types"
+                        options={templateTypes as any}
+                        setSelectedValue={setCurrentTemplateType as any}
+                        selectedValue={currentTemplateType as any}
+                        builderSelect={true}
+                        search={false} 
+                        isError={false} 
+                        gallerySelect={false} 
+                        clearField={false}                    
+                    />
+                </div>
+                {currentTemplateType?.id === '3' && templateCategories?.length > 1 && (
+                    <div style={{ marginTop: 8 }}>
+                        <GeneralSelect
+                            placeholder="Select Category"
+                            options={templateCategories as any}
+                            setSelectedValue={setSelectedCategory as any}
+                            selectedValue={selectedCategory as any}
+                            builderSelect={true}
+                            clearField={true} 
+                            isError={false} 
+                            gallerySelect={false}            
+                        />
+                    </div>
+                )}
+                <div
+                    className="searchWrapper">
+                    <Input
+                        type="text"
+                        value={search}
+                        builderInput={true}
+                        // @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>
+                {loader ? (
+                    <div className="noTemplateText">
+                        <Typography>{MESSAGES.TEMPLATE.LOADING_TEMPLATE}</Typography>
+                    </div>
+                ) : currentTemplateType?.id === '1' ? (
+                    <>
+                        <div
+                            className="default-design"
+                            onClick={() => handleDialogChange('design-own')}
+                        >
+                            <DesignIcon fill="var(--primary-color)" />
+                            <Typography style={templateTextStyles}>
+                                {MESSAGES.TEMPLATE.DESIGN_NEW}
+                            </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
+                                            //@ts-ignore
+                                            currentTarget.src = dummyTemplateIcon;
+                                            currentTarget.classList.add('dummy-image');
+                                        }}
+                                    />
+                                </div>
+                            ))
+                        ) : (
+                            <div className="noTemplateText">
+                                <Typography>{MESSAGES.TEMPLATE.NO_MY_TEMPLATES}</Typography>
+                            </div>
+                        )}
+                    </>
+                ) : currentTemplateType?.id === '2' ? (
+                    <>
+                        {teamTemplates.length ? (
+                            teamTemplates?.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
+                                            //@ts-ignore
+                                            currentTarget.src = dummyTemplateIcon;
+                                            currentTarget.classList.add('dummy-image');
+                                        }}
+                                    />
+                                </div>
+                            ))
+                        ) : (
+                            <div className="noTemplateText">
+                                <Typography>
+                                    {MESSAGES.TEMPLATE.NO_TEAM_TEMPLATES}
+                                </Typography>
+                            </div>
+                        )}
+                    </>
+                ) : currentTemplateType?.id === '3' ? (
+                    <>
+                        {uniqueCurrentTemplates.length ? (
+                            uniqueCurrentTemplates?.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
+                                            //@ts-ignore
+                                            currentTarget.src = dummyTemplateIcon;
+                                            currentTarget.classList.add('dummy-image');
+                                        }}
+                                    />
+                                </div>
+                            ))
+                        ) : (
+                            <div className="noTemplateText">
+                                <Typography>
+                                    {platformName
+                                        ? `No ${platformName} Templates to show`
+                                        : MESSAGES.TEMPLATE.NO_OLC_TEMPLATES}
+                                </Typography>
+                            </div>
+                        )}
+                    </>
+                ) : null}
+            </div>
+        </div>
+    );
+}
+
+export default SideBarSelction;

package/src/components/SidePanel/Templates/SideBarGallery/styles.scss

@@ -0,0 +1,152 @@
+.polotno-panel-container {
+    overflow-y: scroll;
+
+    & .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 {
+    .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: #303030;
+      font-family: Inter;
+      font-size: 18px;
+      font-style: normal;
+      font-weight: 600;
+      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-family: Inter;
+      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;
+      }
+  }

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

@@ -0,0 +1,149 @@
+import React, { useState } from 'react';
+
+// Utils
+import { MESSAGES } from '../../../../../utils/message';
+
+// // icons
+import Typography from '../../../../GenericUIBlocks/Typography';
+// @ts-ignore
+import LeftArrow from '../../../../../assets/images/templates/left-arrow.svg';
+// @ts-ignore
+import RightArrow from '../../../../../assets/images/templates/right-arrow.svg';
+
+// styles
+import './styles.scss';
+
+const TemplatesCard = (props: any) => {
+  const {
+    templates,
+    loading,
+    handleLoadTemplateModel,
+    platformName,
+    currentTemplateType,
+    product,
+    searchApplied,
+    primaryColorRGBA,
+    designerQueryAmount,
+  } = props;
+
+  const [isFilpedIds, setIsFlipedIds] = useState<string[]>([]);
+
+  const singleSideProducts = [2, 4, 5, 16];
+
+  // handler for Flip
+  const handleFlip = (templateId: string) => {
+    const existingTemplateIds = isFilpedIds || [];
+    let updatedIds: string[];
+    if (existingTemplateIds.includes(templateId)) {
+      updatedIds = existingTemplateIds.filter((item) => item !== templateId);
+    } else {
+      updatedIds = [...existingTemplateIds, templateId];
+    }
+    setIsFlipedIds(updatedIds);
+  };
+
+  // handler for setting color
+  const colorSetter = (templateId: any, side: string) => {
+    const result =
+      !isFilpedIds.includes(templateId) && side === 'Front'
+        ? { fill: '#FFFFFF' }
+        : isFilpedIds.includes(templateId) && side === 'Back'
+          ? { fill: '#FFFFFF' }
+          : { fill: '#878585' };
+    return result;
+  };
+
+  // handler for setting rotation
+  const transformSetter = (templateId: any) => {
+    const result = isFilpedIds.includes(templateId)
+      ? {
+        transform: 'rotateY(0deg)',
+      }
+      : {
+        transform: 'rotateY(360deg)',
+      };
+    return result;
+  };
+
+  return (
+    <>
+      {loading ? (
+        <div className="noTemplateGallery-v2">
+          <Typography>{MESSAGES.TEMPLATE.LOADING_TEMPLATE}</Typography>
+        </div>
+      ) : templates.length ? (
+        templates.map((template: any, index: string) => {
+          return (
+            <div className="templateCard-v2" key={index}>
+              <div className="templateImage">
+                <img
+                  src={
+                    isFilpedIds.includes(template?.id)
+                      ? template.backThumbnailUrl
+                      : template.thumbnailUrl
+                  }
+                  alt="template"
+                  style={transformSetter(template?.id)}
+                  loading="lazy"
+                />
+                {!singleSideProducts.includes(Number(product?.id)) && (
+                  <>
+                    <img src={LeftArrow} alt="back" className="left-arrow" onClick={() => handleFlip(template?.id)} />
+                    <img src={RightArrow} alt="front" className="right-arrow" onClick={() => handleFlip(template?.id)} />
+                  </>
+                )}
+              </div>
+              <div className="title-btn-container">
+                <Typography className="templateName">
+                  {template?.title}
+                </Typography>
+                <button
+                  className="tempButton"
+                  onClick={() => handleLoadTemplateModel(template)}
+                >
+                  Use Template
+                </button>
+              </div>
+            </div>
+          );
+        })
+      ) : currentTemplateType?.id === '1' ? (
+        <div
+          className={`${+product?.id === 5 && designerQueryAmount
+              ? 'noTemplateGallery-v2 more-visible'
+              : product?.productType === 'Professional Letters'
+                ? 'noTemplateGallery-v2 noTemplateProfessionalAndPersonal'
+                : 'noTemplateGallery-v2'
+            }`}
+        >
+          <Typography>{MESSAGES.TEMPLATE.NO_MY_TEMPLATES}</Typography>
+        </div>
+      ) : currentTemplateType?.id === '2' ? (
+        <div
+          className={`${+product?.id === 5 && designerQueryAmount ? 'noTemplateGallery-v2 more-visible' : 'noTemplateGallery-v2'}`}
+        >
+          <Typography>{MESSAGES.TEMPLATE.NO_TEAM_TEMPLATES}</Typography>
+        </div>
+      ) : currentTemplateType?.id === '3' ? (
+        <div
+          className={`${+product?.id === 5 && designerQueryAmount
+              ? 'noTemplateGallery-v2 more-visible'
+              : product?.productType === 'Professional Letters'
+                ? 'noTemplateGallery-v2 noTemplateProfessionalAndPersonal'
+                : 'noTemplateGallery-v2'
+            }`}
+        >
+          <Typography>
+            {platformName
+              ? `No ${platformName} Templates to show`
+              : MESSAGES.TEMPLATE.NO_OLC_TEMPLATES}
+          </Typography>
+        </div>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};
+
+export default TemplatesCard;

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

@@ -0,0 +1,156 @@
+.templateCard-v2 {
+    width: 100%;
+    border-radius: 3px;
+    flex: 0 460px;
+    height: 374px;
+    background-color: #fff;
+    border: 0.36px solid #00000066;
+    padding: 20px;
+    border-radius: 12px;
+  
+    .templateImage {
+      position: relative;
+      margin-bottom: 16px;
+      border: none;
+      transition: 0.1s ease-in all;
+      height: 100%;
+      max-height: 280px;
+      background-color: #F9FAFB;
+  
+      img {
+        height: 100%;
+        width: 100%;
+        border-radius: 7px;
+        padding: 1.5px;
+        object-fit: contain;
+      }
+  
+      &:hover {
+        .tempButton {
+          display: flex !important;
+        }
+  
+        .left-arrow, .right-arrow {
+          display: block;
+        }
+      }
+
+      .left-arrow {
+        display: none;
+        position: absolute;
+        left: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+        cursor: pointer;
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        background-color: #ffffff;
+        transition: 0.1s ease-in all;
+
+        &:hover {
+          filter: invert(1) brightness(0.8);
+        }
+      }
+
+      .right-arrow {
+        display: none;
+        position: absolute;
+        right: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+        cursor: pointer;
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        background-color: #ffffff;
+        transition: 0.1s ease-in all;
+
+        &:hover {
+          filter: invert(1) brightness(0.8);
+        }
+      }
+    }
+
+    .title-btn-container{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 10px;
+
+        .templateName {
+          font-size: 16px;
+          font-weight: 400;
+          margin: 0;
+        }
+
+        .tempButton {
+          background-color: #ffffff;
+          color: #000;
+          text-transform: capitalize;
+          border-radius: 4px;
+          transition: 0.3s ease-in all !important;
+          font-size: 14px;
+          font-weight: 600;
+          font-family: var(--font-family);
+          width: 140px;
+          height: 40px;
+          border: none;
+          cursor: pointer;
+          border: 0.5px solid #0000003D;
+          box-shadow: 0px 2px 6px 0px #0000000A;
+
+          &:focus {
+            outline: none;
+          }
+
+          &:hover {
+            background-color: #F9FAFB;
+          }
+        }
+
+    }
+  
+  
+    .templateID {
+      font-size: 16px !important;
+      color: #6a6565 !important;
+      font-weight: 300 !important;
+      margin-top: 7px;
+    }
+  }
+  
+  .noTemplateGallery-v2 {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    background-color: #F9FAFB;
+    border-radius: 7px;
+    height: calc(100vh - 270px);
+    // margin-right: 32px;
+
+
+    @media (width <= 1125px){
+      height: calc(100vh - 320px);
+    }
+  
+    p {
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: normal;
+      color: #00000066 !important;
+      margin: 0;
+    }
+  }
+  
+  .noTemplateProfessionalAndPersonal {
+    height: calc(100vh - 1000px) !important;
+  }
+  
+  
+  .more-visible {
+    height: calc(100vh - 850px) !important;
+    margin-top: -20px !important;
+  }