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

package/src/components/SidePanel/Templates/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 {
+  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

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