@mframework/layer-commerce 0.0.3

package/app/utils/Url/Url.ts

@@ -0,0 +1,297 @@
+/**
+ * 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 { History, Location } from 'history';
+type Match = any
+
+import { decodeString } from '../../utils/Common';
+import { getStoreState } from '../../utils/Store';
+
+/**
+ * Update query params without adding to history
+ * @param {String} name
+ * @param {String} value
+ * @namespace ../../utils/Url/updateQueryParamWithoutHistory
+ */
+export const updateQueryParamWithoutHistory = (
+    name: string,
+    value: string,
+    history: History,
+    location: Location,
+): void => {
+    const { search, pathname } = location;
+
+    const params = new URLSearchParams(search);
+
+    params.set(name, value);
+    history.replace(decodeURIComponent(`${ pathname }?${ params }`));
+};
+
+/**
+ * Remove query param without adding to history
+ * @param {String} name
+ * @namespace ../../utils/Url/removeQueryParamWithoutHistory
+ */
+export const removeQueryParamWithoutHistory = (name: string, history: History, location: Location): void => {
+    const { search, pathname } = location;
+
+    const params = new URLSearchParams(search);
+
+    params.delete(name);
+    history.replace(decodeURIComponent(`${ pathname }?${ params }`));
+};
+
+/**
+ * Get query param from url
+ * @param {Object} match match object from react-router
+ * @param {Object} location location object from react-router
+ * @namespace ../../utils/Url/getUrlParam
+ */
+export const getUrlParam = (match: Match, location: Location): string => {
+    const baseUrl = match.path.replace(window.storeRegexText, '').replace('/', '');
+    const currentUrl = location.pathname.replace(new RegExp(`^${window.storeRegexText}`, 'i'), '');
+
+    if (baseUrl === '/') {
+        return currentUrl.replace(baseUrl, '');
+    }
+
+    return currentUrl.replace(baseUrl, '').replace(/^\/*/, '');
+};
+
+/** @namespace ../../utils/Url/trimEndSlash */
+export const trimEndSlash = (str: string): string => (str.endsWith('/') ? str.slice(0, -1) : str);
+
+/**
+ * Replaces section of URL with passed path value
+ * @param {RegExp} regex replacement rule
+ * @param {String} path replacement element
+ * @returns {*}
+ * @namespace ../../utils/Url/replace
+ */
+export const replace = (regex: RegExp, path: string): string => {
+    const { pathname = '' } = new URL(window.location.href);
+
+    return pathname.replace(regex, path);
+};
+
+/**
+ * Append store code to URL
+ * @param {String} pathname the URL to append store code to
+ * @namespace ../../utils/Url/appendWithStoreCode
+ */
+export const appendWithStoreCode = (pathname: string): string => {
+    const { ConfigReducer: { base_link_url = window.location.href } = {} } = getStoreState();
+    const { pathname: storePrefix } = new URL(base_link_url);
+
+    if (!pathname) {
+        return trimEndSlash(storePrefix);
+    }
+
+    // match URLs which have the store code in pathname
+    if (new RegExp(`^/(${window.storeList.join('|')})/`, 'i').test(pathname)) {
+        return pathname;
+    }
+
+    // trim the last slash from URL, and append it to pathname
+    return trimEndSlash(storePrefix).concat(!pathname.startsWith('/') ? `/${ pathname }` : pathname);
+};
+
+/**
+ * Get query variable value (from react router)
+ * @param {String} variable Variable from URL
+ * @param {Object} location location object from react-router
+ * @param {Boolean} isReplaceEqual condition to replace equal sign
+ * @return {String|false} Variable value
+ * @namespace ../../utils/Url/getQueryParam
+ */
+export const getQueryParam = (
+    variable: string,
+    location: Location,
+    isReplaceEqual: boolean = true,
+): string | false => {
+    const query = decodeString(location.search.substring(1));
+    const vars = query.split(/[?&]/);
+
+    return vars.reduce((acc: string | false, item: string) => {
+        const splitIdx = item.indexOf('=');
+        const [k, v] = [item.slice(0, splitIdx), item.slice(splitIdx + 1)];
+
+        if (k !== variable) {
+            return acc;
+        }
+
+        return isReplaceEqual ? v.replace(/=/g, ':') : v;
+    }, false);
+};
+
+/**
+ * Convert url params to object with key value pairs
+ * @param {String} queryString url query string
+ * @return {Object} Key-Value pairs
+ * @namespace ../../utils/Url/convertQueryStringToKeyValuePairs
+ */
+export const convertQueryStringToKeyValuePairs = <T extends Record<string, string> = Record<string, string>>(
+    queryString: string,
+): T => {
+    const keyValuePairs: Record<string, string> = {};
+    const params = queryString.substring(1).split('&');
+
+    params.forEach((param) => {
+        const pair = param.split('=');
+        const [keyPair, valuePair] = pair;
+
+        if (keyPair.length > 0 && valuePair.length > 0) {
+            keyValuePairs[keyPair] = decodeURIComponent(valuePair);
+        }
+    });
+
+    return keyValuePairs as T;
+};
+
+/**
+ * Update existing key value pairs and return result
+ * @param {Object} keyValuePairs current key value pairs
+ * @param {String} currentKey key of the value to be updated
+ * @param {String} currentValue value to be updated
+ * @return {Object} Key-Value pairs
+ * @namespace ../../utils/Url/updateKeyValuePairs
+ */
+export const updateKeyValuePairs = (
+    keyValuePairs: Record<string, string | number>,
+    currentKey: string,
+    currentValue: string | number,
+): Record<string, string | number> => {
+    const updatedKeyValuePairs: Record<string, string | number> = {};
+
+    Object.entries(keyValuePairs).forEach((pair) => {
+        const [key, value] = pair;
+
+        if (currentKey === key) {
+            updatedKeyValuePairs[key] = currentValue;
+        } else {
+            updatedKeyValuePairs[key] = value;
+        }
+    });
+
+    return updatedKeyValuePairs;
+};
+
+/**
+ * Convert object with key value pairs to url query string
+ * @param {Object} keyValuePairs object with key value pairs
+ * @return {String} Converted query string
+ * @namespace ../../utils/Url/convertKeyValuesToQueryString
+ */
+export const convertKeyValuesToQueryString = (
+    keyValuePairs: Record<string, string | number>,
+): string => Object.entries(keyValuePairs)
+    .map((pair) => {
+        const [key, value] = pair;
+        const keyExists = key !== '';
+        const valueExists = value !== '';
+
+        if (valueExists && keyExists) {
+            return `${key}=${value}`;
+        }
+
+        return null;
+    })
+    .filter((x) => !!x)
+    .join('&');
+
+/** @namespace ../../utils/Url/generateQuery */
+export const generateQuery = (
+    keyValueObject: Record<string, string | number>,
+    location: Location,
+    history: History,
+): string => Object.entries(keyValueObject)
+    .reduce((acc, pair) => {
+        const [key, value] = pair;
+
+        const keyAndValueExist = !!key && !!value;
+
+        if (acc === '' && keyAndValueExist) {
+            return `?${key}=${value}`;
+        }
+
+        if (getQueryParam(key, location) !== false) {
+            const keyValuePairs = convertQueryStringToKeyValuePairs(acc);
+            const updatedKeyValuePairs = updateKeyValuePairs(keyValuePairs, key, value);
+            const updatedQuery = convertKeyValuesToQueryString(updatedKeyValuePairs);
+
+            return updatedQuery.length ? `?${updatedQuery}` : '';
+        }
+
+        if (keyAndValueExist) {
+            return `${acc}&${key}=${value}`;
+        }
+
+        return acc;
+    }, history.location.search);
+
+/**
+ * Set add key value pairs to url
+ * @param {Object} variable Object with key value pairs to be added to url
+ * @param {Object} variable location object from react-router
+ * @param {Object} variable react router history object
+ * @param {Object} variable is url flush required
+ * @namespace ../../utils/Url/setQueryParams
+ */
+export const setQueryParams = (keyValueObject: Record<string, string>, location: Location, history: History): void => {
+    const { state } = location;
+    const query = generateQuery(keyValueObject, location, history);
+
+    history.push({ search: query } as any);
+};
+
+/**
+ * Remove all queries except default sort options from url
+ * @param {Object} variable react router history object
+ * @namespace ../../utils/Url/clearQueriesFromUrl
+ */
+export const clearQueriesFromUrl = (history: History): void => {
+    history.push({ search: '' });
+};
+
+/**
+ * Convert object with key value pairs to url query string
+ * @param {Object} keyValuePairs object with key value pairs
+ * @return {String} Converted query string
+ * @namespace ../../utils/Url/objectToUri
+ */
+export const objectToUri = (keyValueObject: Record<string, string> = {}): string => {
+    const paramString = Object.entries(keyValueObject).sort()
+        .reduce((acc, [key, value]) => `${acc}&${key}=${value}`, '')
+        .replace('&', '');
+
+    return paramString.length > 0 ? `?${paramString}` : '';
+};
+
+/** @namespace ../../utils/Url/isHomePageUrl */
+export const isHomePageUrl = (pathname: string): boolean => {
+    const isHomePage = pathname === appendWithStoreCode('/')
+        || pathname === '/'
+        || pathname === appendWithStoreCode('')
+        || pathname === '';
+
+    return isHomePage;
+};
+
+/** @namespace ../../utils/Url/getUrlPathname */
+export const getUrlPathname = (url: string): string => {
+    try {
+        const { pathname } = new URL(url);
+
+        return pathname;
+    } catch (e) {
+        return url;
+    }
+};

package/app/utils/Url/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 './Url';

package/app/utils/Validator/Config.ts

@@ -0,0 +1,96 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable spaced-comment */
+/**
+ * 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
+ */
+
+export enum ValidationInputTypeText {
+    ALPHA = 'alpha',
+    ALPHASPACE = 'alphaSpace',
+    ALPHANUMERIC = 'alphaNumeric',
+    ALPHADASH = 'alphaDash',
+    URL = 'url',
+}
+
+export enum ValidationInputTypeNumber {
+    NUMERIC = 'numeric',
+    NUMERICDASH = 'numericDash',
+    INTEGER = 'integer',
+    DECIMAL = 'decimal',
+    NATURAL = 'natural',
+    NATURALNOZERO = 'naturalNoZero',
+}
+
+export enum ValidationInputTypeInput {
+    EMAIL = 'email',
+    PASSWORD = 'password',
+    DATE = 'date',
+    PHONE = 'phone',
+    EMAILLIST = 'emailList',
+}
+
+export const ValidationInputType = {
+    ...ValidationInputTypeInput,
+    ...ValidationInputTypeNumber,
+    ...ValidationInputTypeText,
+};
+
+export const VALIDATION_MESSAGES = {
+    //#region VALIDATION RULE MSG
+    isRequired: __('This field is required!'),
+    match: __('Incorrect input!'),
+    range: __('Value is out of range!'), // Range values are also in Validator.js as they require args
+    group: __('Field contains issues!'),
+    fileExtension: __('Incorrect File extension upload!'),
+    //#endregion
+
+    //#region VALIDATION RULE MSG
+    [ValidationInputType.ALPHA]: __('Incorrect input! Only letters allowed!'),
+    [ValidationInputType.ALPHASPACE]: __('Incorrect input! Only words allowed!'),
+    [ValidationInputType.ALPHANUMERIC]: __('Incorrect input! Alpha-Numeric value required!'),
+    [ValidationInputType.ALPHADASH]: __('Incorrect input! Alpha-Dash value required!'),
+    [ValidationInputType.URL]: __('Incorrect input! URL required!'),
+    [ValidationInputType.NUMERIC]: __('Incorrect input! Numeric value required!'),
+    [ValidationInputType.NUMERICDASH]: __('Incorrect input! Numeric-Dash value required!'),
+    [ValidationInputType.INTEGER]: __('Incorrect input! Integer required!'),
+    [ValidationInputType.NATURAL]: __('Incorrect input! Natural number required!'),
+    [ValidationInputType.NATURALNOZERO]: __('Incorrect input!'),
+    [ValidationInputType.EMAIL]: __('Incorrect email format!'),
+    [ValidationInputType.EMAILLIST]: __('Incorrect list of emails!'),
+    [ValidationInputType.DATE]: __('Incorrect date input!'),
+    [ValidationInputType.PASSWORD]: __('Incorrect password input!'),
+    [ValidationInputType.PHONE]: __('Incorrect phone input!'),
+    //#endregion
+};
+
+export const VALIDATION_RULES = {
+    // Text
+    [ValidationInputType.ALPHA]: /^[a-z]+$/i,
+    [ValidationInputType.ALPHASPACE]: /^[a-z\s]+$/i,
+    [ValidationInputType.ALPHANUMERIC]: /^[a-z0-9]+$/i,
+    [ValidationInputType.ALPHADASH]: /^[a-z0-9_\\-]+$/i,
+    [ValidationInputType.URL]: /^((http|https):\/\/(\w+:{0,1}\w*@)?(\S+)|)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\\/]))?$/,
+
+    // Numbers
+    [ValidationInputType.NUMERIC]: /^[0-9]+$/,
+    [ValidationInputType.NUMERICDASH]: /^[\d\-\s]+$/,
+    [ValidationInputType.INTEGER]: /^\\-?[0-9]+$/,
+    [ValidationInputType.DECIMAL]: /^\\-?[0-9]*\.?[0-9]+$/,
+    [ValidationInputType.NATURAL]: /^[0-9]+$/i,
+    [ValidationInputType.NATURALNOZERO]: /^[1-9][0-9]*$/i,
+
+    // Inputs
+    // eslint-disable-next-line max-len
+    [ValidationInputType.EMAIL]: /^(([^<>()\\[\]\\.,;:\s@"]+(\.[^<>()\\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z0-9]{2,}))$/,
+    [ValidationInputType.DATE]: /\d{4}-\d{1,2}-\d{1,2}/,
+    [ValidationInputType.PHONE]: /^[\\+]?[(]?[0-9]{3}[)]?[-\s\\.]?[0-9]{3}[-\s\\.]?[0-9]{4,6}$/im,
+    // eslint-disable-next-line max-len
+    [ValidationInputType.EMAILLIST]: /^(([a-zA-Z0-9_\\-\\.]+)@([a-zA-Z0-9_\\-\\.]+)\.([a-zA-Z]{2,5}){1,25})+([,\s]+(([a-zA-Z0-9_\\-\\.]+)@([a-zA-Z0-9_\\-\\.]+)\.([a-zA-Z]{2,5}){1,25})+)*$/,
+};

package/app/utils/Validator/Validator.ts

@@ -0,0 +1,268 @@
+/* eslint-disable spaced-comment */
+/**
+ * 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 { FieldType } from 'Component/Field/Field.config';
+import {
+    VALIDATION_MESSAGES,
+    VALIDATION_RULES,
+    ValidationInputTypeNumber,
+} from '../../utils/Validator/Config';
+
+import {
+    ValidationDOMOutput,
+    ValidationOutput,
+    ValidationRule,
+} from './Validator.type';
+
+/**
+ * Validates parameter based on rules
+ * @param value
+ * @param rule
+ * @returns {boolean|{errorMessages: *[], value}}
+ * @namespace ../../utils/Validator/validate
+ */
+export const validate = (value: string | boolean, rule: ValidationRule): boolean | ValidationOutput => {
+    const {
+        isRequired,
+        inputType,
+        match,
+        range,
+        fileExtension,
+        customErrorMessages: {
+            onRequirementFail,
+            onInputTypeFail,
+            onMatchFail,
+            onRangeFailMin,
+            onRangeFailMax,
+            onExtensionFail,
+        } = {},
+    } = rule;
+
+    const output: ValidationOutput = {
+        value,
+        errorMessages: [],
+    };
+
+    //#region IS REQUIRED
+    if (isRequired && !value) {
+        output.errorMessages.push(onRequirementFail || VALIDATION_MESSAGES.isRequired);
+    }
+    //#endregion
+
+    //#region INPUT TYPE
+    if (inputType && value && !(value as string).match(
+        VALIDATION_RULES[inputType as keyof typeof VALIDATION_RULES],
+    )) {
+        output.errorMessages.push(
+            onInputTypeFail || VALIDATION_MESSAGES[inputType as keyof typeof VALIDATION_MESSAGES],
+        );
+    }
+    //#endregion
+
+    //#region MATCH
+    if (typeof match === 'function') {
+        const response = match(value as string);
+
+        if (response !== true) {
+            output.errorMessages.push(response === false ? onMatchFail || VALIDATION_MESSAGES.match : response);
+        }
+    } else if (match && !(value as string).match(match)) {
+        output.errorMessages.push(onMatchFail || VALIDATION_MESSAGES.match);
+    }
+    //#endregion
+
+    //#region RANGE
+    if (range) {
+        const { min, max, showLengthError } = range;
+        const isNumber = !!(inputType && (<any>Object).values(ValidationInputTypeNumber).includes(inputType));
+
+        if (isNumber) {
+            if (min && +value < min) {
+                output.errorMessages.push(onRangeFailMin || __('Minimal value is %s!', min));
+            }
+
+            if (max && +value > max) {
+                output.errorMessages.push(onRangeFailMax || __('Maximum value is %s!', max));
+            }
+        } else {
+            if (min && (value as string).length < min && (value as string).length > 0) {
+                output.errorMessages.push(onRangeFailMin || __('Minimum %s characters!', min));
+            }
+
+            if (max && (value as string).length > max) {
+                const tooMany = (value as string).length - max;
+
+                output.errorMessages.push(onRangeFailMax || __('Maximum %s characters (%s too many)', max, tooMany));
+
+                if (showLengthError) {
+                    output.errorMessages.unshift(__('Please enter no more than %s characters.', max));
+                }
+            }
+        }
+    }
+
+    if (fileExtension && value !== '') {
+        const { accept } = fileExtension;
+        const acceptedExtensions = accept.split(', ');
+        const currentFileExtension = (value as string).split('.').pop() as string;
+
+        if (!acceptedExtensions.includes(currentFileExtension)) {
+            output.errorMessages.push(onExtensionFail || VALIDATION_MESSAGES.fileExtension);
+        }
+    }
+    //#endregion
+
+    const { errorMessages } = output;
+
+    return errorMessages.length === 0 ? true : output;
+};
+
+/**
+ * Validates DOM object check itself and children
+ * @param DOM
+ * @param rule
+ * @returns {boolean|{errorMessages: *[], values: *[], errorFields: *[]}}
+ * @namespace ../../utils/Validator/validateGroup
+ */
+export const validateGroup = (DOM: HTMLElement, rule?: ValidationRule): true | ValidationDOMOutput => {
+    const {
+        selector = 'select, input, textarea, .js-validatabale, form, .FieldGroup',
+    } = rule || {};
+    const fields = DOM.querySelectorAll<HTMLInputElement>(selector);
+
+    const output: ValidationDOMOutput = {
+        values: [],
+        errorFields: [],
+        errorMessages: [],
+    };
+
+    //#region VALIDATE FIELDS
+    fields.forEach((field) => {
+        const {
+            name,
+            value,
+            tagName = FieldType.SELECT,
+            type = FieldType.SELECT,
+        } = field;
+
+        const fieldType = tagName.toLowerCase() === FieldType.TEXTAREA ? FieldType.TEXTAREA : type;
+        const fieldValue = fieldType === FieldType.CHECKBOX || fieldType === FieldType.RADIO ? field.checked : value;
+
+        output.values?.push({ name, value: fieldValue, type: fieldType });
+
+        // Invokes validation event for all fields
+        const data = { errors: [] };
+        const event = new CustomEvent('validate', { detail: data });
+
+        field.dispatchEvent(event);
+        const { errors } = data;
+
+        if (errors.length > 0) {
+            output.errorFields?.push(errors);
+        }
+    });
+    //#endregion
+
+    //#region VALIDATE GROUP
+    if (rule) {
+        const {
+            isRequired,
+            match,
+            customErrorMessages: {
+                onRequirementFail,
+                onMatchFail,
+                onGroupFail,
+            } = {},
+        } = rule;
+
+        if (isRequired) {
+            const containsValue = output.values?.some(({ value, type }) => {
+                if (type === FieldType.CHECKBOX || type === FieldType.RADIO) {
+                    return value;
+                }
+
+                if (typeof value === 'string') {
+                    return value.length > 0;
+                }
+
+                return !!value;
+            });
+
+            if (!containsValue) {
+                output.errorMessages?.push(onRequirementFail || VALIDATION_MESSAGES.isRequired);
+            }
+        }
+
+        if (typeof match === 'function' && !match(output.values)) {
+            output.errorMessages?.push(onMatchFail || VALIDATION_MESSAGES.match);
+        }
+
+        if (output.errorMessages?.length === 0 && (output.errorFields?.length || 0) > 0) {
+            output.errorMessages?.push(onGroupFail || VALIDATION_MESSAGES.group);
+        }
+    }
+    //#endregion
+    const { errorMessages, errorFields } = output;
+
+    return !errorMessages?.length && !errorFields?.length ? true : output;
+};
+
+/**
+ * Get number of different character classes
+ * @param {String} value
+ * @return {Number}
+ * @namespace ../../utils/Validator/getNumberOfCharacterClasses
+ */
+export const getNumberOfCharacterClasses = (value: string): number => Number(/\d+/.test(value))
+      + Number(/[a-z]+/.test(value))
+      + Number(/[A-Z]+/.test(value))
+      + Number(/[^a-zA-Z0-9]+/.test(value));
+
+export default validate;
+
+/**
+ * Validates password
+ * @param {String} value
+ * @param {{min: {Number|Object}, max: {Number|Object}}} range
+ * @param {String} minCharacter
+ * @returns {String|Boolean}
+ * @namespace ../../utils/Validator/validatePassword
+ */
+export const validatePassword = (
+    value: string,
+    range: ValidationRule['range'],
+    minCharacter: string,
+): string | boolean => {
+    if (value.length === 0 || !range) {
+        return true;
+    }
+
+    if (range.min && value.length < range.min) {
+        return __('Minimum %s characters!', range.min);
+    }
+
+    if (range.max && value.length > range.max) {
+        return __('Maximum %s characters!', range.max);
+    }
+
+    const counter = getNumberOfCharacterClasses(value);
+
+    if (counter < Number(minCharacter)) {
+        return __(
+            'Minimum of different classes of characters in password is %s. ',
+            minCharacter,
+        )
+            + __('Classes of characters: Lower Case, Upper Case, Digits, Special Characters.');
+    }
+
+    return true;
+};