@openlettermarketing/olc-react-sdk 2.1.6 → 2.1.8

package/src/components/SidePanel/Templates/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 {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-wrap: wrap;
-  border-bottom: 0.5px solid #30303080;
-  padding: 0 35px 20px;
-  width: 100%;
-  position: relative;
-  gap: 10px;
-
-  @media (width <= 1125px){
-    flex-direction: column-reverse;
-    justify-content: center;
-  }
-
-  @media (width <= 768px){
-  padding: 0 15px 20px;
-  }
-}
-.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 {
-  display: flex;
-  justify-content: flex-start;
-  align-items: flex-start;
-  flex-direction: row;
-  flex-wrap: wrap;
-  padding: 15px 35px 0;
-  gap: 25px;
-  height: 100%;
-  max-height: calc(100vh - 248px);
-  overflow-y: scroll;
-  margin-top: 10px;
-  padding-bottom: 15px;
-  width: 100%;
-
-   @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: 316px;
-    height: 224px;
-    border-radius: 3px;
-    cursor: pointer;
-    background-color: #fff;
-    margin-bottom: 14px;
-    padding: 1.5px;
-    border-radius: 7px;
-
-    p {
-      color: var(--text-color);
-      font-weight: 600;
-      font-size: 12px;
-      line-height: 14.52px;
-      margin-top: 5px;
-    }
-
-  }
-  .ownHeading{
-    color: var(--text-color);
-    font-weight: 400 !important;
-    font-size: 18px !important;
-    line-height: 14.52px;
-  }
-
-  .postcard{
-    height: 211.66px !important;
-  }
-  .postcard-4x6{
-    height: 211.66px !important;
-  }
-  .postcard-6x11{
-    height: 173.73px !important;
-  }
-  .postcard-6x9{
-    height: 211.66px !important;
-  }
-  .personalLetter{
-    height: 486.73px !important;
-  }
-  .professionalLetter{
-    height: 408.06px !important;
-  }
-  .biFold{
-    height: 107.33px !important;
-  }
-  .triFold{
-    height: 420.33px !important;
-  }
-}
-
-.heightOLC{
-  max-height: calc(100vh - 270px);
-  @media (width <= 1125px){
-    max-height: calc(100vh - 320px);
-  }
-}

package/src/components/SidePanel/index.tsx

