@mframework/layer-commerce 0.0.3

package/app/utils/Promise/Promise.type.ts

@@ -0,0 +1,15 @@
+/**
+ * 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
+ */
+
+export type CancelablePromise<T = unknown> = {
+    promise: Promise<T>;
+    cancel: () => void;
+};

package/app/utils/Promise/index.ts

@@ -0,0 +1,13 @@
+/**
+ * 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
+ */
+
+// eslint-disable-next-line import/prefer-default-export
+export { default as makeCancelable } from './MakeCancelable';

package/app/utils/Query/Field.ts

@@ -0,0 +1,71 @@
+/**
+ * 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 { FieldArgument } from './Query.type';
+
+/**
+ * Builds GraphQL query according to https://graphql.org/learn/queries/ documentation
+ * @class Query
+ * @extends Field
+ * @namespace ../../utils/../../normalizers/Field
+ */
+export class Field {
+    name = '';
+
+    alias = '';
+
+    children: Field[] = [];
+
+    args: FieldArgument[] = [];
+
+    // eslint-disable-next-line @mframework/mframework-guidelines/use-magic-construct
+    constructor(name: string) {
+        this.__construct(name);
+    }
+
+    __construct(name: string): void {
+        this.name = name;
+    }
+
+    addField(field: string | Field): this {
+        if (typeof field === 'string') {
+            this.children.push(new Field(field));
+        } else if (field instanceof Field) {
+            this.children.push(field);
+        }
+
+        return this;
+    }
+
+    setAlias(alias: string): this {
+        this.alias = `${alias}:`;
+
+        return this;
+    }
+
+    addFieldList(fieldList: Array<string | Field>): this {
+        fieldList.forEach(this.addField.bind(this));
+
+        return this;
+    }
+
+    addArgument<T>(name: string, type: string, value: T): this {
+        this.args.push({
+            name,
+            type,
+            value,
+        });
+
+        return this;
+    }
+}
+
+export default Field;

package/app/utils/Query/Fragment.ts

@@ -0,0 +1,22 @@
+/**
+ * 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 Field from './Field';
+
+/** @namespace ../../utils/../../normalizers/Fragment */
+export class Fragment extends Field {
+    __construct(name: string): void {
+        super.__construct(name);
+        (this as any).name = `... on ${name}`;
+    }
+}
+
+export default Fragment;

package/app/utils/Query/PrepareDocument.ts

