@openlettermarketing/olc-react-sdk 2.1.6 → 2.1.8

package/src/components/TopNavigation/styles.scss

@@ -1,303 +0,0 @@
-.top-navigation-container {
-  background-color: white !important;
-  width: 100%;
-  padding: 23px 20px;
-  height: 100%;
-  max-height: 70px;
-  margin: 0;
-  top: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-bottom: 0.5px solid var(--border-color);
-
-  .middle {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 5px;
-    p {
-      text-align: center;
-      margin-bottom: 0px;
-      font-size: 16px;
-      font-weight: 400;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-      color: var(--text-color);
-    }
-    div{
-      display: flex;
-      justify-content: center;
-      align-items: center;
-        cursor: pointer;
-        border-radius: 50%;
-        padding: 5px;
-        transition: 0.1s ease-in-out all;
-        &:hover {
-          background-color: rgba(0, 0, 0, 0.076);
-        }
-        svg{
-          fill: var(--text-color);
-        }
-    }
-  }
-
-  & button {
-    max-width: 120px !important;
-    text-transform: capitalize;
-    color: var(--text-color);
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: normal;
-  }
-
-  & .MuiGrid-item {
-    padding-top: 0 !important;
-  }
-
-  & .left {
-    justify-content: flex-start !important;
-  }
-
-  & .right {
-    gap: 10px !important;
-  }
-
-  .actionsBtnWrapper {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    flex-wrap: wrap;
-    .download, .download-envelope, .clone, .add-page, .delete-page, .undo-page{
-      max-width: 120px;
-      min-height: 40px;
-      background-color: #fff;
-      color: var(--text-color);
-      border: 0.5px solid var(--border-color);
-      font-size: 15px;
-      font-weight: 500;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      min-height: 40px;
-      font-weight: 400;
-      max-width: auto;
-      min-width: 50px;
-      border-radius: 3px;
-      cursor: pointer;
-      &:hover{
-        background: #00000012 !important;
-      }
-    }
-
-    .add-page {
-      border-color: var(--text-color);
-      &:hover {
-        background: var(--text-color);
-      }
-    }
-
-    .delete-page {
-      border-color: var(--text-color);
-      &:hover {
-        background: var(--text-color);
-      }
-    }
-
-    .undo-page {
-      border-color: var(--primary-color);
-      &:hover {
-        background: var(--primary-color)12 !important;
-      }
-      svg {
-        fill: var(--primary-color);
-      }
-    }
-
-    .delete-icon {
-      fill: #dc3545 !important;
-    }
-  }
-
-  .templateCreateBtn {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 5px;
-  }
-}
-
-.v2-top-navigation-container {
-  background-color: white !important;
-  width: 100%;
-  padding: 30px 40px;
-  height: 100%;
-  // max-height: 84px;
-  margin: 0;
-  top: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-bottom: 0.5px solid var(--border-color);
-
-  .create-template-title{
-    width: 100%;
-    font-size: 20px;
-    font-weight: 600;
-    color: #000000CC;
-    margin: 0;
-
-    @media (max-width: 960px) {
-      text-align: center;
-    }
-  }
-
-  .middle-v2 {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 5px;
-
-    @media (max-width: 960px) {
-      margin: 10px 0;
-    }
-
-    .input-container{
-      border-bottom: 0.5px solid var(--border-color);
-      display: flex;
-      align-items: center;
-      gap: 5px;
-
-      input{
-        font-size: 20px;
-        font-weight: 400;
-        color: var(--text-color);
-        border: none;
-        outline: none;
-        background-color: transparent;
-      }
-    }
-
-    .pencil-icon{
-      cursor: pointer;
-      width: 20px;
-      height: 20px;
-    }
-
-    p {
-      text-align: center;
-      margin-bottom: 0px;
-      font-size: 20px;
-      font-weight: 400;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-      color: var(--text-color);
-    }
-
-    .icon-v2-container{
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        cursor: pointer;
-        padding: 5px;
-        transition: 0.1s ease-in-out all;
-        
-        svg{
-          fill: var(--text-color);
-        }
-    }
-  }
-
-  & button {
-    max-width: 120px !important;
-    text-transform: capitalize;
-    color: var(--text-color);
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: normal;
-  }
-
-  & .MuiGrid-item {
-    padding-top: 0 !important;
-  }
-
-  & .left {
-    justify-content: flex-start !important;
-  }
-
-  & .right {
-    gap: 12px !important;
-  }
-
-  .actionsBtnWrapper {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 12px;
-
-    @media (max-width: 960px) {
-      justify-content: center;
-    }
-    .download, .download-envelope, .clone, .add-page, .delete-page, .undo-page{
-      max-width: 120px;
-      min-height: 40px;
-      background-color: #fff;
-      color: var(--text-color);
-      border: 0.5px solid var(--border-color);
-      font-size: 15px;
-      font-weight: 500;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      min-height: 44px;
-      font-weight: 400;
-      max-width: auto;
-      min-width: 48px;
-      border-radius: 4px;
-      cursor: pointer;
-      &:hover{
-        background: #00000012 !important;
-      }
-    }
-
-    .add-page {
-      border-color: var(--text-color);
-      &:hover {
-        background: var(--text-color);
-      }
-    }
-
-    .delete-page {
-      border-color: var(--text-color);
-      &:hover {
-        background: var(--text-color);
-      }
-    }
-
-    .undo-page {
-      border-color: var(--primary-color);
-      &:hover {
-        background: var(--primary-color)12 !important;
-      }
-      svg {
-        fill: var(--primary-color);
-      }
-    }
-
-    .delete-icon {
-      fill: #dc3545 !important;
-    }
-  }
-
-  .templateCreateBtn {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 5px;
-  }
-}

