@legalplace/wizardx-core 0.0.1-alpha.0

package/src/redux/sagas/setUserEmail.ts

@@ -0,0 +1,220 @@
+import { call, fork, put, takeLatest } from 'redux-saga/effects';
+import { getContractFunnelGAEvent } from '@legalplace/lp-events';
+import { v4 as uuid } from 'uuid';
+import { getConfig } from '../../config';
+import {
+  selectPermalink,
+  selectInstanceUniqid,
+  selectDocumentTitle,
+  selectAvailableAppStates,
+  selectDocumentModelVersion,
+} from '../selectors/app';
+import { selectInputs } from '../selectors/inputs';
+import { SET_USER_EMAIL } from '../constants/sagas/user';
+import { setUserStatusAction, initUserAction } from '../actions/user';
+import { ActionsType } from '../../types/Actions.type';
+import { IInstanceCreationResponse } from '../../types/api.type';
+import {
+  updateAvailableAppStatesAction,
+  initInstanceAction,
+  goNextPageAction,
+} from '../actions/app';
+
+import { OvcConverter } from '../../libs/OvcConverter';
+import { getSendinblueIdentifyAttributes } from '../../helpers/sendinblueHelper';
+import { setUserEmailSucceeded } from '../actions/sagas/user';
+import { EMAIL_REGEX } from '../../constants/emailValidation';
+
+const canalHeaders = {
+  'lp-referrer': window.document.referrer,
+  'lp-origin': window.location.href,
+};
+
+function* setUserEmailDecorator(action: ActionsType.User.setUserEmail): any {
+  try {
+    /**
+     * Validating email
+     */
+    const { email, tags, inBackground } = action;
+    if (!EMAIL_REGEX.test(email)) {
+      if (!inBackground) yield put(setUserStatusAction('failed'));
+      return;
+    }
+
+    yield put(setUserStatusAction('inprogress'));
+
+    // Getting Permalink & uniqid
+    const permalink = selectPermalink();
+    const instanceUniqid = selectInstanceUniqid();
+
+    // Getting OVC
+    const ovc = OvcConverter.convertToOvc(selectInputs());
+
+    // Counting filled variables
+    const nbFilledVars = Object.keys(ovc.v).reduce((p, c) => {
+      const currentValue = ovc.v[c];
+      // eslint-disable-next-line no-nested-ternary
+      const o: number = Array.isArray(currentValue)
+        ? currentValue.reduce((_p: number, _c) => _p + (_c !== '' ? 1 : 0), 0)
+        : currentValue !== ''
+        ? 1
+        : 0;
+      return p + o;
+    }, 0);
+
+    // Request Body
+    let body: Record<string, any> = {
+      ovc,
+      nb_filled_vars: nbFilledVars,
+      nb_chosen_options: 0,
+      email,
+      tags,
+    };
+
+    // Creating a new instance if we don't have a uniqid
+    if (instanceUniqid === undefined || instanceUniqid.length === 0) {
+      body = {
+        ...body,
+        app_type: 'wizardx',
+        draft: 1,
+        contract_version: selectDocumentModelVersion(),
+      };
+    }
+
+    const apiEndpoint =
+      getConfig().apiEndpoint +
+      (/\/$/.test(getConfig().apiEndpoint) ? '' : '/');
+
+    const instanceResponse = yield call(
+      fetch,
+      `${apiEndpoint}wizard/instance/${permalink}/${instanceUniqid || ''}`,
+      {
+        method:
+          instanceUniqid === undefined || instanceUniqid.length === 0
+            ? 'POST'
+            : 'PUT',
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json',
+          ...canalHeaders,
+        },
+        body: JSON.stringify(body),
+      }
+    );
+    const response: IInstanceCreationResponse = yield call([
+      instanceResponse,
+      'json',
+    ]);
+
+    /**
+     * Redirecting user in case we recieved a redirect order
+     */
+    const { redirect_to: redirectTo, user, uniqid, isPaid } = response;
+    if (typeof redirectTo !== 'string' || action.disableRedirect) {
+      if (instanceUniqid === undefined || instanceUniqid.length === 0) {
+        yield put(
+          initInstanceAction({
+            dataStatus: 'saved',
+            uniqid,
+            isPaid: isPaid || false,
+            steps: [1],
+          })
+        );
+      }
+      yield put(setUserStatusAction('authenticated'));
+      if (user) {
+        yield put(
+          initUserAction({
+            ...user,
+            level: user.role || user.level,
+          })
+        );
+      }
+    }
+
+    // Identifying user
+    if (typeof window.sendinblue !== 'undefined' && response.user) {
+      const attributes = getSendinblueIdentifyAttributes(
+        uniqid,
+        selectDocumentTitle(),
+        nbFilledVars,
+        false,
+        window.location.host
+      );
+      window.sendinblue.identify(email, attributes);
+      const fetchParams = {
+        method: 'POST',
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          email,
+          attributes,
+        }),
+      };
+      try {
+        // if we redirect afterwards we wait for the call to finish otherwise we do it in background
+        if (typeof redirectTo === 'string' && !action.disableRedirect) {
+          yield call(
+            // @ts-ignore for some reason saga doesn't like fetchParams being in a seperate variable
+            fetch,
+            `${apiEndpoint}event/create/${uniqid}/${uuid()}`,
+            fetchParams
+          );
+        } else {
+          yield fork(
+            // @ts-ignore for some reason saga doesn't like fetchParams being in a seperate variable
+            fetch,
+            `${apiEndpoint}event/create/${uniqid}/${uuid()}`,
+            fetchParams
+          );
+        }
+      } catch (error) {
+        // keep going in case the request fail for now
+      }
+    }
+
+    try {
+      if (redirectTo && redirectTo.includes('generation'))
+        window.dataLayer.push(
+          getContractFunnelGAEvent({
+            currentStep: 1,
+            contractName: selectDocumentTitle(),
+            sectionTitle: 'Choississez votre pack',
+            pageAction: 'Confirmation avant paiement 1 | 2',
+          })
+        );
+    } catch (error) {
+      // eslint-disable-next-line
+      console.error(error);
+    }
+    // Redirecting user
+    if (typeof redirectTo === 'string' && !action.disableRedirect) {
+      // Disabling onbeforeunload
+      window.onbeforeunload = () => {};
+
+      setTimeout(() => {
+        window.location.href = redirectTo;
+      }, 1000);
+    }
+
+    const availableAppStates = [...selectAvailableAppStates()];
+    availableAppStates.splice(availableAppStates.indexOf('email'), 1);
+
+    // Updating appstates
+    yield put(updateAvailableAppStatesAction(availableAppStates));
+    if (!inBackground) yield put(goNextPageAction());
+    yield put(setUserEmailSucceeded());
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error(e);
+    yield put(setUserStatusAction('inprogress'));
+  }
+}
+
+function* setUserEmailSaga() {
+  yield takeLatest(SET_USER_EMAIL, setUserEmailDecorator);
+}
+
+export default setUserEmailSaga;

