@mframework/layer-commerce 0.0.3

package/app/utils/Request/Mutation.ts

@@ -0,0 +1,25 @@
+/* eslint-disable import/prefer-default-export */
+/**
+ * M Framework - Flexible backend agnostic framework.
+ *
+ * Copyright © Meeovi, LTD. All rights reserved.
+ * See LICENSE for license details.
+ *
+ * @license OSL-3.0 (Open Software License ("OSL") v. 3.0)
+ * @package mframework/mframework-theme
+ * @link https://github.com/meeovi/mframework-theme
+ */
+
+import { Mutation } from '@tilework/opus';
+
+import { prepareMutation } from '../../utils/Query';
+import { executePost } from '../../utils/Request/Request';
+
+/** @namespace ../../utils/Request/Mutation/fetchMutation */
+export const fetchMutation = <S extends string, T, IsArray extends boolean = false>(
+    rawMutations: Mutation<S, T, boolean> | Mutation<S, T, boolean>[],
+): Promise<Record<S, IsArray extends false ? T : T[]>> => {
+    const queries = rawMutations instanceof Mutation ? [rawMutations] : rawMutations;
+
+    return executePost(prepareMutation(queries));
+};

package/app/utils/Request/Query.ts

@@ -0,0 +1,25 @@
+/* eslint-disable import/prefer-default-export */
+/**
+ * M Framework - Flexible backend agnostic framework.
+ *
+ * Copyright © Meeovi, LTD. All rights reserved.
+ * See LICENSE for license details.
+ *
+ * @license OSL-3.0 (Open Software License ("OSL") v. 3.0)
+ * @package mframework/mframework-theme
+ * @link https://github.com/meeovi/mframework-theme
+ */
+
+import { Query } from '@tilework/opus';
+
+import { prepareQuery } from '../../utils/Query';
+import { executePost } from '../../utils/Request/Request';
+
+/** @namespace ../../utils/Request/../../normalizers/fetchQuery */
+export const fetchQuery = <S extends string, T, IsArray extends boolean = false>(
+    rawQueries: Query<S, T, boolean> | Query<S, T, boolean>[],
+): Promise<Record<S, IsArray extends false ? T : T[]>> => {
+    const queries = rawQueries instanceof Query ? [rawQueries] : rawQueries;
+
+    return executePost(prepareQuery(queries));
+};

package/app/utils/Request/QueryDispatcher.ts

