@mframework/layer-commerce 0.0.3

package/app/utils/Compare/Compare.ts

@@ -0,0 +1,89 @@
+/**
+ * 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 { isSignedIn } from '../../utils/Auth/IsSignedIn';
+import { TokensByWebsite } from '../Auth/Token';
+
+// Fallback constants (original project expects these in Auth/Config)
+const ONE_HOUR = 3600;
+const ONE_HOUR_IN_SECONDS = 3600;
+const TOKEN_REFRESH_DELAY = 3000;
+import BrowserDatabase from '../../utils/BrowserDatabase';
+import { debounce } from '../../utils/Request/Debounce';
+import { getStoreState } from '../../utils/Store';
+
+/**
+ *
+ * @type {string}
+ */
+export const COMPARE_UID = 'compare_uid';
+
+/**
+ *
+ * @type {number}
+ */
+export const ONE_DAY = 86400;
+
+/**
+ *
+ * @param {string} uid
+ * @returns {void}
+ * @namespace ../../utils/Compare/setUid
+ */
+export const setUid = (uid: string | null): void => {
+    const { website_code } = window;
+    const tokens: TokensByWebsite = BrowserDatabase.getItem(COMPARE_UID) || {};
+    const state = getStoreState();
+    const {
+        access_token_lifetime = ONE_HOUR,
+    } = state.ConfigReducer || {};
+
+    const uidExpirationTimeInStorage = isSignedIn()
+        ? parseInt(String(access_token_lifetime), 10) * ONE_HOUR_IN_SECONDS
+        : ONE_DAY;
+
+    tokens[website_code] = uid as any;
+
+    BrowserDatabase.setItem(tokens, COMPARE_UID, uidExpirationTimeInStorage);
+};
+
+/**
+ *
+ * @returns {string|boolean} uid
+ * @namespace ../../utils/Compare/getUid
+ */
+export const getUid = (): string | null => {
+    const { website_code } = window;
+
+    const tokens: TokensByWebsite = BrowserDatabase.getItem(COMPARE_UID) || {};
+    const uid = tokens[website_code];
+
+    return (typeof uid === 'string') ? uid : null;
+};
+
+/**
+ *
+ * @namespace ../../utils/Compare/removeUid
+ */
+export const removeUid = (): void => {
+    const { website_code } = window;
+    const uids: Record<string, string | null | undefined> = BrowserDatabase.getItem(COMPARE_UID) || {};
+
+    uids[website_code] = undefined;
+
+    BrowserDatabase.setItem(uids, COMPARE_UID);
+};
+
+/** @namespace ../../utils/Compare/refreshUid */
+export const refreshUid = debounce(
+    () => setUid(getUid()),
+    TOKEN_REFRESH_DELAY,
+);

package/app/utils/Compare/index.ts

@@ -0,0 +1,12 @@
+/**
+ * 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 './Compare';

package/app/utils/Currency/Currency.ts

@@ -0,0 +1,84 @@
+/**
+ * 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 { Currencies, CurrencyData } from '../../normalizers/Config.type';
+import BrowserDatabase from '../../utils/BrowserDatabase';
+import { getStoreState } from '../../utils/Store';
+
+/**
+ *
+ * @type {string}
+ */
+export const CUR_CURRENCY = 'current_currency';
+
+/**
+ *
+ * @type {number}
+ */
+export const ONE_HOUR = 3600;
+
+/**
+ *
+ * @param {Any} currency
+ * @returns {void}
+ * @namespace ../../utils/Currency/setCurrency
+ */
+export const setCurrency = (currency: string): void => {
+    BrowserDatabase.setItem(currency, CUR_CURRENCY, ONE_HOUR);
+};
+
+/**
+ *
+ * @returns {String} currency
+ * @namespace ../../utils/Currency/getCurrency
+ */
+export const getCurrency = (): string => {
+    const {
+        ConfigReducer: {
+            default_display_currency_code = window.storeCurrency,
+        } = {},
+    } = getStoreState();
+
+    const currency = BrowserDatabase.getItem(CUR_CURRENCY);
+
+    return (typeof currency === 'string') ? currency : default_display_currency_code;
+};
+
+/**
+ *
+ * @param {object} currencyData
+ * @param {object} currencyRates
+ * @returns {object} filtered currencyData object and currency (rates) object
+ * @namespace ../../utils/Currency/returnFilteredCurrencies
+ */
+export const returnFilteredCurrencies = (
+    currencyData: CurrencyData,
+    currencyRates: Currencies,
+): { currencyData: CurrencyData; currencyRates?: Currencies; currency?: Currencies } => {
+    if (
+        currencyData?.available_currencies_data?.length < 1 || currencyRates?.exchange_rates?.length < 1) {
+        return ({ currencyData, currencyRates });
+    }
+
+    const { available_currencies_data: availableCurrencies = [] } = currencyData;
+    const { base_currency_code: base, exchange_rates: rates = [] } = currencyRates;
+
+    return ({
+        currencyData: {
+            ...currencyData,
+            available_currencies_data:
+                availableCurrencies.filter(({ value }) => (
+                    value === base || Number(rates?.find(({ currency_to }) => currency_to === value)?.rate || 0) > 0
+                )),
+        },
+        currency: currencyRates,
+    });
+};