package/src/redux/selectors/app.test.ts

@@ -0,0 +1,162 @@
+import { createAppStore, getStore } from '../store';
+import {
+  initPaginationAction,
+  initMetaAction,
+  initInstanceAction,
+} from '../actions/app';
+import {
+  selectCurrentPage,
+  selectCurrentSectionId,
+  selectAvailableSections,
+  selectPermalink,
+  selectDocumentId,
+  selectDocumentTitle,
+  selectInstanceUniqid,
+  selectInstanceIsPaid,
+} from './app';
+
+// Initiating state
+createAppStore('memory');
+const store = getStore();
+
+describe('App selectors test suit', () => {
+  it('Returns current page correctly', () => {
+    // Initiating pagination
+    store.dispatch(
+      initPaginationAction({
+        currentSectionId: 1,
+        currentPage: 13,
+        greatestPage: 1,
+        availableSections: [1, 2, 3],
+        availableAppStates: ['wizard'],
+        currentAppState: 'wizard',
+      })
+    );
+
+    const selector = selectCurrentPage();
+
+    expect(selector).toBe(13);
+  });
+
+  it('Returns current section id correctly', () => {
+    // Initiating pagination
+    store.dispatch(
+      initPaginationAction({
+        currentSectionId: 32,
+        currentPage: 13,
+        greatestPage: 13,
+        availableSections: [1, 2, 3],
+        availableAppStates: ['wizard'],
+        currentAppState: 'wizard',
+      })
+    );
+
+    const selector = selectCurrentSectionId();
+
+    expect(selector).toBe(32);
+  });
+
+  it('Returns available sections correctly', () => {
+    // Initiating pagination
+    store.dispatch(
+      initPaginationAction({
+        currentSectionId: 32,
+        currentPage: 13,
+        greatestPage: 13,
+        availableSections: [1, 2, 3],
+        availableAppStates: ['wizard'],
+        currentAppState: 'wizard',
+      })
+    );
+
+    const selector = selectAvailableSections();
+
+    expect(selector).toEqual([1, 2, 3]);
+  });
+
+  it('Returns permalink correctly', () => {
+    // Initiating pagination
+    store.dispatch(
+      initMetaAction({
+        permalink: 'some-permalink',
+        title: 'Some title',
+        prefix: '',
+        id: 123,
+        modelVersion: 1,
+        productType: 'demarche',
+      })
+    );
+
+    const selector = selectPermalink();
+
+    expect(selector).toBe('some-permalink');
+  });
+
+  it('Returns document id correctly', () => {
+    // Initiating pagination
+    store.dispatch(
+      initMetaAction({
+        permalink: 'some-permalink',
+        title: 'Some title',
+        prefix: '',
+        id: 123,
+        modelVersion: 1,
+        productType: 'demarche',
+      })
+    );
+
+    const selector = selectDocumentId();
+
+    expect(selector).toBe(123);
+  });
+
+  it('Returns document title correctly', () => {
+    // Initiating pagination
+    store.dispatch(
+      initMetaAction({
+        permalink: 'some-permalink',
+        title: 'Some title',
+        prefix: '',
+        id: 123,
+        modelVersion: 1,
+        productType: 'demarche',
+      })
+    );
+
+    const selector = selectDocumentTitle();
+
+    expect(selector).toBe('Some title');
+  });
+
+  it('Returns instance uniqid correctly', () => {
+    // Initiating pagination
+    store.dispatch(
+      initInstanceAction({
+        dataStatus: 'saved',
+        uniqid: 'SomeUNiqID',
+        isPaid: false,
+        steps: '*',
+      })
+    );
+
+    const selector = selectInstanceUniqid();
+
+    expect(selector).toBe('SomeUNiqID');
+  });
+
+  it('Returns instance isPaid correctly', () => {
+    // Initiating pagination
+    store.dispatch(
+      initInstanceAction({
+        dataStatus: 'saved',
+        uniqid: 'SomeUNiqID',
+        isPaid: true,
+        steps: '*',
+      })
+    );
+
+    const selector = selectInstanceIsPaid();
+
+    expect(selector).toBeTruthy();
+  });
+});