@@ -0,0 +1,135 @@
+/* eslint-disable no-unused-vars */
+/**
+ * M Framework - Flexible backend agnostic framework.
+ *
+ * Copyright © Meeovi, LTD. All rights reserved.
+ * See LICENSE for license details.
+ *
+ * @license OSL-3.0 (Open Software License ("OSL") v. 3.0)
+ * @package mframework/mframework
+ * @link https://github.com/meeovi/mframework
+ */
+
+import { Query } from '@tilework/opus';
+// Minimal Dispatch type for compatibility while migrating to Pinia
+type Dispatch = (action: any) => any;
+
+import { NetworkError } from '../../types/Common.type';
+import { CancelablePromise } from '../../utils/Promise/Promise.type';
+import { prepareQuery } from '../../utils/Query';
+import { executeGet, listenForBroadCast } from '../../utils/Request/Request';
+
+import { ONE_MONTH_IN_SECONDS } from './Config';
+
+/**
+ * Abstract request dispatcher.
+ * IMPORTANT: it is required to implement `prepareRequest(options)` before using!
+ * @class QueryDispatcher
+ * @namespace ../../utils/Request/QueryDispatcher
+ */
+export abstract class QueryDispatcher<Options, Data, Error = NetworkError | NetworkError[]> {
+    protected name = '';
+
+    protected cacheTTL = 0;
+
+    protected promise: CancelablePromise<Data> | null = null;
+
+    protected controller: AbortController | null = null;
+
+    /**
+     * Creates an instance of QueryDispatcher.
+     * @param  {String} name Name of model for ServiceWorker to send BroadCasts updates to
+     * @param  {Number} cacheTTL Cache TTL (in seconds) for ServiceWorker to cache responses
+     * @memberof QueryDispatcher
+     */
+    __construct(name: string, cacheTTL = ONE_MONTH_IN_SECONDS): void {
+        this.name = name;
+        this.cacheTTL = cacheTTL;
+        this.promise = null;
+        this.controller = null;
+    }
+
+    async handleData(dispatch: Dispatch, options: Options): Promise<void> {
+        const { name, cacheTTL } = this;
+
+        const rawQueries = this.prepareRequest(options, dispatch);
+
+        if (!rawQueries) {
+            return;
+        }
+
+        if (this.controller) {
+            this.controller.abort();
+        }
+
+        const queries = rawQueries instanceof Query ? [rawQueries] : rawQueries;
+
+        this.controller = new AbortController();
+        const { signal } = this.controller;
+
+        try {
+            this.promise = await executeGet(prepareQuery(queries), name, cacheTTL, signal);
+
+            if (this.promise) {
+                this.onSuccess(this.promise, dispatch, options);
+            }
+        } catch (err) {
+            if (!(err as NetworkError).message.includes('abort')) {
+                if (!(err as NetworkError).message.includes('abort')) {
+                    this.onError(err as NetworkError, dispatch, options);
+                }
+            }
+        }
+
+        const broadcast = await listenForBroadCast<Data>(name);
+
+        this.onUpdate(broadcast, dispatch, options);
+    }
+
+    /**
+     * Is triggered by BroadCast updated from ServiceWorker.
+     * Should dispatch some action.
+     * @param  {any} data Data received from fetch of GraphQL endpoint
+     * @param  {Function} dispatch Store changing function from Redux (dispatches actions)
+     * @return {void}
+     * @memberof QueryDispatcher
+     */
+    onUpdate(data: Data, dispatch: Dispatch, options: Options): void {
+        this.onSuccess(data, dispatch, options);
+    }
+
+    /**
+     * Is responsible for request building (request & mutation preparation)
+     * @param  {any} options Any options received from Container
+     * @param {Function} dispatch
+     * @return {Array<Field>|Field} Array or single item of Field instances
+     * @memberof QueryDispatcher
+     */
+    abstract prepareRequest(
+        options: Options,
+        dispatch: Dispatch
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ): Query<any, any, any> | Query<any, any, any>[];
+
+    /**
+     * Is triggered on successful fetch of GraphQL endpoint.
+     * IMPORTANT: If there are any errors in response (`errors` field in JSON response from GraphQL), this function won't trigger!
+     * Should dispatch some action.
+     * @param  {any} data
+     * @param  {any} dispatch
+     * @return {void}@memberof QueryDispatcher
+     */
+    abstract onSuccess(data: Data | CancelablePromise<Data>, dispatch: Dispatch, options: Options): void;
+
+    /**
+     * Is triggered on error in fetch of GraphQL endpoint.
+     * IMPORTANT: If there are any errors in response (`errors` field in JSON response from GraphQL), this function will trigger!
+     * Should dispatch some action.
+     * @param  {any} error
+     * @param  {any} dispatch
+     * @return {void}@memberof QueryDispatcher
+     */
+    abstract onError(error: Error | NetworkError, dispatch: Dispatch, options: Options): void;
+}
+
+export default QueryDispatcher;

package/app/utils/Request/Request.ts

