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

package/src/redux/reducers/templateReducer.ts

@@ -0,0 +1,485 @@
+/* eslint-disable no-case-declarations */
+import {
+  GET_ONE_TEMPLATE,
+  TEMPLATE_LOADING,
+  TEMPLATE_PAGINATION_CHANGE,
+  TEMPLATE_SEARCH,
+  CLEAR_ALL_TEMPLATE,
+  SELECT_PRODUCT,
+  SELECT_POSTCARD,
+  SET_UPLOADED_IMAGES,
+  CLEAR_TEMPLATE_FIELDS,
+  LOAD_DATA_FROM_LOCAL_STORAGE,
+  SET_ROS_OFFER_PERCENTAGE,
+  SET_HIRE_DESIGNER_FORM_FIELDS,
+  CLEAR_HIRE_DESIGNER_FORM_FIELDS,
+  SET_BLOCK_COLOR,
+  CLEAR_TEMPLATE,
+  CLEAR_REDUX,
+  SET_PAGE_COUNT,
+  SET_PRODUCTS
+} from '../actions/action-types';
+
+// Utils
+import {Products} from '../../utils/products';
+
+export interface DynamicField {
+  value: string;
+  key: string;
+  defaultValue: string;
+}
+
+export interface Template {
+  title: string;
+  product: Product | null;
+  templateType: string;
+}
+
+export interface Product {
+  id: string | number;
+  size: Array<{size: string}>;
+  productType: string;
+}
+
+export interface TemplatesState {
+  count: number;
+  rows: any[];
+  currentPage: number;
+  lastPage: number;
+  from: number;
+  to: number;
+  perPage: number;
+  total: number;
+  loading: boolean;
+  totalRecordsInDB: number | null;
+}
+
+export interface PaginationState {
+  page: number;
+  pageSize: number;
+  loading: boolean;
+}
+
+export interface TemplateState {
+  title: string;
+  product: Product | null;
+  dynamicField: string;
+  dynamicFields: Record<string, DynamicField>;
+  defaultDynamicFieldsHashMap: Record<string, DynamicField>;
+  defaultDynamicFields: DynamicField[];
+  defaultSenderFields: DynamicField[];
+  defaultPropertyFields: DynamicField[];
+  defaultMiscFields: DynamicField[];
+  products: any[];
+  productDetails: any[];
+  productDetailByTemplate: any[];
+  templates: TemplatesState;
+  templatesPagination: PaginationState;
+  template: Template | null;
+  totalRecordsInDB: number | null;
+  search: string;
+  searchProductIds: string;
+  searchCreator: string;
+  templateType: string;
+  envelopeType: string;
+  templateLoading: boolean | null;
+  uploadedImages: any[];
+  offerPercentage: string | null;
+  blockColor: string;
+  hireDesignerForm: any;
+  pageCount: number;
+}
+
+// @ts-ignore
+const initialState: TemplateState = {
+  title: '',
+  product: null,
+  dynamicField: '',
+  dynamicFields: {},
+  defaultDynamicFieldsHashMap: {
+    '{{C.FIRST_NAME}}': {
+      value: 'First Name',
+      key: '{{C.FIRST_NAME}}',
+      defaultValue: 'John',
+    },
+    '{{C.LAST_NAME}}': {
+      value: 'Last Name',
+      key: '{{C.LAST_NAME}}',
+      defaultValue: 'Doe',
+    },
+    '{{C.FIRST_NAME}} {{C.LAST_NAME}}': {
+      value: 'Full Name',
+      key: '{{C.FIRST_NAME}} {{C.LAST_NAME}}',
+      defaultValue: 'John Doe',
+    },
+    '{{C.COMPANY_NAME}}': {
+      value: 'Company Name',
+      key: '{{C.COMPANY_NAME}}',
+      defaultValue: 'ABC Company, Inc.',
+    },
+    '{{C.ADDRESS_1}}': {
+      value: 'Mailing Address 1',
+      key: '{{C.ADDRESS_1}}',
+      defaultValue: '123 Main Street',
+    },
+    '{{C.ADDRESS_2}}': {
+      value: 'Mailing Address 2',
+      key: '{{C.ADDRESS_2}}',
+      defaultValue: 'Suite 2',
+    },
+    '{{C.CITY}}': {
+      value: 'Mailing City',
+      key: '{{C.CITY}}',
+      defaultValue: 'Lawrence',
+    },
+    '{{C.STATE}}': {
+      value: 'Mailing State',
+      key: '{{C.STATE}}',
+      defaultValue: 'MA',
+    },
+    '{{C.ZIP_CODE}}': {
+      value: 'Mailing Zip Code',
+      key: '{{C.ZIP_CODE}}',
+      defaultValue: '01843',
+    },
+    '{{C.PHONE_NUMBER}}': {
+      value: 'Contact Phone Number',
+      key: '{{C.PHONE_NUMBER}}',
+      defaultValue: '(555) 278-9389',
+    },
+    '{{C.EMAIL}}': {
+      value: 'Contact Email',
+      key: '{{C.EMAIL}}',
+      defaultValue: 'johndoe@gmail.com',
+    },
+  },
+  defaultDynamicFields: [
+    {
+      value: 'First Name',
+      key: '{{C.FIRST_NAME}}',
+      defaultValue: 'John',
+    },
+    {
+      value: 'Last Name',
+      key: '{{C.LAST_NAME}}',
+      defaultValue: 'Doe',
+    },
+    {
+      value: 'Full Name',
+      key: '{{C.FIRST_NAME}} {{C.LAST_NAME}}',
+      defaultValue: 'John Doe',
+    },
+    {
+      value: 'Company Name',
+      key: '{{C.COMPANY_NAME}}',
+      defaultValue: 'ABC Company, Inc.',
+    },
+    {
+      value: 'Address 1',
+      key: '{{C.ADDRESS_1}}',
+      defaultValue: '123 Main Street',
+    },
+    {
+      value: 'Address 2',
+      key: '{{C.ADDRESS_2}}',
+      defaultValue: 'Suite 2',
+    },
+    {
+      value: 'City',
+      key: '{{C.CITY}}',
+      defaultValue: 'Lawrence',
+    },
+    {
+      value: 'State',
+      key: '{{C.STATE}}',
+      defaultValue: 'MA',
+    },
+    {
+      value: 'Zip Code',
+      key: '{{C.ZIP_CODE}}',
+      defaultValue: '01843',
+    },
+    {
+      value: 'Phone Number',
+      key: '{{C.PHONE_NUMBER}}',
+      defaultValue: '(555) 278-9389',
+    },
+    {
+      value: 'Email',
+      key: '{{C.EMAIL}}',
+      defaultValue: 'johndoe@gmail.com',
+    },
+  ],
+  defaultSenderFields: [
+    {
+      value: 'Sender First Name',
+      key: '{{SPF.FIRST_NAME}}',
+      defaultValue: 'John',
+    },
+    {
+      value: 'Sender Last Name',
+      key: '{{SPF.LAST_NAME}}',
+      defaultValue: 'Doe',
+    },
+    {
+      value: "Sender Company Name",
+      key: "{{SPF.COMPANY_NAME}}",
+      defaultValue: "ABC Company, Inc.",
+    },
+    {
+      value: "Sender Address 1",
+      key: "{{SPF.ADDRESS_1}}",
+      defaultValue: "123 Main Street",
+    },
+    {
+      value: "Sender Address 2",
+      key: "{{SPF.ADDRESS_2}}",
+      defaultValue: "Suite 2",
+    },
+    {
+      value: "Sender City",
+      key: "{{SPF.CITY}}",
+      defaultValue: "Lawrence",
+    },
+    {
+      value: "Sender State",
+      key: "{{SPF.STATE}}",
+      defaultValue: "MA",
+    },
+    {
+      value: "Sender Zip Code",
+      key: "{{SPF.ZIP_CODE}}",
+      defaultValue: "01843",
+    },
+    {
+      value: "Sender Phone Number",
+      key: "{{SPF.PHONE_NUMBER}}",
+      defaultValue: "(555) 278-9389",
+    },
+    {
+      value: 'Sender Email',
+      key: '{{SPF.EMAIL}}',
+      defaultValue: 'johndoe@gmail.com',
+    }
+  ],
+  defaultPropertyFields: [
+    {
+      value: 'Property Address',
+      key: '{{C.PROPERTY_ADDRESS}}',
+      defaultValue: '912 Main Street',
+    },
+    {
+      value: 'Property City',
+      key: '{{C.PROPERTY_CITY}}',
+      defaultValue: 'New York',
+    },
+    {
+      value: 'Property State',
+      key: '{{C.PROPERTY_STATE}}',
+      defaultValue: 'NY',
+    },
+    {
+      value: 'Property Zip Code',
+      key: '{{C.PROPERTY_ZIP_CODE}}',
+      defaultValue: '10008',
+    },
+    {
+      value: 'Property Offer',
+      key: '{{C.PROPERTY_OFFER}}',
+      defaultValue: '$123,456.00',
+    },
+    {
+      value: 'Property Written Offer',
+      key: '{{ROS.WRITTEN_OFFER}}',
+      defaultValue:
+        'One hundred twenty-three thousand four hundred fifty-six and 00/100',
+    },
+  ],
+  defaultMiscFields: [
+    {
+      value: "Mailing Date - mm/dd/yyyy",
+      key: "{{MISC.MAILED_DATE}}",
+      defaultValue: "12/13/2025",
+    },
+    {
+      value: "Mailing Date - Month DD, YYYY",
+      key: "{{MISC.MAILED_DATE_MONTH_D_Y}}",
+      defaultValue: "December 13, 2025",
+    },
+    {
+      value: "Respond by Date - mm/dd/yyyy",
+      key: "{{MISC.RESPOND_BY_DATE}}",
+      defaultValue: "01/12/2026",
+    },
+    {
+      value: "Respond by Date - Month DD, YYYY",
+      key: "{{MISC.RESPOND_BY_DATE_MONTH_D_Y}}",
+      defaultValue: "January 12, 2026",
+    },
+  ],
+  products: Products,
+  productDetailByTemplate: [],
+  templates: {
+    count: 0,
+    rows: [],
+    currentPage: 1,
+    lastPage: 1,
+    from: 0,
+    to: 0,
+    perPage: 20,
+    total: 0,
+    loading: true,
+    totalRecordsInDB: null,
+  },
+  templatesPagination: {page: 0, pageSize: 20, loading: false},
+  template: null,
+  totalRecordsInDB: null,
+  search: '',
+  searchProductIds: '',
+  searchCreator: '',
+  templateType: 'json',
+  envelopeType: '',
+  templateLoading: null,
+  uploadedImages: [],
+  offerPercentage: null,
+  blockColor: '#FFFFFF45',
+  hireDesignerForm: {
+    queryTitle: '',
+    queryEmail: '',
+    queryFiles: [],
+    queryVideoUrl: '',
+    queryComments: '',
+  },
+  pageCount: 1
+};
+
+// @ts-ignore
+const templateReducer = (
+  state = initialState,
+  {type, payload}: {type: string; payload: any}
+): TemplateState => {
+  switch (type) {
+    case GET_ONE_TEMPLATE:
+      return {
+        ...state,
+        template: payload.data,
+        title: payload.type === 'copy' ? state.title : payload.data.title,
+        product: payload.data.product,
+        templateType: payload.data.templateType,
+      };
+    case CLEAR_TEMPLATE:
+      return {
+        ...state,
+        template: null,
+      };
+    case TEMPLATE_LOADING:
+      return {
+        ...state,
+        templateLoading: payload,
+      };
+    case TEMPLATE_PAGINATION_CHANGE:
+      return {
+        ...state,
+        templatesPagination: {...payload.data},
+      };
+    case TEMPLATE_SEARCH:
+      return {
+        ...state,
+        [payload.name]: payload.value,
+      };
+    case SELECT_PRODUCT:
+      return {
+        ...state,
+        product: {
+          ...payload.product,
+          selectedSize: payload.product.size[0].size,
+          ...(!payload.productType &&
+          payload.product.productType !== 'Postcards'
+            ? {selectedSize: payload.product.size[0].size}
+            : {}),
+          ...(payload.productType ? {productType: payload.productType} : {}),
+        },
+      };
+    case SELECT_POSTCARD:
+      return {
+        ...state,
+        product: {
+          ...payload.product,
+          productType: payload.productType,
+        },
+      };
+    case SET_HIRE_DESIGNER_FORM_FIELDS:
+      return {
+        ...state,
+        hireDesignerForm: {
+          ...state.hireDesignerForm,
+          ...payload,
+        },
+      };
+    case SET_UPLOADED_IMAGES:
+      return {
+        ...state,
+        uploadedImages: payload,
+      };
+    case CLEAR_ALL_TEMPLATE:
+      return {
+        ...state,
+        templates: {...initialState.templates},
+      };
+    case CLEAR_TEMPLATE_FIELDS:
+      return {
+        ...state,
+        title: '',
+        product: null,
+        dynamicField: '',
+        dynamicFields: {},
+        templateType: 'json',
+        envelopeType: '',
+      };
+    case LOAD_DATA_FROM_LOCAL_STORAGE:
+      return {
+        ...state,
+        title: payload.data.title,
+        product: payload.data.product,
+        templateType: payload.data.templateType,
+        envelopeType: payload.data.envelopeType,
+      };
+    case CLEAR_HIRE_DESIGNER_FORM_FIELDS:
+      return {
+        ...state,
+        hireDesignerForm: {
+          queryTitle: '',
+          queryEmail: '',
+          queryFiles: [],
+          queryVideoUrl: '',
+          queryComments: '',
+        },
+      };
+    case SET_ROS_OFFER_PERCENTAGE:
+      return {
+        ...state,
+        offerPercentage: payload,
+      };
+    case SET_BLOCK_COLOR:
+      return {
+        ...state,
+        blockColor: payload,
+      };
+    case SET_PAGE_COUNT:
+      return {
+        ...state,
+        pageCount: payload,
+      };
+    case SET_PRODUCTS:
+      return {
+        ...state,
+        productDetails: payload?.rows || [],
+      };
+    case CLEAR_REDUX:
+      return initialState;
+    default:
+      return state;
+  }
+};
+
+export {templateReducer};