@@ -0,0 +1,119 @@
+/**
+ * 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 { AbstractField, Mutation, Query } from '@tilework/opus';
+
+import { QueryObject, QueryVariables } from '../../utils/Request/Request';
+
+import { FieldType } from './Query.type';
+
+/**
+ * Prepare request body string from query list (all entries must be instances of Query).
+ * @param  {Array<Field>} queries
+ * @return {String} JSON String, format: `{"query":"{alias: queryName (attr:key) { field1, field2 }}"}`
+ * @namespace ../../utils/../../normalizers/PrepareDocument/prepareFieldString */
+export const prepareFieldString = <T>(
+    rootField: AbstractField<string, T, boolean> | string,
+    accArgs: Record<string, [string, unknown]> = {},
+): string => {
+    // If the field is a plain string, return it directly.
+    if (typeof rootField === 'string') return rootField;
+
+    const {
+        alias, name, args, children,
+    } = rootField;
+
+    const resolvedArgs = (args || []).reduce((
+        acc: string[],
+        arg: {
+            name: string;
+            type: string;
+            value: unknown;
+        },
+    ): string[] => {
+        if (!accArgs[arg.name]) {
+            // eslint-disable-next-line no-param-reassign
+            accArgs[arg.name] = [] as unknown as [string, unknown];
+        }
+
+        const index = accArgs[arg.name].push([arg.type, arg.value]);
+
+        return [...acc, `${arg.name}:$${arg.name}_${index}`];
+    }, [] as string[]);
+
+    const formattedArgs = resolvedArgs.length ? `(${resolvedArgs.join(',')})` : '';
+
+    const formattedChildren = (children || []).map((field) => prepareFieldString(field, accArgs)).join(',');
+
+    const body = (children && children.length) ? `{${formattedChildren}}` : '';
+
+    return `${alias || ''}${name}${formattedArgs}${body}`;
+};
+
+/** @namespace ../../utils/../../normalizers/PrepareDocument/prepareRequest */
+export const prepareRequest = <T>(fields: AbstractField<string, T, boolean>[], type: FieldType): QueryObject => {
+    const fieldsArray = Array.isArray(fields) ? fields : [fields];
+
+    if (type !== FieldType.MUTATION && type !== FieldType.QUERY) {
+        // we only support Mutation and Query types
+        throw new Error(`GraphQL document type "${type}" is not supported.`);
+    }
+
+    const variables: QueryVariables = {};
+    const accArgs = {};
+
+    // prepare fields from each field passed
+    const fieldStrings = fieldsArray.map((field) => prepareFieldString(field, accArgs)).join(',');
+
+    // go through argument accumulator collected in "prepareFieldString", join values
+    // into the format "$var:Type" and append variable value to variables field
+    const resolvedArgs = Object.entries(accArgs).reduce((acc, [name, dataArray]): string[] => {
+        (dataArray as Array<string[]>).forEach(([type, value], i: number) => {
+            const variable = `${name}_${i + 1}`;
+
+            acc.push(`$${variable}:${type}`);
+            variables[variable] = value;
+        });
+
+        return acc;
+    }, [] as string[]);
+
+    // Wrap arguments with "()" and join using ","
+    const formattedArgs = resolvedArgs.length ? `(${resolvedArgs.join(',')})` : '';
+
+    if (process.env.NODE_ENV === 'development') {
+        // eslint-disable-next-line no-console
+        console.log(
+            '%cGraphQL Request',
+            'background-color: #ff00ff; color: #ffffff; font-weight: bold; border-radius: 5px; padding: 2px 5px',
+            {
+                query: `${type}${formattedArgs}{${fieldStrings}}`,
+                variables,
+            },
+        );
+    }
+
+    return {
+        // format like "query($var_1:String){test(arg: $var_1){id}}"
+        query: `${type}${formattedArgs}{${fieldStrings}}`,
+        variables,
+    };
+};
+
+/** @namespace ../../utils/../../normalizers/PrepareDocument/prepareMutation */
+export const prepareMutation = <T>(
+    mutations: Mutation<string, T, boolean>[],
+): QueryObject => prepareRequest(mutations, FieldType.MUTATION);
+
+/** @namespace ../../utils/../../normalizers/PrepareDocument/prepareQuery */
+export const prepareQuery = <T>(
+    queries: Query<string, T, boolean>[],
+): QueryObject => prepareRequest(queries, FieldType.QUERY);

package/app/utils/Query/Query.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
+ */
+
+export enum FieldType {
+    MUTATION = 'mutation',
+    QUERY = 'query',
+}
+
+export interface FieldArgument {
+    name: string;
+    type: string;
+    value: unknown;
+}
+
+export interface PreparedRequest {
+    query: string;
+    variables: unknown;
+}

package/app/utils/Query/index.ts

@@ -0,0 +1,15 @@
+/**
+ * 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
+ */
+
+export * from './PrepareDocument';
+export * from './Query.type';
+export { default as Field } from './Field';
+export { default as Fragment } from './Fragment';

package/app/utils/Request/Config.ts

@@ -0,0 +1,21 @@
+/**
+ * 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
+ */
+
+export const ONE_MONTH_IN_SECONDS = 2592000;
+export const FIVE_MINUTES_IN_SECONDS = 300;
+export const DEFAULT_ERROR_MESSAGE = __('Something went wrong!');
+export const EV_PRIORITY_LOAD_END = 'pr_end';
+export const INTERVAL_OF_CHECK = 50; // ms
+export const GRAPHQL_URI = '/graphql';
+export const WINDOW_ID = 'WINDOW_ID';
+export const HTTP_503_SERVICE_UNAVAILABLE = 503;
+export const HTTP_410_GONE = 410;
+export const HTTP_201_CREATED = 201;