@@ -0,0 +1,310 @@
+/* eslint-disable @mframework/mframework-guidelines/no-arrow-functions-in-class */
+/**
+ * M Framework - Flexible backend agnostic framework.
+ *
+ * Copyright © Meeovi, LTD. All rights reserved.
+ * See LICENSE for license details.
+ *
+ * @license OSL-3.0 (Open Software License ("OSL") v. 3.0)
+ * @package mframework/mframework
+ * @link https://github.com/meeovi/mframework
+ */
+
+import { GraphQlResponse } from '@tilework/opus';
+
+import { isSignedIn } from '../../utils/Auth/IsSignedIn';
+import { getAuthorizationToken, refreshAuthorizationToken } from '../../utils/Auth/Token';
+import { refreshUid } from '../../utils/Compare';
+import { getCurrency } from '../../utils/Currency';
+import {
+    GRAPHQL_URI, HTTP_201_CREATED, HTTP_410_GONE, HTTP_503_SERVICE_UNAVAILABLE, ONE_MONTH_IN_SECONDS, WINDOW_ID,
+} from '../../utils/Request/Config';
+
+import { hash } from './Hash';
+
+/** @namespace ../../utils/Request/getWindowId */
+export const getWindowId = (): string => {
+    const result = sessionStorage.getItem(WINDOW_ID);
+
+    if (!result) {
+        const id = String(Date.now());
+
+        sessionStorage.setItem(WINDOW_ID, id);
+
+        return id;
+    }
+
+    return result;
+};
+
+/** @namespace ../../utils/Request/getStoreCodePath */
+export const getStoreCodePath = (): string => {
+    const path = location.pathname;
+    // eslint-disable-next-line no-undef
+    const firstPathPart = path.split('/')[1];
+
+    if (window.storeList.includes(firstPathPart)) {
+        return `/${ firstPathPart }`;
+    }
+
+    return '';
+};
+
+/** @namespace ../../utils/Request/getGraphqlEndpoint */
+export const getGraphqlEndpoint = (): string => getStoreCodePath().concat(GRAPHQL_URI);
+
+/**
+ * Append authorization token to header object
+ * @param {Object} headers
+ * @returns {Object} Headers with appended authorization
+ * @namespace ../../utils/Request/appendTokenToHeaders
+ */
+export const appendTokenToHeaders = (headers: HeadersInit): HeadersInit => {
+    const token = getAuthorizationToken();
+
+    return {
+        ...headers,
+        Authorization: token ? `Bearer ${token}` : '',
+    };
+};
+
+/**
+ *
+ * @param {String} query Request body
+ * @param {Object} variables Request variables
+ * @param {String} url GraphQL url
+ * @returns {*}
+ * @namespace ../../utils/Request/formatURI
+ */
+export const formatURI = (query: string, variables: Record<string, string>, url: string): string => {
+    const stringifyVariables = Object.keys(variables).reduce(
+        (acc, variable) => [...acc, `${ variable }=${ JSON.stringify(variables[variable]) }`],
+        [`?hash=${ hash(query) }`],
+    );
+
+    return `${ url }${ stringifyVariables.join('&') }`;
+};
+
+/**
+ *
+ * @param {String} uri
+ * @param {String} name
+ * @returns {Promise<Response>}
+ * @namespace ../../utils/Request/getFetch
+ */
+export const getFetch = (uri: string, name: string, signal?: AbortSignal): Promise<Response> => fetch(
+    uri,
+    {
+        method: 'GET',
+        signal,
+        headers: appendTokenToHeaders({
+            'Content-Type': 'application/json',
+            'Content-Currency': getCurrency(),
+            'Application-Model': `${ name }_${ getWindowId() }`,
+            Accept: 'application/json',
+        }),
+    },
+);
+
+// TODO CacheTTL number or string?
+/**
+ *
+ * @param {String} graphQlURI
+ * @param {{}} query Request body
+ * @param {Int} cacheTTL
+ * @namespace ../../utils/Request/putPersistedQuery
+ */
+export const putPersistedQuery = (
+    graphQlURI: string,
+    query: string,
+    cacheTTL: number,
+): Promise<Response> => fetch(
+    `${ graphQlURI }?hash=${ hash(query) }`,
+    {
+        method: 'PUT',
+        body: JSON.stringify(query),
+        headers: {
+            'Content-Type': 'application/json',
+            'SW-Cache-Age': String(Number.isInteger(cacheTTL) ? cacheTTL : ONE_MONTH_IN_SECONDS),
+        },
+    },
+);
+
+/**
+ *
+ * @param {String} graphQlURI
+ * @param {String} queryObject
+ * @param {String} name
+ * @returns {Promise<Response>}
+ * @namespace ../../utils/Request/postFetch
+ */
+export const postFetch = (
+    graphQlURI: string,
+    query: string,
+    variables: Record<string, string>,
+): Promise<Response> => fetch(
+    graphQlURI,
+    {
+        method: 'POST',
+        body: JSON.stringify({ query, variables }),
+        headers: appendTokenToHeaders({
+            'Content-Type': 'application/json',
+            'Content-Currency': getCurrency(),
+            Accept: 'application/json',
+        }),
+    },
+);
+
+export type ResponseBody<T> = Omit<GraphQlResponse, 'data'> & {
+    data: T;
+};
+
+/**
+ * Checks for errors in response, if they exist, rejects promise
+ * @param  {Object} res Response from GraphQL endpoint
+ * @return {Promise<Object>} Handled GraphqlQL results promise
+ * @namespace ../../utils/Request/checkForErrors
+ */
+export const checkForErrors = <T>(res: ResponseBody<T>): Promise<T> => new Promise((resolve, reject) => {
+    const { errors, data } = res;
+
+    if (errors) {
+        reject(errors);
+
+        return;
+    }
+
+    resolve(data);
+});
+
+/**
+ * Handle connection errors
+ * @param  {any} err Error from fetch
+ * @return {void} Simply console error
+ * @namespace ../../utils/Request/handleConnectionError
+ */
+// eslint-disable-next-line no-console
+export const handleConnectionError = (err: unknown, msg: string): void => {
+    // eslint-disable-next-line no-console
+    console.error(msg, err);
+}; // TODO: Add to logs pool
+
+/**
+ * Parse response and check wether it contains errors
+ * @param  {{}} queryObject prepared with `prepareDocument()` from `../../utils/Query` request body object
+ * @return {Promise<Request>} Fetch promise to GraphQL endpoint
+ * @namespace ../../utils/Request/parseResponse
+ */
+export const parseResponse = async <T>(response: Response): Promise<T> => {
+    try {
+        const promiseResponse = await response;
+        const data = await promiseResponse.json();
+
+        return await checkForErrors(data);
+    } catch (err) {
+        handleConnectionError(err, 'Can not parse JSON!');
+
+        throw err;
+    }
+};
+
+// TODO
+export interface QueryObject {
+    query: string;
+    variables: Record<string, string>;
+}
+
+export type QueryVariables = Record<string, string>;
+
+/**
+ * Make GET request to endpoint (via ServiceWorker)
+ * @param  {{}} queryObject prepared with `prepareDocument()` from `../../utils/Query` request body object
+ * @param  {String} name Name of model for ServiceWorker to send BroadCasts updates to
+ * @param  {Number} cacheTTL Cache TTL (in seconds) for ServiceWorker to cache responses
+ * @return {Promise<Request>} Fetch promise to GraphQL endpoint
+ * @namespace ../../utils/Request/executeGet
+ */
+export const executeGet = async <T>(
+    queryObject: QueryObject,
+    name: string,
+    cacheTTL: number,
+    signal?: AbortSignal,
+): Promise<T> => {
+    const { query, variables } = queryObject;
+    const uri = formatURI(query, variables, getGraphqlEndpoint());
+
+    if (isSignedIn()) {
+        refreshAuthorizationToken();
+        refreshUid();
+    }
+
+    // Fetch only throws on network error, http errors have to be handled manually.
+    try {
+        const result = await getFetch(uri, name, signal);
+
+        if (result.status === HTTP_410_GONE) {
+            const putResponse = await putPersistedQuery(getGraphqlEndpoint(), query, cacheTTL);
+
+            if (putResponse.status === HTTP_201_CREATED) {
+                return await parseResponse(await getFetch(uri, name, signal));
+            }
+        }
+
+        if (result.status === HTTP_503_SERVICE_UNAVAILABLE) {
+            handleConnectionError(result.status, result.statusText);
+            throw new Error(result.statusText);
+        }
+
+        // Successful and all other http responses go here:
+        return await parseResponse(result);
+    } catch (error) {
+        // Network error
+        handleConnectionError(error, 'executeGet failed');
+        throw new Error(error as string);
+    }
+};
+/**
+ * Make POST request to endpoint
+ * @param  {{}} queryObject prepared with `prepareDocument()` from `../../utils/Query` request body object
+ * @return {Promise<Request>} Fetch promise to GraphQL endpoint
+ * @namespace ../../utils/Request/executePost
+ */
+export const executePost = async <T>(queryObject: QueryObject): Promise<T> => {
+    const { query, variables } = queryObject;
+
+    if (isSignedIn()) {
+        refreshAuthorizationToken();
+        refreshUid();
+    }
+
+    try {
+        const response = await postFetch(getGraphqlEndpoint(), query, variables);
+
+        return await parseResponse(response);
+    } catch (err) {
+        handleConnectionError(err, 'executePost failed');
+
+        throw err;
+    }
+};
+
+/**
+ * Listen to the BroadCast connection
+ * @param  {String} name Name of model for ServiceWorker to send BroadCasts updates to
+ * @return {Promise<any>} Broadcast message promise
+ * @namespace ../../utils/Request/listenForBroadCast
+ */
+export const listenForBroadCast = <T = unknown>(name: string): Promise<T> => new Promise((resolve) => {
+    const { BroadcastChannel } = window;
+    const windowId = getWindowId();
+
+    if (BroadcastChannel) {
+        const bc = new BroadcastChannel(`${ name }_${ windowId }`);
+
+        bc.onmessage = (update) => {
+            const { data: { payload: body } } = update;
+
+            resolve(checkForErrors(body));
+        };
+    }
+});

