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

package/src/components/TopNavigation/styles.scss

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

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

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

@@ -0,0 +1,238 @@
+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: [9, 11, 13, 18 ],
+//     // 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

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