package/src/importMeta.d.ts

@@ -1,31 +0,0 @@
-interface ImportMetaEnv {
-  readonly VITE_APP_ACCESS_TOKEN: string;
-  readonly VITE_APP_PLOTNO_API_KEY: string;
-  readonly VITE_APP_PUBLIC_API_KEY: string;
-  // Add other environment variables here if needed
-}
-
-interface ImportMeta {
-  readonly env: ImportMetaEnv;
-}
-
-declare module '*.png' {
-  const value: string;
-  export default value;
-}
-
-
-declare module '*.jpg' {
-  const value: string;
-  export default value;
-}
-
-declare module '*.jpeg' {
-  const value: string;
-  export default value;
-}
-
-declare module '*.scss' {
-  const content: any;
-  export default content;
-}

package/src/index.scss

@@ -1,131 +0,0 @@
-:root {
-  --font-family: 'Inter';
-  --scrollbar-thumb-color: hsl(29, 100%, 88%);
-  --scrollbar-track-color: grey;
-  --primary-color: #ED5C2F;
-  --secondary-color: #FFF8EE;
-  --svg-color: #fdb515;
-  --svg-color-not-active: #fdecd3;
-  --text-color: #000;
-  --modal-background-color: #FFF8EE;
-  --notification-background-color: #EF7820;
-  --notification-text-color: #fff;
-  --border-color: #303030;
-  --error-color: #ff0000;
-  --rt-opacity: 1 !important;
-
-  .builder-wrapper {
-    font-family: var(--font-family) !important;
-    margin: 0;
-
-    &::-webkit-scrollbar {
-      width: 10px;
-    }
-
-    &::-webkit-scrollbar-track {
-      background: var(--scrollbar-track-color) !important;
-      border-radius: 3px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: var(--scrollbar-thumb-color) !important;
-      border-radius: 3px;
-    }
-
-    @supports not selector(::-webkit-scrollbar) {
-      body {
-        scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
-      }
-    }
-
-    .bp5-navbar {
-      z-index: auto !important;
-      border-bottom: 1px solid rgba(17, 20, 24, 0.1019607843) !important;
-      
-      .bp5-card {
-        color: var(--text-color);
-        background-color: transparent;
-      }
-      .polotno-side-tabs-container {
-        .polotno-side-tabs-inner {
-          @media (width <= 800px) {
-            justify-content: center !important;
-          }
-        }
-      }
-    }
-
-    .polotno-font-item{
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-      width: 100%;
-      display: block !important;
-    }
-
-    .go4160152499,
-    .polotno-workspace-inner,
-    .polotno-panel-container,
-    .polotno-panel-container > div,
-    .polotno-panel-container > div > div,
-    .polotno-panel-container > div > div > div {
-      &::-webkit-scrollbar {
-        width: 10px;
-      }
-
-      &::-webkit-scrollbar-track {
-        background: var(--scrollbar-track-color) !important;
-        border-radius: 3px;
-      }
-
-      &::-webkit-scrollbar-thumb {
-        background: var(--scrollbar-thumb-color) !important;
-        border-radius: 3px;
-      }
-
-      @supports not selector(::-webkit-scrollbar) {
-        body {
-          scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
-        }
-      }
-    }
-
-    .polotno-panel-container > div > div {
-      color: #000;
-      p {
-        color: #000;
-      }
-    }
-  }
-
-  .no-scroll{
-    overflow: hidden;
-  }
-
-  .fields-search{
-    position: sticky;
-    top: 0;
-    background-color: #fff;
-    padding: 10px 0;
-    height: 100%;
-    max-height: 40px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 9;
-    margin: 0 !important;
-    span{
-      position: absolute;
-      left: 0px;
-      top: 5px;
-    }
-    input{
-      margin: 0 !important;
-    }
-  }  
-  .dynamic-content{
-    margin-top: 10px !important;
-      overflow: auto !important;
-    }
-
-  }