package/app/utils/Store/Store.type.ts

@@ -0,0 +1,26 @@
+/**
+ * M Framework - Flexible backend agnostic framework.
+ *
+ * Copyright © Meeovi, LTD. All rights reserved.
+ * See LICENSE for license details.
+ *
+ * @license OSL-3.0 (Open Software License ("OSL") v. 3.0)
+ * @package mframework/mframework-theme
+ * @link https://github.com/meeovi/mframework-theme
+ */
+// Minimal compatibility types to decouple from Redux while migrating to Pinia.
+type AnyAction = any;
+type Reducer = (state: any, action?: any) => any;
+type ReducersMapObject = Record<string, Reducer>;
+type Store = any;
+
+// Re-export the concrete RootState definitions so all modules importing
+// `app/utils/Store/Store.type.ts` see the same expanded shape.
+export { ConfigReducerState, CartReducerState, MyAccountReducerState, RootState } from '../../stores/Store.type';
+
+declare global {
+    export type ModifiedReduxStore<S> = Store & {
+        asyncReducers?: ReducersMapObject;
+        injectReducer?: (key: string, reducer: Reducer) => void;
+    };
+}

package/app/utils/Store/index.ts

@@ -0,0 +1,71 @@
+/* eslint-disable no-param-reassign */
+/**
+ * M Framework - Flexible backend agnostic framework.
+ *
+ * Copyright © Meeovi, LTD. All rights reserved.
+ * See LICENSE for license details.
+ *
+ * @license OSL-3.0 (Open Software License ("OSL") v. 3.0)
+ * @package mframework/mframework-theme
+ * @link https://github.com/meeovi/mframework-theme
+*/
+import { RootState } from '../../utils/Store/Store.type';
+
+/**
+ * Lightweight compatibility layer that provides the minimal store API
+ * used across the commerce layer. This intentionally does not implement
+ * full Redux semantics — it keeps a mutable `state` object and exposes
+ * `getStore`, `getStoreState`, `injectReducers` and a no-op `dispatch`
+ * to satisfy legacy imports while migration to Pinia proceeds.
+ */
+
+type AnyObject = Record<string, any>;
+
+const legacyState: RootState = {
+    ConfigReducer: {},
+    CartReducer: {},
+    MyAccountReducer: {},
+} as unknown as RootState;
+
+const store: AnyObject = {
+    asyncReducers: {} as AnyObject,
+    // injectReducer will attach the given reducer/state under the key.
+    injectReducer(key: string, reducerOrState: any) {
+        // prefer plain objects as initial slice state
+        (store.asyncReducers as AnyObject)[key] = reducerOrState;
+        (legacyState as AnyObject)[key] = reducerOrState;
+    },
+    replaceReducer() {
+        // no-op compatibility
+    },
+    // Minimal dispatch compatibility: if a function is passed (thunk-like), call it with dispatch
+    dispatch(action: any) {
+        if (typeof action === 'function') return action(store.dispatch.bind(store));
+        // otherwise, do nothing — migrations should replace side-effects with Pinia actions
+        return action;
+    },
+    getState() {
+        return legacyState as any;
+    },
+};
+
+export function configureStore<S, T = typeof store>(s: T): T {
+    // no-op for compatibility
+    return s;
+}
+
+export function noopReducer<T>(state: T): T { return state; }
+
+export const getStore = (): typeof store => store;
+
+export const getStoreState = (): Partial<RootState> => (store.getState() as Partial<RootState>) || {};
+
+export function injectReducers(storeParam: any, reducers: Record<string, any>) {
+    Object.entries(reducers).forEach(([name, reducer]) => {
+        if (storeParam.injectReducer) storeParam.injectReducer(name, reducer);
+    });
+
+    return storeParam;
+}
+
+export default getStore;