package/app/utils/Currency/index.ts

@@ -0,0 +1,12 @@
+/**
+ * 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 './Currency';

package/app/utils/DynamicReducer/DynamicReducer.type.ts

@@ -0,0 +1,14 @@
+/**
+ * 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 Props = Record<string, unknown>;
+
+export type WithReducersResult = (props: Props) => JSX.Element;

package/app/utils/DynamicReducer/Helper.ts

@@ -0,0 +1,30 @@
+/**
+ * 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
+ */
+
+// Minimal reducer type alias for compatibility with legacy code.
+type Reducer = (state: any, action?: any) => any;
+
+/**
+ * @param store
+ * @param reducers
+ */
+export default function injectToReducers(
+    store: any,
+    reducers: Record<string, Reducer>,
+): void {
+    Object.keys(reducers).forEach((key) => {
+        if (store.asyncReducers && store.injectReducer && !Reflect.has(store.asyncReducers, key)) {
+            // eslint-disable-next-line no-param-reassign
+            store.asyncReducers[key] = reducers[key];
+            store.injectReducer(key, reducers[key]);
+        }
+    });
+}

package/app/utils/DynamicReducer/index.tsx

@@ -0,0 +1,35 @@
+/**
+ * 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 { ElementType } from 'react';
+// Minimal reducer type alias for compatibility with legacy code.
+type Reducer = (state: any, action?: any) => any;
+
+import injectReducers from '../../utils/DynamicReducer/Helper';
+import { getStore } from '../../utils/Store';
+
+import { Props, WithReducersResult } from './DynamicReducer.type';
+
+/** @namespace ../../utils/DynamicReducer/Index/withReducers */
+export const withReducers = (reducers: Record<string, Reducer>) => (
+    WrappedComponent: ElementType,
+): WithReducersResult => {
+    const injectAndExecute = (props: Props) => {
+        injectReducers(getStore(), reducers);
+
+        // eslint-disable-next-line @mframework/mframework-guidelines/jsx-no-props-destruction
+        return <WrappedComponent { ...props } />;
+    };
+
+    return injectAndExecute;
+};
+
+export default { withReducers };

package/app/utils/ElementTransition/ElementTransition.ts