package/app/utils/Request/DataContainer.ts

@@ -0,0 +1,102 @@
+/**
+ * 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';
+import { PureComponent } from 'react';
+
+import { NetworkError } from '../../types/Common.type';
+import { noopFn } from '../../utils/Common';
+import { makeCancelable } from '../../utils/Promise';
+import { CancelablePromise } from '../../utils/Promise/Promise.type';
+import { prepareQuery } from '../../utils/Query';
+import { hash } from '../../utils/Request/Hash';
+import { executeGet, listenForBroadCast } from '../../utils/Request/Request';
+
+import { ONE_MONTH_IN_SECONDS } from './Config';
+
+/** @namespace ../../utils/Request/DataContainer */
+export class DataContainer<
+P = Record<string, unknown>,
+S = Record<string, unknown>,
+> extends PureComponent<P, S> {
+    protected dataModelName = '';
+
+    protected isShouldListenForBroadcast = true;
+
+    protected cacheTTL = ONE_MONTH_IN_SECONDS;
+
+    protected promise?: CancelablePromise<unknown>;
+
+    __construct(
+        props: P,
+        dataModelName = '',
+        isShouldListenForBroadcast = true,
+        cacheTTL = ONE_MONTH_IN_SECONDS,
+    ): void {
+        super.__construct?.(props);
+
+        this.dataModelName = dataModelName;
+        this.isShouldListenForBroadcast = isShouldListenForBroadcast;
+        this.cacheTTL = cacheTTL;
+        this.promise = undefined;
+    }
+
+    componentWillUnmount(): void {
+        if (this.promise) {
+            this.promise.cancel();
+        }
+    }
+
+    fetchData<T = unknown, E = NetworkError | NetworkError[]>(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        rawQueries: Query<string, any, boolean>[],
+        onSuccess: (x: T) => void = noopFn,
+        onError: (x: E) => void = noopFn,
+        takeFromWindowCache = true,
+    ): void {
+        const preparedQuery = prepareQuery(rawQueries);
+        const { query, variables } = preparedQuery;
+        const queryHash = hash(query + JSON.stringify(variables));
+
+        if (!window.dataCache) {
+            window.dataCache = {};
+        }
+
+        if (takeFromWindowCache && window.dataCache[queryHash]) {
+            onSuccess(window.dataCache[queryHash] as T);
+
+            return;
+        }
+
+        this.promise = makeCancelable(
+            executeGet(preparedQuery, this.dataModelName, this.cacheTTL),
+        );
+
+        this.promise.promise.then(
+            /** @namespace ../../utils/Request/DataContainer/DataContainer/fetchData/then */
+            (response) => {
+                (window.dataCache || {})[queryHash] = response;
+                onSuccess(response as T);
+            },
+            /** @namespace ../../utils/Request/DataContainer/DataContainer/fetchData/then/onError/catch */
+            (err) => onError(err),
+        );
+
+        if (this.isShouldListenForBroadcast) {
+            listenForBroadCast<T>(this.dataModelName).then(
+                /** @namespace ../../utils/Request/DataContainer/DataContainer/fetchData/listenForBroadCast/then/onSuccess */
+                onSuccess,
+            );
+        }
+    }
+}
+
+export default DataContainer;

package/app/utils/Request/Debounce.ts