package/src/redux/store.ts

@@ -0,0 +1,18 @@
+// redux/store.ts
+import { configureStore } from '@reduxjs/toolkit';
+import rootReducer from './reducers'; 
+
+const store = configureStore({
+  reducer: rootReducer,
+  middleware: (getDefaultMiddleware : any) =>
+    getDefaultMiddleware({
+      thunk: true,
+      serializableCheck: false,
+      immutableCheck: false,
+    }),
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
+
+export default store;

package/src/styles/colors.scss

@@ -0,0 +1,61 @@
+// variables
+
+// background colors
+$bgLight: #fff7ea;
+$bgTransparent: rgba(0, 0, 0, 0.5);
+$bgLight300: #fff9f0;
+$bgGrey: #f7fffb;
+$bgPrimary: #f28230;
+$bgPrimary800: #ef7820;
+$bgGrey500: #f9f9f9;
+$formLayoutBg: linear-gradient(
+  252deg,
+  #eec5b3 11.65%,
+  #ffceb3 26.15%,
+  #ffe4b4 42.72%,
+  #ffe4b3 61.64%,
+  #fbcbb4 80.93%,
+  #e2b9b3 100%
+);
+// primary color
+$primary-color: #ed5c2f;
+// dark shades
+$black: #000;
+$black200: rgba(68, 66, 65, 0.3);
+$black300: rgba(0, 0, 0, 0.5);
+$black400: #303030;
+$black700: #000000bf;
+$dark800: #080808;
+$blue: #212b36;
+// yellow shades
+$yellow: #fab331;
+$yellow300: #fff8ee;
+$yellow400: #fdecd3;
+$yellow500: #ffdec0;
+// light shades
+$white: #fff;
+$grey: #545454;
+$grey300: #aaa;
+$grey400: #2b2b2a;
+$grey500: #444241;
+$grey800: #222221;
+$light: rgba(255, 248, 238, 1);
+$light300: #f4f4f4;
+$grey: #696969;
+$greyCheckBox: #d1d5db;
+// red shades
+$red: #ff0000;
+$red400: rgba(255, 0, 0, 1);
+// green shades
+$green500: #03a155;
+$success: #7ed321;
+$bgSuccess: #01bb62;
+// orange shade
+$iconColor: rgba(237, 92, 47, 1);
+// brown shades
+$brown300: rgba(255, 192, 184, 0.23);
+
+// Stripe Variables
+$stripeBlue: #0570de;
+$stripeText: #30313d;
+$stripeDanger: #df1b41;

package/src/test/mocks.js

@@ -0,0 +1,89 @@
+export const mockElement = () => ({
+  mount: jest.fn(),
+  destroy: jest.fn(),
+  on: jest.fn(),
+  update: jest.fn(),
+});
+
+export const mockElements = () => {
+  const elements = {};
+  return {
+    create: jest.fn((type) => {
+      elements[type] = mockElement();
+      return elements[type];
+    }),
+    getElement: jest.fn((type) => {
+      return elements[type] || null;
+    }),
+    update: jest.fn(),
+  };
+};
+
+export const mockCustomCheckoutSession = () => {
+  return {
+    lineItems: [],
+    currency: 'usd',
+    shippingOptions: [],
+    total: {
+      subtotal: 1099,
+      taxExclusive: 0,
+      taxInclusive: 0,
+      shippingRate: 0,
+      discount: 0,
+      total: 1099,
+    },
+    confirmationRequirements: [],
+    canConfirm: true,
+  };
+};
+
+export const mockCustomCheckoutSdk = () => {
+  const elements = {};
+
+  return {
+    changeAppearance: jest.fn(),
+    createElement: jest.fn((type) => {
+      elements[type] = mockElement();
+      return elements[type];
+    }),
+    getElement: jest.fn((type) => {
+      return elements[type] || null;
+    }),
+    session: jest.fn(() => mockCustomCheckoutSession()),
+    applyPromotionCode: jest.fn(),
+    removePromotionCode: jest.fn(),
+    updateShippingAddress: jest.fn(),
+    updateBillingAddress: jest.fn(),
+    updatePhoneNumber: jest.fn(),
+    updateEmail: jest.fn(),
+    updateLineItemQuantity: jest.fn(),
+    updateShippingOption: jest.fn(),
+    confirm: jest.fn(),
+    on: jest.fn(),
+  };
+};
+
+export const mockEmbeddedCheckout = () => ({
+  mount: jest.fn(),
+  unmount: jest.fn(),
+  destroy: jest.fn(),
+});
+
+export const mockStripe = () => {
+  const customCheckoutSdk = mockCustomCheckoutSdk();
+  return {
+    elements: jest.fn(() => mockElements()),
+    createToken: jest.fn(),
+    createSource: jest.fn(),
+    createPaymentMethod: jest.fn(),
+    confirmCardPayment: jest.fn(),
+    confirmCardSetup: jest.fn(),
+    paymentRequest: jest.fn(),
+    registerAppInfo: jest.fn(),
+    _registerWrapper: jest.fn(),
+    initCustomCheckout: jest.fn().mockResolvedValue(customCheckoutSdk),
+    initEmbeddedCheckout: jest.fn(() =>
+      Promise.resolve(mockEmbeddedCheckout())
+    ),
+  };
+};

package/src/test/setupJest.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/src/utils/api.ts

@@ -0,0 +1,36 @@
+import fetchWrapper from './fetchWrapper';
+
+export const get = async (endpoint: string, params?: any) => {
+  return await fetchWrapper(endpoint, {
+    method: 'GET',
+    params,
+  });
+};
+
+export const post = async (endpoint: string, body: any) => {
+  return await fetchWrapper(endpoint, {
+    method: 'POST',
+    body,
+  });
+};
+
+export const put = async (endpoint: string, body: any) => {
+  return await fetchWrapper(endpoint, {
+    method: 'PUT',
+    body,
+  });
+};
+
+export const patch = async (endpoint: string, body: any) => {
+  return await fetchWrapper(endpoint, {
+    method: 'PATCH',
+    body,
+  });
+};
+
+export const del = async (endpoint: string, params?: Record<string, string>) => {
+  return await fetchWrapper(endpoint, {
+    method: 'DELETE',
+    params,
+  });
+};