package/src/index.tsx

@@ -1,238 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import { BrowserRouter as Router } from 'react-router-dom';
-import { Provider } from 'react-redux';
-import store from './redux/store';
-import App from './App';
-
-// font families
-import '@fontsource/inter/200.css';
-import '@fontsource/inter/300.css';
-import '@fontsource/inter/400.css';
-import '@fontsource/inter/500.css';
-import '@fontsource/inter/600.css';
-import '@fontsource/inter/700.css';
-import '@fontsource/inter/800.css';
-
-// utils
-import { CustomCSSProperties } from './utils/customStyles';
-import { setEnv, setIsSandbox, setPublicApiKey } from './utils/helper';
-import { AddOnTypes, TemplateTypes } from './utils/types';
-import { SDK_VERSION } from '../version';
-
-// Function to dynamically load stylesheets based on sandbox mode
-const loadStylesheet = (currentTheme: string) => {
-  if (currentTheme === 'v2') {
-    import('./v2Theme.scss');
-  } else {
-    import('./index.scss');
-  }
-};
-
-interface TemplateBuilderProps {
-  container: HTMLElement | null;
-  secretKey: string;
-  publicApiKey: string;
-  platformName?: string | null;
-  templateGalleryModal?: boolean;
-  createTemplateRoute?: string | null;
-  templateBuilderRoute?: string | null;
-  olcTemplate?: Record<string, any>;
-  designerTemplateQuery?: Record<string, any> | null;
-  sandbox?: boolean;
-  allowSenderFields?: boolean;
-  allowPropertyFields?: boolean;
-  excludedFields?: string[] | null;
-  designerQueryAmount?: string | number;
-  allowedAddOns?: AddOnTypes[] | string[] | null | undefined;
-  allowedTemplateSections?: TemplateTypes[] | string[] | null | undefined;
-  env?: string;
-  restrictedProducts?: number[] | null | undefined;
-  disallowedProducts?: string[] | null | undefined;
-  propertyOfferCost?: number;
-  customPropertyOfferCost?: number;
-  gsvCost?: number;
-  allowAdditionalPage?: boolean;
-  showTemplateTypesPage?: boolean;
-  currentTheme?: string | null | undefined;
-  onReturnAndNavigate?: () => void;
-  onCreateCustomTemplateQuery?: (payload: any) => Promise<any>;
-  onGetOneTemplate?: (payload: any) => Promise<any>;
-  onGetTemplates?: (payload: any) => Promise<any>;
-  onGetCustomFields?: () => Promise<any>;
-  onDuplicateTemplate?: (payload: any) => 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>;
-  onSubmit?: (payload: any) => Promise<any>;
-  styles?: {
-    root?: CustomCSSProperties;
-  };
-}
-
-const TemplateBuilder = ({
-  container,
-  secretKey,
-  publicApiKey,
-  platformName,
-  templateGalleryModal = true,
-  createTemplateRoute,
-  templateBuilderRoute,
-  olcTemplate,
-  designerTemplateQuery,
-  sandbox,
-  allowSenderFields,
-  allowPropertyFields,
-  allowAdditionalPage,
-  excludedFields,
-  designerQueryAmount,
-  allowedAddOns,
-  allowedTemplateSections,
-  env,
-  restrictedProducts,
-  disallowedProducts,
-  propertyOfferCost,
-  customPropertyOfferCost,
-  gsvCost,
-  showTemplateTypesPage,
-  currentTheme,
-  onReturnAndNavigate,
-  onCreateCustomTemplateQuery,
-  onGetOneTemplate,
-  onGetTemplates,
-  onGetCustomFields,
-  onDuplicateTemplate,
-  onGetBrandingImages,
-  onDeleteBrandingImage,
-  onUploadBrandingImage,
-  onGetQRCodes,
-  onDeleteQRCodes,
-  onUploadQRCode,
-  onEditQRCode,
-  onSubmit,
-  styles,
-}: TemplateBuilderProps): void => {
-  if (!container) {
-    throw new Error('Root element not found');
-  }
-  if (!secretKey) {
-    throw new Error('secretKey not found');
-  }
-  if (!publicApiKey) {
-    throw new Error('publicApiKey not found');
-  }
-  
-  // Load appropriate stylesheet based on sandbox mode
-  loadStylesheet(currentTheme || 'default');
-  
-  if (sandbox) {
-    setIsSandbox(sandbox);
-  }
-  if (env && SDK_VERSION.includes('beta')) {
-    setEnv(env);
-  }
-  setPublicApiKey(publicApiKey);
-  const root = ReactDOM.createRoot(container);
-  root.render(
-    <>
-      <Provider store={store}>
-        <Router>
-          <App
-            secretKey={secretKey}
-            styles={styles}
-            olcTemplate={olcTemplate}
-            designerTemplateQuery={designerTemplateQuery}
-            platformName={platformName}
-            templateGalleryModal={templateGalleryModal}
-            createTemplateRoute={createTemplateRoute}
-            templateBuilderRoute={templateBuilderRoute}
-            allowSenderFields={allowSenderFields}
-            allowPropertyFields={allowPropertyFields}
-            allowAdditionalPage={allowAdditionalPage}
-            excludedFields={excludedFields}
-            designerQueryAmount={designerQueryAmount}
-            allowedAddOns={allowedAddOns}
-            allowedTemplateSections={allowedTemplateSections}
-            restrictedProducts={restrictedProducts}
-            disallowedProducts={disallowedProducts}
-            propertyOfferCost={propertyOfferCost}
-            customPropertyOfferCost={customPropertyOfferCost}
-            gsvCost={gsvCost}
-            showTemplateTypesPage={showTemplateTypesPage}
-            currentTheme={currentTheme}
-            onReturnAndNavigate={onReturnAndNavigate}
-            onCreateCustomTemplateQuery={onCreateCustomTemplateQuery}
-            onGetOneTemplate={onGetOneTemplate}
-            onGetTemplates={onGetTemplates}
-            onGetCustomFields={onGetCustomFields}
-            onDuplicateTemplate={onDuplicateTemplate}
-            onGetBrandingImages={onGetBrandingImages}
-            onDeleteBrandingImage={onDeleteBrandingImage}
-            onUploadBrandingImage={onUploadBrandingImage}
-            onGetQRCodes={onGetQRCodes}
-            onDeleteQRCodes={onDeleteQRCodes}
-            onUploadQRCode={onUploadQRCode}
-            onEditQRCode={onEditQRCode}
-            onSubmit={onSubmit}
-          />
-        </Router>
-      </Provider>
-    </>
-  );
-
-  //@ts-ignore
-  return {
-    destroy() {
-      console.log("React template builder destroyed");
-      root.unmount();
-    }
-  }
-};
-
-// Example to run the project locally for development. Comment out these lines when building the application
-// const rootElement = document.getElementById('root');
-// if (rootElement) {
-//   console.log("React SDK Loaded");
-//   TemplateBuilder({
-//     container: rootElement,
-//     secretKey: import.meta.env.VITE_APP_PLOTNO_API_KEY,
-//     publicApiKey: import.meta.env.VITE_APP_PUBLIC_API_KEY,
-//     sandbox: true,
-//     allowSenderFields: true,
-//     allowPropertyFields: true,
-//     templateGalleryModal: true,
-//     designerQueryAmount: 175,
-//     allowedAddOns: ['property_offer','gsv', 'custom_property_offer'],
-//     propertyOfferCost: 2.03,
-//     customPropertyOfferCost: 33,
-//     gsvCost: 10.5,
-//     excludedFields: ['{{C.FIRST_NAME}}', '{{C.ADDRESS_1}}', '{{SPF.FIRST_NAME}}'],
-//     showTemplateTypesPage: true,
-//     currentTheme: 'v2',
-//     env: 'staging',
-//     // onGetBrandingImages: getAllBrandingImages,
-//     // onDeleteBrandingImage: deleteBrandingImage,
-//     // onUploadBrandingImage: uploadBrandingImaage,
-//     // onGetQRCodes: getAllQRCodes,
-//     // onDeleteQRCodes: deleteQRCode,
-//     // onUploadQRCode: uploadQRCode,
-//     // onEditQRCode: updateQRCode,
-//     // allowedTemplateSections: ['my_templates'],
-//     // onGetCustomFields: getAllCustomFields,
-//      restrictedProducts: [38 ],
-//     // disallowedProducts: ['real_penned_letter', 'postcards'],
-//     // olcTemplate: olcTemplateData,
-//     // onGetOneTemplate: getOneTemplate,
-//     onGetTemplates: async () => {},
-//     // onSubmit: createTemplate,
-//     styles: {}
-//   });
-// } else {
-//   console.error("Root element '#root' not found in the document.");
-// }
-
-export default TemplateBuilder;

package/src/libs/test.ts

@@ -1,7 +0,0 @@
-/**
- * Add two numbers.
- * @param a - The first number
- * @param b - The second number
- * @returns Returns the sum of the two numbers.
- */
-export const addTwoNumbers = (a: number, b: number): number => a + b;