@@ -0,0 +1,48 @@
+// TODO
+/** @namespace ../../utils/Request/Debounce/debounce */
+/**
+ * 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
+ */
+
+export const debounce = <T>(
+    callback: (...args: T[]) => void | Promise<void>, delay: number): (...args: T[]) => void => {
+    // eslint-disable-next-line fp/no-let
+    let timeout: NodeJS.Timeout;
+
+    return (...args: T[]) => {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => callback.apply(this, args as []), delay);
+    };
+};
+
+/** @namespace ../../utils/Request/Debounce */
+export class Debouncer {
+    timeout!: NodeJS.Timeout;
+
+    handler = (): void => {};
+
+    startDebounce = <T = unknown>(
+        callback: (...args: T[]) => void,
+        delay: number,
+    ) => (...args: T[]): void => {
+        clearTimeout(this.timeout);
+        this.handler = () => callback.apply(this, args);
+        this.timeout = setTimeout(this.handler, delay);
+    };
+
+    cancelDebounce = (): void => {
+        clearTimeout(this.timeout);
+    };
+
+    cancelDebounceAndExecuteImmediately = (): void => {
+        clearTimeout(this.timeout);
+        this.handler();
+    };
+}

package/app/utils/Request/Error.ts

@@ -0,0 +1,31 @@
+/**
+ * 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 { NetworkError } from '../../types/Common.type';
+
+import { DEFAULT_ERROR_MESSAGE } from './Config';
+
+/**
+ * Get error message from an array of errors from graphql, or from a regular error object.
+ * @param array | object error
+ * @param string optional default error message if couldn't get any from the given error
+ * @return string message
+ * @namespace ../../utils/Request/Error/getErrorMessage */
+export const getErrorMessage = (
+    error: NetworkError | NetworkError[],
+    defaultMessage: string = DEFAULT_ERROR_MESSAGE,
+): string => {
+    if (Array.isArray(error)) {
+        return error?.[0].message || defaultMessage;
+    }
+
+    return error?.message || defaultMessage;
+};

package/app/utils/Request/Hash.ts

@@ -0,0 +1,88 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+/* eslint-disable no-magic-numbers */
+/* eslint-disable import/prefer-default-export */
+/* eslint-disable no-fallthrough */
+/* eslint-disable no-bitwise */
+
+/**
+ * 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
+ */
+
+// TODO seed is always undefined! Why ?
+/**
+ * JS Implementation of MurmurHash3 (r136) (as of May 20, 2011)
+ *
+ * @author <a href="mailto:gary.court@gmail.com">Gary Court</a>
+ * @see http://github.com/garycourt/murmurhash-js
+ * @author <a href="mailto:aappleby@gmail.com">Austin Appleby</a>
+ * @see http://sites.google.com/site/murmurhash/
+ *
+ * @param {string} key ASCII only
+ * @param {number} seed Positive integer only
+ * @return {number} 32-bit positive integer hash
+ * @namespace ../../utils/Request/Hash/hash */
+export const hash = (key: string, seed = 1): number => {
+    // eslint-disable-next-line one-var, fp/no-let
+    let h1,
+        h1b,
+        k1,
+        i;
+
+    const remainder = key.length & 3;
+    const bytes = key.length - remainder;
+    const c1 = 0xcc9e2d51;
+    const c2 = 0x1b873593;
+
+    h1 = seed;
+    i = 0;
+
+    // eslint-disable-next-line fp/no-loops
+    while (i < bytes) {
+        k1 = ((key.charCodeAt(i) & 0xff))
+            | ((key.charCodeAt(++i) & 0xff) << 8)
+            | ((key.charCodeAt(++i) & 0xff) << 16)
+            | ((key.charCodeAt(++i) & 0xff) << 24);
+
+        ++i;
+
+        k1 = ((((k1 & 0xffff) * c1) + ((((k1 >>> 16) * c1) & 0xffff) << 16))) & 0xffffffff;
+        k1 = (k1 << 15) | (k1 >>> 17);
+        k1 = ((((k1 & 0xffff) * c2) + ((((k1 >>> 16) * c2) & 0xffff) << 16))) & 0xffffffff;
+
+        h1 ^= k1;
+        h1 = (h1 << 13) | (h1 >>> 19);
+        h1b = ((((h1 & 0xffff) * 5) + ((((h1 >>> 16) * 5) & 0xffff) << 16))) & 0xffffffff;
+        h1 = (((h1b & 0xffff) + 0x6b64) + ((((h1b >>> 16) + 0xe654) & 0xffff) << 16));
+    }
+
+    k1 = 0;
+
+    // eslint-disable-next-line default-case
+    switch (remainder) {
+    case 3: k1 ^= (key.charCodeAt(i + 2) & 0xff) << 16;
+    case 2: k1 ^= (key.charCodeAt(i + 1) & 0xff) << 8;
+    case 1: k1 ^= (key.charCodeAt(i) & 0xff);
+        k1 = (((k1 & 0xffff) * c1) + ((((k1 >>> 16) * c1) & 0xffff) << 16)) & 0xffffffff;
+        k1 = (k1 << 15) | (k1 >>> 17);
+        k1 = (((k1 & 0xffff) * c2) + ((((k1 >>> 16) * c2) & 0xffff) << 16)) & 0xffffffff;
+        h1 ^= k1;
+    }
+
+    h1 ^= key.length;
+
+    h1 ^= h1 >>> 16;
+    h1 = (((h1 & 0xffff) * 0x85ebca6b) + ((((h1 >>> 16) * 0x85ebca6b) & 0xffff) << 16)) & 0xffffffff;
+    h1 ^= h1 >>> 13;
+    h1 = ((((h1 & 0xffff) * 0xc2b2ae35) + ((((h1 >>> 16) * 0xc2b2ae35) & 0xffff) << 16))) & 0xffffffff;
+    h1 ^= h1 >>> 16;
+
+    return h1 >>> 0;
+};