package/src/redux/selectors/app.ts

@@ -0,0 +1,328 @@
+import { createSelector } from './selectors';
+import { selectOptionInput } from './inputs';
+import { StateType } from '../../types/State.type';
+
+/**
+ * Returns current page number
+ */
+export const selectCurrentPage = createSelector(
+  (state: StateType) => state.app.pagination.currentPage,
+  (state: StateType) => state.app.pagination.currentPage.toString()
+);
+
+/**
+ * Returns availableAppStates
+ */
+export const selectAvailableAppStates = createSelector(
+  (state: StateType) => state.app.pagination.availableAppStates,
+  (state: StateType) => state.app.pagination.availableAppStates.join('-')
+);
+
+/**
+ * Returns currentAppState
+ */
+export const selectCurrentAppState = createSelector(
+  (state: StateType) => state.app.pagination.currentAppState,
+  (state: StateType) => state.app.pagination.currentAppState
+);
+
+/**
+ * Returns isFirstPage
+ */
+export const selectIsFirstPage = createSelector(
+  (state: StateType) => state.app.pagination.isFirstPage,
+  (state: StateType) => state.app.pagination.isFirstPage.toString()
+);
+
+/**
+ * Returns isLastPage
+ */
+export const selectIsLastPage = createSelector(
+  (state: StateType) => state.app.pagination.isLastPage,
+  (state: StateType) => state.app.pagination.isLastPage.toString()
+);
+
+export const selectIsLastWizardPage = createSelector(
+  (state: StateType) => {
+    return (
+      state.app.pagination.currentPage ===
+      state.app.wizard.availableSections.length
+    );
+  },
+  (state: StateType) => state.app.pagination.currentPage.toString()
+);
+
+/**
+ * Returns greatest page user went to
+ */
+export const selectGreatestPage = createSelector(
+  (state: StateType) => state.app.pagination.greatestPage,
+  (state: StateType) => state.app.pagination.greatestPage
+);
+
+/**
+ * Returns current section id
+ */
+export const selectCurrentSectionId = createSelector(
+  (state: StateType) => state.app.wizard.currentSectionId,
+  (state: StateType) => state.app.wizard.currentSectionId
+);
+
+/**
+ * Returns current available sections
+ */
+export const selectAvailableSections = createSelector(
+  (state: StateType) => [...state.app.wizard.availableSections],
+  (state: StateType) =>
+    state.app.wizard.availableSections.reduce((p, c) => p + c, 0)
+);
+
+/**
+ * Returns all available options
+ */
+export const selectAvailableOptions = createSelector(
+  (state: StateType, document = 'main') => {
+    let availableOptions: number[] = [];
+
+    const { availableSections } = state.app.wizard;
+    const documentSections = Object.keys(
+      state.references.sections[document]
+    ).map((id) => parseInt(id, 10));
+    const sections = document === 'main' ? availableSections : documentSections;
+
+    sections.forEach((sectionId) => {
+      const { options } = state.references.sections[document][sectionId];
+      availableOptions = [...availableOptions, ...options];
+    });
+    return availableOptions;
+  },
+  (state: StateType, document = 'main') => {
+    if (document === 'main')
+      return state.app.wizard.availableSections.reduce(
+        (a, b) => `${a}${b}`,
+        ''
+      );
+    return document;
+  }
+);
+
+/**
+ * Returns all multiples occurencies
+ */
+export const selectMultipleOccurencies = createSelector(
+  (state: StateType) => {
+    const multipleOptionsOccurencies: Record<string, number> = {};
+    const availableOptions = selectAvailableOptions('main');
+    if (availableOptions === undefined) return {};
+    availableOptions.forEach((optionId) => {
+      const ref = state.references.options[optionId];
+      if (ref.meta.multiple?.enabled === true) {
+        multipleOptionsOccurencies[optionId] =
+          selectOptionInput(optionId).length;
+      }
+    });
+    return multipleOptionsOccurencies;
+  },
+  () => Math.random()
+);
+
+export const selectOutputsIds = createSelector(
+  (state: StateType, document: string): [number, string][] => {
+    const availableOptions = selectAvailableOptions(document);
+    if (availableOptions === undefined) return [];
+    const outputs = availableOptions.map((optionId): [number, string] => {
+      const ref = state.references.options[optionId];
+      return [optionId, ref.meta.type];
+    });
+
+    return outputs;
+  },
+  (state: StateType, document: string) => {
+    if (document !== 'main') return document;
+    return state.app.wizard.availableSections.reduce((a, b) => `${a}${b}`, '');
+  }
+);
+
+/**
+ * Returns permalink
+ */
+export const selectPermalink = createSelector(
+  (state: StateType) => state.app.meta.permalink,
+  (state: StateType) => state.app.meta.permalink
+);
+
+/**
+ * Returns title
+ */
+export const selectDocumentTitle = createSelector(
+  (state: StateType) => state.app.meta.title,
+  (state: StateType) => state.app.meta.title
+);
+
+/**
+ * Returns title
+ */
+export const selectDocumentId = createSelector(
+  (state: StateType) => state.app.meta.id,
+  (state: StateType) => state.app.meta.id
+);
+
+/**
+ * Returns modelVersion
+ */
+export const selectDocumentModelVersion = createSelector(
+  (state: StateType) => state.app.meta.modelVersion,
+  (state: StateType) => state.app.meta.modelVersion
+);
+
+/**
+ * Returns productType
+ */
+export const selectDocumentProductType = createSelector(
+  (state: StateType) => state.app.meta.productType,
+  (state: StateType) => state.app.meta.productType
+);
+
+/**
+ * Returns product title
+ */
+export const selectMeta = createSelector(
+  (state: StateType) => state.app.meta,
+  (state: StateType) => state.app.meta.title
+);
+
+/**
+ * Returns meta Fetch status
+ */
+export const selectMetaFetchStatus = createSelector(
+  (state: StateType) => state.app.meta.fetchStatus,
+  (state: StateType) => state.app.meta.fetchStatus
+);
+
+/**
+ * Returns organization prefix
+ */
+export const selectPrefix = createSelector(
+  (state: StateType) => (!state.app.meta ? undefined : state.app.meta.prefix),
+  (state: StateType) => (!state.app.meta ? '0' : state.app.meta.permalink)
+);
+
+/**
+ * Returns instance's uniqid
+ */
+export const selectInstanceUniqid = createSelector(
+  (state: StateType) =>
+    !state.app.instance ? undefined : state.app.instance.uniqid,
+  (state: StateType) => (!state.app.instance ? '0' : state.app.instance.uniqid)
+);
+
+/**
+ * Returns instance's companyId
+ */
+export const selectInstanceCompanyId = createSelector(
+  (state: StateType) =>
+    !state.app.instance ? undefined : state.app.instance.companyId,
+  (state: StateType) =>
+    !state.app.instance || !state.app.instance.companyId
+      ? '0'
+      : state.app.instance.companyId
+);
+
+/**
+ * Returns instance's employeeId
+ */
+export const selectInstanceEmployeeId = createSelector(
+  (state: StateType) =>
+    !state.app.instance ? undefined : state.app.instance.employeeId,
+  (state: StateType) =>
+    !state.app.instance || !state.app.instance.employeeId
+      ? '0'
+      : state.app.instance.employeeId
+);
+
+/**
+ * Returns instance's data status
+ */
+export const selectDataStatus = createSelector(
+  (state: StateType) =>
+    !state.app.instance ? 'unsaved' : state.app.instance.dataStatus,
+  (state: StateType) =>
+    !state.app.instance ? '0' : state.app.instance.dataStatus
+);
+
+/**
+ * Returns instance's uniqid
+ */
+export const selectInstanceIsPaid = createSelector(
+  (state: StateType) => !!(state.app.instance && state.app.instance.isPaid),
+  (state: StateType) =>
+    state.app.instance && state.app.instance.isPaid
+      ? state.app.instance.isPaid.toString()
+      : '0'
+);
+
+/**
+ * Returns instance's steps
+ */
+export const selectInstanceSteps = createSelector(
+  (state: StateType) => !!(state.app.instance && state.app.instance.steps),
+  (state: StateType) =>
+    state.app.instance && state.app.instance.steps
+      ? state.app.instance.steps.toString()
+      : '0'
+);
+
+/**
+ * Verifies whether step is available for insatnce
+ */
+export const isStepAvailable = createSelector(
+  (state: StateType, steps: '*' | number[] | undefined) => {
+    if (steps === undefined) return true;
+
+    // If instance isn't defined
+    if (state.app.instance === undefined)
+      return steps === '*' ? true : steps.includes(1);
+
+    // If step is accessible by all
+    if (steps === '*') return true;
+
+    // If instance gives access to all steps
+    if (state.app.instance.steps === '*') return true;
+    return state.app.instance.steps
+      .map((c) => steps.includes(c))
+      .reduce((a, b) => a || b, false);
+  },
+  (state: StateType, steps) =>
+    state.app.instance && state.app.instance.steps && steps
+      ? `${state.app.instance.steps.toString()}-${steps.toString()}`
+      : '0'
+);
+
+/**
+ * Returns customization extracts
+ */
+export const selectCustomizationMeta = createSelector(
+  (state: StateType) => state.app.customization.meta,
+  (state: StateType) =>
+    state.app.customization.meta !== undefined ? '1' : Math.random()
+);
+
+/**
+ * Returns customization disableAutoDefault
+ */
+export const selectCustomizationAutoDefaultType = createSelector(
+  (state: StateType) => state.app.customization.disableAutoDefault,
+  (state: StateType) =>
+    state.app.customization.disableAutoDefault !== undefined
+      ? '1'
+      : Math.random()
+);
+
+/**
+ * Returns Model's UUID
+ */
+export const selectModelUuid = createSelector(
+  (state: StateType) => state.app.meta.modelUuid,
+  (state: StateType) =>
+    state.app.meta.modelUuid !== undefined ? '1' : Math.random()
+);