@@ -1,160 +0,0 @@
-import React, { useState } from 'react';
-
-// Polotno and third party imports
-import { SidePanelWrap } from 'polotno';
-import type { StoreType } from 'polotno/model/store';
-import {
-  SidePanel as PolotnoSidePanel,
-  DEFAULT_SECTIONS,
-} from 'polotno/side-panel';
-
-// Custom Sections / Components
-import CustomTemplateSection from './Templates/customTemplateSection';
-import CustomFieldSection from './CustomFields/customFieldSection';
-import { CustomUploadsV2Section } from './CustomUploads';
-import customAddOns from './CustomAddOns';
-import CustomQRCode from './CustomQRCode';
-import BlockColors from './CustomBlockColors';
-
-interface Props {
-  store: StoreType;
-  currentTemplateType: string;
-  currentProductId?: number;
-  platformName?: string | null;
-  templateGalleryModal?: boolean;
-  selectedSection?: string;
-  allowSenderFields?: boolean;
-  excludedFields?: string[] | null;
-  designerQueryAmount?: string | number;
-  allowPropertyFields?: boolean;
-  allowedAddOns?: any;
-  allowedTemplateSections?: any;
-  propertyOfferCost?: number;
-  customPropertyOfferCost?: number;
-  gsvCost?: number;
-  currentTheme?: string | null | undefined;
-  onGetOneTemplate?: (payload: any) => Promise<any>;
-  onCreateCustomTemplateQuery?: (payload: any) => Promise<any>;
-  onGetTemplates?: (payload: any) => Promise<any>;
-  onGetCustomFields?: () => Promise<any>;
-  onGetBrandingImages?: (payload: any) => Promise<any>;
-  onDeleteBrandingImage?: (id: string | number) => Promise<void>;
-  onUploadBrandingImage?: (payload: any) => Promise<any>;
-  onGetQRCodes?: (payload: any) => Promise<any>;
-  onDeleteQRCodes?: (id: string | number) => Promise<void>;
-  onUploadQRCode?: (payload: any) => Promise<any>;
-  onEditQRCode?: (payload: any) => Promise<any>;
-  selectedTemplateType?: string | null;
-}
-
-const SidePanel: React.FC<Props> = (props) => {
-  const [hireDesignerModal, setHireDesignerModal] = useState(false);
-
-  const sections =
-    props.currentTemplateType === 'Real Penned Letter' && props.currentProductId === 16
-      ? DEFAULT_SECTIONS.filter((section) => section.name === '')
-      : DEFAULT_SECTIONS.filter(
-        (section) => !['photos', 'size', 'templates', 'upload'].includes(section.name)
-      );
-
-  return (
-    <SidePanelWrap>
-      <PolotnoSidePanel
-        store={props.store}
-        sections={[
-          {
-            ...CustomTemplateSection,
-            Panel: (panelProps: any) => (
-              <CustomTemplateSection.Panel
-                {...panelProps}
-                platformName={props.platformName}
-                templateGalleryModal={props.templateGalleryModal}
-                designerQueryAmount={props.designerQueryAmount}
-                selectedSection={props.selectedSection}
-                allowedTemplateSections={props.allowedTemplateSections}
-                hireDesignerModal={hireDesignerModal}
-                allowedAddOns={props.allowedAddOns}
-                currentTheme={props.currentTheme}
-                setHireDesignerModal={setHireDesignerModal}
-                onCreateCustomTemplateQuery={props.onCreateCustomTemplateQuery}
-                onGetTemplates={props.onGetTemplates}
-                onGetOneTemplate={props.onGetOneTemplate}
-                selectedTemplateType={props.selectedTemplateType}
-              />
-            ),
-          },
-          ...sections,
-          ...(props.currentProductId !== 16 ? [{
-            ...CustomUploadsV2Section,
-            Panel: (panelProps: any) => (
-              <CustomUploadsV2Section.Panel
-                {...panelProps}
-                onGetBrandingImages={props.onGetBrandingImages}
-                onDeleteBrandingImage={props.onDeleteBrandingImage}
-                onUploadBrandingImage={props.onUploadBrandingImage}
-              />
-            ),
-          }] : []),
-          {
-            ...CustomFieldSection,
-            Panel: (panelProps: any) => (
-              <CustomFieldSection.Panel
-                {...panelProps}
-                onGetCustomFields={props.onGetCustomFields}
-                allowSenderFields={props.allowSenderFields}
-                excludedFields={props.excludedFields}
-                allowPropertyFields={props.allowPropertyFields}
-                platformName={props.platformName}
-              />
-            ),
-          },
-          ...(props.currentProductId !== 16
-            ? [
-              ...(props.currentProductId !== 4 && props.currentProductId !== 5 && props.currentProductId !== 38
-                ? [
-                  {
-                    ...BlockColors,
-                    Panel: (panelProps: any) => (
-                      <BlockColors.Panel {...panelProps} />
-                    ),
-                  },
-                ]
-                : []),
-              {
-                ...CustomQRCode,
-                Panel: (panelProps: any) => (
-                  <CustomQRCode.Panel
-                    {...panelProps}
-                    currentTheme={props.currentTheme}
-                    allowSenderFields={props.allowSenderFields}
-                    allowPropertyFields={props.allowPropertyFields}
-                    excludedFields={props.excludedFields}
-                    onGetQRCodes={props.onGetQRCodes}
-                    onDeleteQRCodes={props.onDeleteQRCodes}
-                    onUploadQRCode={props.onUploadQRCode}
-                    onEditQRCode={props.onEditQRCode}
-                  />
-                ),
-              },
-              {
-                ...customAddOns,
-                Panel: (panelProps: any) => (
-                  <customAddOns.Panel
-                    {...panelProps}
-                    allowedAddOns={props.allowedAddOns}
-                    propertyOfferCost={props.propertyOfferCost}
-                    customPropertyOfferCost={props.customPropertyOfferCost}
-                    gsvCost={props.gsvCost}
-                  />
-                ),
-              },
-            ] : []
-          )
-        ]}
-        defaultSection="text"
-      />
-    </SidePanelWrap>
-  );
-};
-
-export default SidePanel;