package/app/utils/Request/LowPriorityLoad.ts

@@ -0,0 +1,32 @@
+/**
+ * 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 { INTERVAL_OF_CHECK } from './Config';
+
+/** @namespace ../../utils/Request/LowPriorityLoad/waitForPriorityLoad */
+export const waitForPriorityLoad = () => new Promise((resolve) => {
+    function waitForIt(){
+        if (window.isPriorityLoaded) {
+            resolve(null);
+
+            return;
+        }
+
+        setTimeout(waitForIt, INTERVAL_OF_CHECK);
+    }
+
+    waitForIt();
+});
+
+/** @namespace ../../utils/Request/LowPriorityLoad/setLoadedFlag */
+export const setLoadedFlag = () => {
+    window.isPriorityLoaded = true;
+};

package/app/utils/Request/LowPriorityRender.ts

@@ -0,0 +1,55 @@
+/**
+ * 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 {
+    ComponentType,
+    lazy,
+    useEffect, useState,
+} from 'react';
+
+import { EV_PRIORITY_LOAD_END } from './Config';
+import { waitForPriorityLoad } from './LowPriorityLoad';
+
+/** @namespace ../../utils/Request/LowPriorityRender/lowPriorityLazy */
+export const lowPriorityLazy = (callback: () => Promise<{ default: ComponentType<any> }>) => lazy(async () => {
+    await waitForPriorityLoad();
+
+    const ev = new Event(EV_PRIORITY_LOAD_END);
+    document.dispatchEvent(ev);
+
+    return callback();
+});
+
+/** @namespace ../../utils/Request/LowPriorityRender/AfterPriority */
+
+export function AfterPriority(
+    { children, fallback }: { children: JSX.Element; fallback?: JSX.Element },
+): JSX.Element {
+    const [isPriorityLoaded, setIsPriorityLoaded] = useState(window.isPriorityLoaded);
+
+    function onPriorityLoad() {
+        setIsPriorityLoaded(true);
+    }
+
+    useEffect(() => {
+        document.addEventListener(EV_PRIORITY_LOAD_END, onPriorityLoad, { once: true });
+
+        return () => {
+            document.removeEventListener(EV_PRIORITY_LOAD_END, onPriorityLoad);
+        };
+    }, []);
+
+    if (!isPriorityLoaded && fallback) {
+        return fallback;
+    }
+
+    return children;
+}