@riosst100/pwa-marketplace 1.1.7 → 1.1.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@riosst100/pwa-marketplace",
   "author": "riosst100@gmail.com",
-  "version": "1.1.7",
+  "version": "1.1.9",
   "main": "src/index.js",
   "pwa-studio": {
     "targets": {
@@ -9,7 +9,8 @@
     }
   },
   "dependencies": {
-    "axios": "^1.6.5"
+    "axios": "^1.6.5",
+    "react-phone-number-input": "^3.3.9"
   },
   "license": "MIT",
   "private": false

package/src/components/BecomeSeller/becomeSeller.js

@@ -24,6 +24,7 @@ import Region from '@magento/venia-ui/lib/components/Region';
 import Postcode from '@magento/venia-ui/lib/components/Postcode';
 import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
 import { Link } from 'react-router-dom';
+import PhoneInput from '@riosst100/pwa-marketplace/src/components/PhoneInput';
 
 const BecomeSeller = props => {
     const talonProps = useBecomeSeller({
@@ -273,7 +274,7 @@ const BecomeSeller = props => {
                     defaultMessage: 'Contact Number'
                 })}
             >
-                <TextInput
+                <PhoneInput
                     id="contactNumber"
                     field="seller.contact_number"
                     validate={isRequired}

package/src/components/PhoneInput/index.js

@@ -0,0 +1 @@
+export { default } from './phoneInput';

package/src/components/PhoneInput/phoneInput.js

@@ -0,0 +1,52 @@
+import React, { Fragment, useState } from 'react';
+import { node, shape, string } from 'prop-types';
+import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import { FieldIcons, Message } from '@magento/venia-ui/lib/components/Field';
+import defaultClasses from './phoneInput.module.css';
+import {PhoneInput as ReactPhoneInput} from 'react-phone-number-input'
+
+const PhoneInput = props => {
+    const {
+        after,
+        before,
+        classes: propClasses,
+        regionError,
+        field,
+        message,
+        ...rest
+    } = props;
+    const fieldState = useFieldState(field);
+    const classes = useStyle(defaultClasses, propClasses);
+    var inputClass =
+        fieldState.error || regionError ? classes.input_error : classes.input;
+
+    const [value, setValue] = useState('');
+
+    return (
+        <Fragment>
+            <FieldIcons after={after} before={before}>
+                <ReactPhoneInput
+                international
+                countryCallingCodeEditable={false}
+                defaultCountry="ID"
+                value={value}
+                onChange={setValue}/>
+            </FieldIcons>
+            <Message fieldState={fieldState}>{message}</Message>
+        </Fragment>
+    );
+};
+
+export default PhoneInput;
+
+PhoneInput.propTypes = {
+    after: node,
+    before: node,
+    classes: shape({
+        input: string
+    }),
+    field: string.isRequired,
+    message: node
+};

package/src/components/PhoneInput/phoneInput.module.css

@@ -0,0 +1,21 @@
+.input {
+    composes: input from '@magento/venia-ui/lib/components/Field/field.module.css';
+
+    composes: disabled_text-subtle from global;
+}
+
+.input_error {
+    composes: input from '@magento/venia-ui/lib/components/Field/field.module.css';
+
+    composes: border-error from global;
+}
+
+.input_shimmer {
+    composes: h-[2.5rem] from global;
+    composes: m-0 from global;
+    composes: max-w-full from global;
+    composes: rounded-md from global;
+    composes: w-full from global;
+    font-size: 1rem;
+    padding: calc(0.375rem - 1px) calc(0.625rem - 1px);
+}

package/src/components/InputCountryCode/index.js

@@ -1 +0,0 @@
-export { default } from './inputCountryCode';

package/src/components/InputCountryCode/inputCountryCode.js

@@ -1,94 +0,0 @@
-import React, { Fragment } from 'react';
-import { useIntl } from 'react-intl';
-import { Minus as MinusIcon, Plus as PlusIcon } from 'react-feather';
-import { useInputCountryCode } from '@riosst100/pwa-marketplace/src/talons/InputCountryCode/useInputCountryCode';
-
-import { useStyle } from '../../classify';
-import Icon from '../Icon';
-import TextInput from '../TextInput';
-import { Message } from '../Field';
-import defaultClasses from './inputCountryCode.module.css';
-
-const InputCountryCode = props => {
-    const { initialValue, itemId, label, min, onChange, message } = props;
-    const { formatMessage } = useIntl();
-    const classes = useStyle(defaultClasses, props.classes);
-    const iconClasses = { root: classes.icon };
-
-    const talonProps = useInputCountryCode({
-        initialValue,
-        min,
-        onChange
-    });
-
-    const {
-        isDecrementDisabled,
-        isIncrementDisabled,
-        handleBlur,
-        handleDecrement,
-        handleIncrement,
-        maskInput
-    } = talonProps;
-
-    const errorMessage = message ? <Message>{message}</Message> : null;
-
-    return (
-        <Fragment>
-            <div className={classes.root}>
-                <label className={classes.label} htmlFor={itemId}>
-                    {label}
-                </label>
-                <button
-                    aria-label={formatMessage({
-                        id: 'quantity.buttonDecrement',
-                        defaultMessage: 'Decrease Quantity'
-                    })}
-                    className={classes.button_decrement}
-                    disabled={isDecrementDisabled}
-                    onClick={handleDecrement}
-                    type="button"
-                    data-cy="Quantity-decrementButton"
-                >
-                    <Icon classes={iconClasses} src={MinusIcon} size={22} />
-                </button>
-                <TextInput
-                    aria-label={formatMessage({
-                        id: 'quantity.input',
-                        defaultMessage: 'Item Quantity'
-                    })}
-                    data-cy="QuantityStepper-input"
-                    classes={{ input: classes.input }}
-                    field="quantity"
-                    id={itemId}
-                    inputMode="numeric"
-                    mask={maskInput}
-                    min={min}
-                    onBlur={handleBlur}
-                    pattern="[0-9]*"
-                />
-                <button
-                    aria-label={formatMessage({
-                        id: 'quantity.buttonIncrement',
-                        defaultMessage: 'Increase Quantity'
-                    })}
-                    className={classes.button_increment}
-                    disabled={isIncrementDisabled}
-                    onClick={handleIncrement}
-                    type="button"
-                    data-cy="Quantity-incrementButton"
-                >
-                    <Icon classes={iconClasses} src={PlusIcon} size={20} />
-                </button>
-            </div>
-            {errorMessage}
-        </Fragment>
-    );
-};
-
-InputCountryCode.defaultProps = {
-    min: 0,
-    initialValue: 1,
-    onChange: () => {}
-};
-
-export default InputCountryCode;

package/src/talons/InputCountryCode/useInputCountryCode.js

@@ -1,120 +0,0 @@
-import { useCallback, useMemo, useState, useEffect } from 'react';
-import { useFieldApi } from 'informed';
-import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
-import debounce from 'lodash.debounce';
-
-/**
- * This talon contains logic for a product quantity UI component.
- * It performs effects and returns prop data for rendering a component that lets you
- * modify the quantity of a cart item.
- *
- * This talon performs the following effects:
- *
- * - Updates the state of the quantity field when the initial value changes
- *
- * @function
- *
- * @param {Object} props
- * @param {number} props.initialValue the initial quantity value
- * @param {number} props.min the minimum allowed quantity value
- * @param {function} props.onChange change handler to invoke when quantity value changes
- *
- * @returns {QuantityTalonProps}
- *
- */
-export const useInputCountryCode = props => {
-    const { initialValue, min, onChange } = props;
-
-    const [prevQuantity, setPrevQuantity] = useState(initialValue);
-
-    const quantityFieldApi = useFieldApi('quantity');
-    const { value: quantity } = useFieldState('quantity');
-
-    const isIncrementDisabled = useMemo(() => !quantity, [quantity]);
-
-    // "min: 0" lets a user delete the value and enter a new one, but "1" is
-    // actually the minimum value we allow to be set through decrement button.
-    const isDecrementDisabled = useMemo(() => !quantity || quantity <= 1, [
-        quantity
-    ]);
-
-    // Fire the onChange after some wait time. We calculate the current delay
-    // as enough time for a user to spam inc/dec quantity but not enough time
-    // for a user to click inc/dec on Product A and then click Product B.
-    const debouncedOnChange = useMemo(
-        () =>
-            debounce(val => {
-                setPrevQuantity(val);
-                onChange(val);
-            }, 350),
-        [onChange]
-    );
-
-    const handleDecrement = useCallback(() => {
-        const newQuantity = quantity - 1;
-        quantityFieldApi.setValue(newQuantity);
-        debouncedOnChange(newQuantity);
-    }, [debouncedOnChange, quantity, quantityFieldApi]);
-
-    const handleIncrement = useCallback(() => {
-        const newQuantity = quantity + 1;
-        quantityFieldApi.setValue(newQuantity);
-        debouncedOnChange(newQuantity);
-    }, [debouncedOnChange, quantity, quantityFieldApi]);
-
-    const handleBlur = useCallback(() => {
-        // Only submit the value change if it has changed.
-        if (typeof quantity === 'number' && quantity != prevQuantity) {
-            debouncedOnChange(quantity);
-        }
-    }, [debouncedOnChange, prevQuantity, quantity]);
-
-    const maskInput = useCallback(
-        value => {
-            try {
-                // For some storefronts decimal values are allowed.
-                const nextVal = parseFloat(value);
-                if (value && isNaN(nextVal))
-                    throw new Error(`${value} is not a number.`);
-                if (nextVal < min) return min;
-                else return nextVal;
-            } catch (err) {
-                console.error(err);
-                return prevQuantity;
-            }
-        },
-        [min, prevQuantity]
-    );
-
-    /**
-     * Everytime initialValue changes, update the quantity field state.
-     */
-    useEffect(() => {
-        quantityFieldApi.setValue(initialValue);
-    }, [initialValue, quantityFieldApi]);
-
-    return {
-        isDecrementDisabled,
-        isIncrementDisabled,
-        handleBlur,
-        handleDecrement,
-        handleIncrement,
-        maskInput
-    };
-};
-
-/** JSDoc type definitions */
-
-/**
- * Object type returned by the {@link useInputCountryCode} talon.
- * It provides props data for a quantity UI component.
- *
- * @typedef {Object} QuantityTalonProps
- *
- * @property {boolean} isDecrementDisabled True if decrementing should be disabled
- * @property {boolean} isIncrementDisabled True if incrementing should be disabled
- * @property {function} handleBlur Callback function for handling a blur event on a component
- * @property {function} handleDecrement Callback function for handling a quantity decrement event
- * @property {function} handleIncrement Callback function for handling an increment event
- * @property {function} maskInput Function for masking a value when decimal values are allowed
- */