@@ -0,0 +1,100 @@
+/** @namespace ../../utils/ElementTransition/transitionElementFromTo */
+/**
+ * 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 transitionElementFromTo = async ({
+    elFrom,
+    elToCallback,
+    isCopyCssProperties,
+}: any) => {
+    if (!elFrom || !elToCallback) {
+        return;
+    }
+
+    const {
+        top: st, left: sl, width: sw, height: sh,
+    } = elFrom.getBoundingClientRect();
+
+    const transitionWrapper = document.createElement('div');
+    transitionWrapper.id = 'transition-wrapper';
+    transitionWrapper.classList.add('element-transition');
+
+    const clonedElement = elFrom.cloneNode(true);
+
+    if (isCopyCssProperties) {
+        const styles = window.getComputedStyle(elFrom);
+
+        ['font', 'background', 'outline', 'border', 'color'].forEach((key) => {
+            clonedElement.style.setProperty(key, styles.getPropertyValue(key));
+        });
+    }
+
+    clonedElement.style.top = `${ st }px`;
+    clonedElement.style.left = `${ sl }px`;
+    clonedElement.style.width = `${ sw }px`;
+    clonedElement.style.height = `${ sh }px`;
+
+    transitionWrapper.appendChild(clonedElement);
+    document.body.appendChild(transitionWrapper);
+
+    // wait until condition is met
+    await new Promise((resolve, reject) => {
+        // eslint-disable-next-line fp/no-let
+        let maxTries = 100;
+
+        const interval = setInterval(() => {
+            if (maxTries <= 0) {
+                clearInterval(interval);
+                reject();
+            }
+
+            const condition = elToCallback();
+
+            if (condition) {
+                clearInterval(interval);
+                resolve(true);
+            }
+
+            maxTries -= 1;
+        // eslint-disable-next-line no-magic-numbers
+        }, 100);
+    });
+
+    const imageTo = elToCallback();
+
+    const {
+        top: tt, left: tl, width: tw, height: th,
+    } = imageTo.getBoundingClientRect();
+
+    const newHeight = (th / tw) * sh;
+    const translateYCorrection = (newHeight - sh) / 2;
+    const newSt = st - translateYCorrection;
+
+    const translateX = tl - sl;
+    const translateY = tt - newSt;
+    const scale = tw / sw;
+    const scaleY = th / newHeight;
+
+    // Top is changed to get correct top location after transform
+    clonedElement.style.top = `${ newSt }px`;
+    // Height is changed to get correct aspect ratio before tranform
+    clonedElement.style.height = `${ newHeight }px`;
+    clonedElement.style.transform = `translate3d(${ translateX }px, ${ translateY }px, 0) scale(${ scale }, ${ scaleY })`;
+
+    setTimeout(() => {
+        transitionWrapper.classList.add('element-transition--active');
+        // eslint-disable-next-line no-magic-numbers
+    }, 150);
+
+    setTimeout(() => {
+        transitionWrapper.remove();
+        // eslint-disable-next-line no-magic-numbers
+    }, 300);
+};

package/app/utils/Form/Extract.ts

@@ -0,0 +1,316 @@
+/**
+ * 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 { DateFieldAttr, HourFormat } from 'Component/DateSelect/DateSelect.config';
+import { FieldType } from 'Component/Field/Field.config';
+import {
+    DATE_FIELDS_COUNT,
+    FieldDateType,
+    TimeFormat,
+} from 'Component/FieldDate/FieldDate.config';
+import { GetYearRangeAttributes } from '../../utils/Product/Product.type';
+
+import {
+    DateMap,
+    DateObject,
+    DatesData,
+    FieldData,
+    GetFieldsData,
+    YearRangeAttribute,
+} from './Form.type';
+
+/**
+ * Appends 0 to value if its less than passed attribute;
+ * @param value
+ * @param lessThan
+ * @returns {string|*}
+ * @namespace ../../utils/Form/Extract/zeroBasedValue
+ */
+// eslint-disable-next-line no-magic-numbers
+export const zeroBasedValue = (value: number, lessThan = 10): string => (
+    (+value < lessThan) ? `0${value}` : String(value)
+);
+
+/** @namespace ../../utils/Form/Extract/adjustHours */
+export const adjustHours = (hours: number, timeFormat: string): number => {
+    if (timeFormat === TimeFormat.H12) {
+        if (hours > HourFormat.H12) {
+            return hours % HourFormat.H12;
+        }
+
+        if (hours === 0) {
+            return HourFormat.H12;
+        }
+    }
+
+    return hours;
+};
+
+/**
+ * Converts date to magento supported format
+ * @returns {string|*}
+ * @namespace ../../utils/Form/Extract/getDateValue
+ */
+export const getDateValue = (dateValue: number | string | Date): number | string | Date => {
+    try {
+        const date = new Date(dateValue);
+        const day = zeroBasedValue(date.getDate());
+        const month = zeroBasedValue(date.getMonth() + 1);
+        const year = date.getFullYear();
+        const hours = zeroBasedValue(date.getHours());
+        const minutes = zeroBasedValue(date.getMinutes());
+        const seconds = zeroBasedValue(date.getSeconds());
+
+        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+    } catch {
+        return dateValue;
+    }
+};
+
+/** @namespace ../../utils/Form/Extract/calcYearRangeAttributes */
+export const calcYearRangeAttributes = (startYear: number, endYear: number): YearRangeAttribute => {
+    const currentYear = new Date().getFullYear();
+
+    // https://docs.magento.com/user-guide/stores/attribute-date-time-options.html
+    // blank year range defaults to current year
+    if (!startYear && !endYear) {
+        return { minYear: currentYear, maxYear: currentYear };
+    }
+
+    // if start or end date is empty it defaults to current year
+    // if it creates an invalid range, the only filled in year is used both as start and end of the range
+    // e.g. `2020,` => `2020,2021`, `,2022` => `2021,2022`, `,2020` => `2020,2020`, `2022,` => `2022,2022`
+    const minYear = startYear || (endYear && currentYear <= endYear ? currentYear : endYear);
+    const maxYear = endYear || (startYear && currentYear >= startYear ? currentYear : startYear);
+
+    return { minYear, maxYear };
+};
+
+/** @namespace ../../utils/Form/Extract/getYearRangeAttributes */
+export const getYearRangeAttributes = <IsYear extends boolean = false>(
+    yearRange: string | undefined, isYear: IsYear,
+): GetYearRangeAttributes<IsYear> => {
+    const [startYear, endYear] = (yearRange || ',').split(',');
+
+    const { minYear, maxYear } = calcYearRangeAttributes(Number(startYear), Number(endYear));
+
+    if (isYear) {
+        return <GetYearRangeAttributes<IsYear>>{ minYear, maxYear };
+    }
+
+    return <GetYearRangeAttributes<IsYear>>{
+        minDate: new Date(`${minYear}-01-01T00:00:00.000`),
+        maxDate: new Date(`${maxYear}-12-31T23:59:59.999`),
+    };
+};
+
+/** @namespace ../../utils/Form/Extract/isMagentoDateFormatValid */
+export const isMagentoDateFormatValid = (dateFieldsOrder: string): boolean => new RegExp(Array(DATE_FIELDS_COUNT)
+    .fill('[dmy]').join(','))
+    .test(dateFieldsOrder);
+
+/** @namespace ../../utils/Form/Extract/getTimeFormat */
+export const getTimeFormat = (timeFormat: string): string => (timeFormat === TimeFormat.H12 ? 'h:mm aa' : 'HH:mm');
+
+/** @namespace ../../utils/Form/Extract/getDateFormat */
+export const getDateFormat = (dateFieldsOrder: string): string => {
+    if (!isMagentoDateFormatValid(dateFieldsOrder)) {
+        return 'dd/MM/yyyy';
+    }
+
+    const dateMap: DateMap = {
+        d: 'dd',
+        m: 'MM',
+        y: 'yyyy',
+    };
+
+    return dateFieldsOrder
+        .split(',')
+        .map((field) => dateMap[<keyof DateMap>field])
+        .join('/');
+};
+
+/** @namespace ../../utils/Form/Extract/getDateTimeFormat */
+export const getDateTimeFormat = (type: string, dateFieldsOrder: string, timeFormat: string): string => {
+    const timePart = type === FieldDateType.TIME || type === FieldDateType.DATETIME
+        ? getTimeFormat(timeFormat)
+        : '';
+
+    const datePart = type === FieldDateType.DATE || type === FieldDateType.DATETIME
+        ? getDateFormat(dateFieldsOrder)
+        : '';
+
+    return `${datePart } ${ timePart}`.trim();
+};
+
+/** @namespace ../../utils/Form/Extract/adjustAmpmHours */
+export const adjustAmpmHours = (hours: number, ampm?: string): number => {
+    if (ampm === 'PM') {
+        return (hours % HourFormat.H12) + HourFormat.H12;
+    }
+
+    if (ampm === 'AM') {
+        return hours % HourFormat.H12;
+    }
+
+    return hours;
+};
+
+/** @namespace ../../utils/Form/Extract/transformDateFieldsData */
+export const transformDateFieldsData = (
+    datesData: Record<string, DatesData>,
+): DateObject[] => Object.entries(datesData).reduce((
+    prev: DateObject[],
+    [name, data],
+) => {
+    const {
+        type,
+        year,
+        month,
+        day,
+        hours,
+        minutes,
+        ampm,
+    } = data;
+
+    const hoursAdjusted = adjustAmpmHours(Number(hours), ampm);
+
+    if (type === FieldDateType.DATE && year && month && day) {
+        return [...prev, {
+            name,
+            type,
+            value: `${year}-${month}-${day} 00:00:00`,
+        }];
+    }
+
+    if (type === FieldDateType.DATETIME && year && month && day && hours && minutes) {
+        return [...prev, {
+            name,
+            type,
+            value: `${year}-${month}-${day} ${hoursAdjusted}:${minutes}:00`,
+        }];
+    }
+
+    if (type === FieldDateType.TIME && hours && minutes) {
+        return [...prev, {
+            name,
+            type,
+            value: `2000-01-01 ${hoursAdjusted}:${minutes}:00`,
+        }];
+    }
+
+    return prev;
+}, []);
+
+/** @namespace ../../utils/Form/Extract/groupDateFieldsData */
+export const groupDateFieldsData = (
+    fields: NodeListOf<HTMLSelectElement | HTMLInputElement>,
+): Record<string, DatesData> => Array.from(fields)
+    .reduce((prev: Record<string, DatesData>, field) => {
+        const dataType = field.getAttribute(DateFieldAttr.TYPE) || '';
+
+        if (!Object.values<string>(FieldDateType).includes(dataType)) {
+            return prev;
+        }
+
+        const { name, value } = field;
+        const fieldName = field.getAttribute(DateFieldAttr.NAME) || '';
+        const { [name]: prevData } = prev;
+
+        return {
+            ...prev,
+            [name]: {
+                ...prevData,
+                type: <FieldDateType>dataType,
+                [fieldName]: value,
+            },
+        };
+    }, {});
+
+/**
+ * Returns fields values from DOM/Form
+ * @param DOM
+ * @param excludeEmpty
+ * @param ignoreTypes
+ * @param asObject
+ * @returns {{}|*[]}
+ * @namespace ../../utils/Form/Extract/getFieldsData
+ */
+export const getFieldsData = <AsObject extends boolean = false>(
+    DOM: Document | HTMLElement | null,
+    excludeEmpty = false,
+    ignoreTypes: string[] = [],
+    asObject?: AsObject,
+): GetFieldsData<AsObject> | null => {
+    if (!DOM) {
+        return null;
+    }
+
+    const fields: NodeListOf<HTMLSelectElement | HTMLInputElement> = DOM.querySelectorAll('input, textarea, select');
+    const output: Array<DateObject | FieldData> = [];
+
+    const dateFieldsGrouped = groupDateFieldsData(fields);
+
+    output.push(...transformDateFieldsData(dateFieldsGrouped));
+
+    fields.forEach((field) => {
+        if (Object.values<string>(FieldDateType).includes(field.getAttribute(DateFieldAttr.TYPE) || '')) {
+            return;
+        }
+
+        const { tagName } = field;
+        const tag = tagName.toLowerCase();
+        const type = tag === FieldType.TEXTAREA || tag === FieldType.SELECT || tag === FieldType.BUTTON
+            ? tag
+            : field.type;
+
+        if (ignoreTypes.some((ignoreType) => ignoreType === type)) {
+            return;
+        }
+
+        // eslint-disable-next-line no-nested-ternary
+        const value = field instanceof HTMLInputElement
+            && (type === FieldType.CHECKBOX || type === FieldType.RADIO)
+            // eslint-disable-next-line no-nested-ternary
+            ? (field.checked ? field.value === 'on' ? true : field.value : false)
+            : field instanceof HTMLInputElement && type === FieldType.FILE
+                ? field.fileData
+                : field.value;
+
+        const dateValue = field.getAttribute('data-date');
+        const formattedValue = dateValue ? getDateValue(dateValue) : value;
+
+        if (!excludeEmpty || value) {
+            output.push({
+                name: field.name,
+                type,
+                value: formattedValue,
+                field: (field as HTMLInputElement),
+            });
+        }
+    });
+
+    if (asObject) {
+        const objectOutput: Record<string, DateObject | FieldData> = {};
+
+        output.forEach((field) => {
+            const { name } = field;
+
+            objectOutput[name] = field;
+        });
+
+        return <GetFieldsData<AsObject>>objectOutput;
+    }
+
+    return <GetFieldsData<AsObject>>output;
+};
+
+export default getFieldsData;