@openlettermarketing/olc-react-sdk 2.1.7 → 2.1.8

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

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

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

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

@@ -1,156 +0,0 @@
-.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;
-  }