@openlettermarketing/olc-react-sdk 0.0.8 → 0.0.10

package/src/redux/reducers/templateReducer.ts

@@ -0,0 +1,353 @@
+/* eslint-disable no-case-declarations */
+import {
+  SET_DYNAMIC_FIELDS,
+  SET_DYNAMIC_FIELD_VALUE,
+  CLEAR_DYNAMIC_FIELDS,
+  REMOVE_FROM_DYNAMIC_FIELDS,
+  GET_PRODUCTS,
+  GET_ONE_TEMPLATE,
+  TEMPLATE_LOADING,
+  CLEAR_FIELDS,
+  TEMPLATE_PAGINATION_CHANGE,
+  TEMPLATE_SEARCH,
+  CLEAR_ALL_TEMPLATE,
+  SELECT_PRODUCT,
+  SELECT_POSTCARD,
+  CLEAR_TEMPLATE_FIELDS,
+  GET_DYNAMIC_FIELDS_FROM_SERVER,
+  LOAD_DATA_FROM_LOCAL_STORAGE,
+  SET_PRODUCT_DETAILS,
+  CLEAR_TEMPLATE,
+  CLEAR_REDUX
+} from "../actions/action-types";
+
+export interface DynamicField {
+  value: string;
+  key: string;
+  defaultValue: string;
+}
+
+export interface Template {
+  title: string;
+  product: Product | null;
+  templateType: string;
+}
+
+export interface Product {
+  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[];
+  products: 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;
+}
+
+
+
+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: "Address 1",
+      key: "{{C.ADDRESS_1}}",
+      defaultValue: "123 Main Street",
+    },
+    "{{C.ADDRESS_2}}": {
+      value: "Address 2",
+      key: "{{C.ADDRESS_2}}",
+      defaultValue: "Suite 2",
+    },
+    "{{C.CITY}}": {
+      value: "City",
+      key: "{{C.CITY}}",
+      defaultValue: "Lawrence",
+    },
+    "{{C.STATE}}": {
+      value: "State",
+      key: "{{C.STATE}}",
+      defaultValue: "MA",
+    },
+    "{{C.ZIP_CODE}}": {
+      value: "Zip Code",
+      key: "{{C.ZIP_CODE}}",
+      defaultValue: "01843",
+    },
+    "{{C.PHONE_NUMBER}}": {
+      value: "Phone Number",
+      key: "{{C.PHONE_NUMBER}}",
+      defaultValue: "(555) 278-9389",
+    },
+    "{{C.EMAIL}}": {
+      value: "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",
+    },
+  ],
+  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,
+};
+
+// @ts-ignore
+const templateReducer = (state = initialState, { type, payload }): TemplateState => {
+  switch (type) {
+    case SET_DYNAMIC_FIELD_VALUE:
+      return {
+        ...state,
+        dynamicField: payload.value,
+      };
+    case SET_DYNAMIC_FIELDS:
+      return {
+        ...state,
+        dynamicFields: {
+          ...state.dynamicFields,
+          [state.dynamicField]: {
+            value: state.dynamicField,
+            key: `{{${state.dynamicField.replace(/ /g, "_").toUpperCase()}}}`,
+            defaultValue: `[${state.dynamicField}]`,
+          },
+        },
+        dynamicField: "",
+      };
+    case REMOVE_FROM_DYNAMIC_FIELDS:
+      const dynamicFields = { ...state.dynamicFields };
+      delete dynamicFields[payload.value];
+      return {
+        ...state,
+        dynamicFields: dynamicFields,
+      };
+    case GET_PRODUCTS:
+      return {
+        ...state,
+        products: payload.products,
+      };
+    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 CLEAR_DYNAMIC_FIELDS:
+      return initialState;
+    case CLEAR_FIELDS:
+      return initialState;
+    case CLEAR_ALL_TEMPLATE:
+      return {
+        ...state,
+        templates: { ...initialState.templates },
+      };
+    case CLEAR_TEMPLATE_FIELDS:
+      return {
+        ...state,
+        title: "",
+        product: null,
+        dynamicField: "",
+        dynamicFields: {},
+        templateType: "json",
+        envelopeType: "",
+      };
+    case GET_DYNAMIC_FIELDS_FROM_SERVER:
+      return {
+        ...state,
+        dynamicFields: payload.data,
+      };
+    case SET_PRODUCT_DETAILS:
+      return {
+        ...state,
+        productDetailByTemplate: payload,
+      };
+    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_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
+$primaryColor: #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,
+  });
+};

package/src/utils/constants.ts

@@ -0,0 +1,40 @@
+export const DPI: number = 96;
+
+export const Barcode: string = 'https://api.openletterconnect.com/api/v1/download/s3/openletterconnect/assets/preview/one-barcode.png';
+export const PRODUCT_LEARN_URL: string = "https://help.openletterconnect.com/getting-support/designing-your-mailers/wip-designing-mail-creatives/wip-mail-piece-design-specs";
+
+export const multiPageLetters: string[] = [
+  "Postcards",
+  "Tri-Fold Self-Mailers",
+  "Bi-Fold Self-Mailers",
+];
+
+interface TemplateTypes {
+  id: string;
+  label: string;
+}
+
+export const templateTypes = [
+  {
+    id: "1",
+    label: "My Templates",
+  },
+  {
+    id: "2",
+    label: "Team Templates",
+  },
+  {
+    id: "3",
+    label: "OLC Templates",
+  },
+];
+
+export const sortOrderForTemplates: string[] = [
+  "Postcards",
+  "Personal Letters",
+  "Professional Letters",
+  "Bi-Fold Self-Mailers",
+  "Tri-Fold Self-Mailers",
+  "Real Penned Letter",
+];
+