@riosst100/pwa-marketplace 1.0.6 → 1.0.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@riosst100/pwa-marketplace",
   "author": "riosst100@gmail.com",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "main": "src/index.js",
   "pwa-studio": {
     "targets": {

package/src/componentOverrideMapping.js

@@ -7,6 +7,7 @@ module.exports = componentOverrideMapping = {
     [`@magento/peregrine/lib/talons/Adapter/useAdapter.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/Adapter/useAdapter.js',
     [`@magento/peregrine/lib/talons/Header/useStoreSwitcher.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/Header/useStoreSwitcher.js',
     [`@magento/peregrine/lib/talons/Header/storeSwitcher.gql.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/Header/storeSwitcher.gql.js',
+    [`@magento/peregrine/lib/talons/Region/useRegion.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/Region/useRegion.js',
     [`@magento/pwa-buildpack/lib/queries/getAvailableStoresConfigData.graphql`]: '@riosst100/pwa-marketplace/src/overwrites/pwa-buildpack/lib/queries/getAvailableStoresConfigData.graphql',
     [`@magento/peregrine/lib/store/actions/user/asyncActions.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/store/actions/user/asyncActions.js',
     [`@magento/peregrine/lib/talons/SignIn/signIn.gql.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/SignIn/signIn.gql.js',

package/src/components/BecomeSeller/becomeSeller.js

@@ -19,7 +19,7 @@ import TextInput from '@magento/venia-ui/lib/components/TextInput';
 import defaultClasses from './becomeSeller.module.css';
 import FormError from '@magento/venia-ui/lib/components/FormError';
 import GoogleRecaptcha from '@magento/venia-ui/lib/components/GoogleReCaptcha';
-import Country from '@magento/venia-ui/lib/components/Country';
+import SellerCountry from '@riosst100/pwa-marketplace/src/components/SellerCountry';
 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';
@@ -193,7 +193,7 @@ const BecomeSeller = props => {
                     })}
                 />
             </Field>
-            <Country
+            <SellerCountry
                 field="seller.country_id"
                 validate={isRequired}
             />
@@ -259,6 +259,7 @@ const BecomeSeller = props => {
                     id: 'global.region',
                     defaultMessage: 'Region'
                 })}
+                translationId="global.region"
                 countryCodeField="seller.country_id"
                 validate={isRequired}
             />

package/src/components/BecomeSellerLink/becomeSellerLink.js

@@ -17,7 +17,7 @@ const BecomeSellerLink = props => {
 
     return isSeller ? (
         <div className={classes.root} data-cy="BecomeSellerLink-root">
-            <a href="https://seller-local.tcgcollective.co/lofmarketplace/seller/login/">
+            <a href={process.env.MAGENTO_BACKEND_URL + "/lofmarketplace/seller/login"}>
                 {formatMessage({
                     id: 'sellerDashboard.title',
                     defaultMessage: 'Seller Dashboard'

package/src/components/SellerAccountPage/sellerAccountPage.js

@@ -70,9 +70,7 @@ const SellerAccountPage = props => {
                         </span>
                     </div>
                     <div className={classes.editButtonContainer}>
-                        <a href="https://seller-local.tcgcollective.co/lofmarketplace/seller/login/"
-                            className={classes.editInformationButton}
-                        >
+                        <a href={process.env.MAGENTO_BACKEND_URL + "/lofmarketplace/seller/login"} className={classes.editInformationButton}>
                             <FormattedMessage
                                 id={'global.sellerDashboardText'}
                                 defaultMessage={'Seller Dashboard'}

package/src/components/SellerCountry/index.js

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

package/src/components/SellerCountry/sellerCountry.gql.js

@@ -0,0 +1,11 @@
+import { gql } from '@apollo/client';
+
+export const GET_SELLER_COUNTRIES_QUERY = gql`
+    query GetSellerCountries {
+        sellerCountries {
+            id
+            full_name_english
+            two_letter_abbreviation
+        }
+    }
+`;

package/src/components/SellerCountry/sellerCountry.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { func, shape, string } from 'prop-types';
+import { useSellerCountry } from '@riosst100/pwa-marketplace/src/talons/SellerCountry/useSellerCountry';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Field from '@magento/venia-ui/lib/components/Field';
+import Select from '@magento/venia-ui/lib/components/Select';
+import defaultClasses from './sellerCountry.module.css';
+import { GET_SELLER_COUNTRIES_QUERY } from './sellerCountry.gql';
+
+const SellerCountry = props => {
+    const talonProps = useSellerCountry({
+        queries: {
+            getSellerCountriesQuery: GET_SELLER_COUNTRIES_QUERY
+        }
+    });
+    const { countries, loading } = talonProps;
+    const {
+        classes: propClasses,
+        field,
+        label,
+        translationId,
+        ...inputProps
+    } = props;
+    const { formatMessage } = useIntl();
+
+    const classes = useStyle(defaultClasses, propClasses);
+    const selectProps = {
+        classes,
+        disabled: loading,
+        field,
+        items: countries,
+        ...inputProps
+    };
+
+    return (
+        <Field
+            id={classes.root}
+            label={formatMessage({ id: translationId, defaultMessage: label })}
+            classes={{ root: classes.root }}
+        >
+            <Select {...selectProps} id={classes.root} />
+        </Field>
+    );
+};
+
+export default SellerCountry;
+
+SellerCountry.defaultProps = {
+    field: 'country',
+    label: 'Country',
+    translationId: 'country.label'
+};
+
+SellerCountry.propTypes = {
+    classes: shape({
+        root: string
+    }),
+    field: string,
+    label: string,
+    translationId: string,
+    validate: func,
+    initialValue: string
+};

package/src/components/SellerCountry/sellerCountry.module.css

@@ -0,0 +1,3 @@
+.root {
+    grid-area: country;
+}

package/src/overwrites/peregrine/lib/talons/Region/useRegion.js

@@ -0,0 +1,102 @@
+import { useEffect, useRef } from 'react';
+import { useQuery } from '@apollo/client';
+import { useFieldApi } from 'informed';
+import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
+
+/**
+ * The useRegion talon handles logic for:
+ *
+ *  * Resetting the region field value when the country changes.
+ *  * Querying for available regions for a country and rendering them.
+ *
+ * @param {Object} props
+ * @param {string} props.countryCodeField
+ * @param {string} props.fieldInput - the reference field path for free form text input Defaults to "region".
+ * @param {string} props.fieldSelect - the reference field path for selectable list of regions. Defaults to "region".
+ * @param {string} props.optionValueKey - the key used to get the value for the field. Defaults to "code"
+ * @param {GraphQLAST} props.queries.getRegionsQuery - query to fetch regions for a country.
+ *
+ * @return {RegionTalonProps}
+ */
+export const useRegion = props => {
+    const {
+        countryCodeField = 'country',
+        fieldInput = 'region',
+        fieldSelect = 'region',
+        optionValueKey = 'code',
+        queries: { getRegionsQuery }
+    } = props;
+
+    const hasInitialized = useRef(false);
+    const countryFieldState = useFieldState(countryCodeField);
+    const { value: country } = countryFieldState;
+
+    const regionInputFieldApi = useFieldApi(fieldInput);
+    const regionSelectFieldApi = useFieldApi(fieldSelect);
+
+    const { data, loading } = useQuery(getRegionsQuery, {
+        variables: { countryCode: country },
+        skip: !country
+    });
+
+    // Reset region value when country changes. Because of how Informed sets
+    // initialValues, we want to skip the first state change of the value being
+    // initialized.
+    useEffect(() => {
+        if (country && !loading) {
+            if (hasInitialized.current) {
+                regionInputFieldApi.exists() && regionInputFieldApi.setValue();
+                regionSelectFieldApi.exists() &&
+                    regionSelectFieldApi.setValue();
+            } else {
+                hasInitialized.current = true;
+            }
+        }
+    }, [country, regionInputFieldApi, regionSelectFieldApi, loading]);
+
+    let formattedRegionsData = [{ label: 'Loading Regions...', value: '' }];
+    if (data) {
+        const { country } = data;
+        const { available_regions: availableRegions } = country;
+        if (availableRegions) {
+            formattedRegionsData = availableRegions.map(region => ({
+                key: region.id,
+                label: region.name,
+                value: region[optionValueKey]
+            }));
+            formattedRegionsData.unshift({
+                disabled: true,
+                hidden: true,
+                label: '',
+                value: ''
+            });
+        } else {
+            formattedRegionsData = [];
+        }
+    } else if (!loading) {
+        formattedRegionsData = [];
+    }
+
+    return {
+        loading,
+        regions: formattedRegionsData
+    };
+};
+
+/** JSDocs type definitions */
+
+/**
+ * @typedef {Object} RegionTalonProps
+ *
+ * @property {boolean} loading whether the regions are loading
+ * @property {Array<Region>} regions array of formatted regions for the country
+ *
+ */
+
+/**
+ * @typedef {Object} Region
+ *
+ * @property {number} key the id of the region
+ * @property {String} label the label of the region
+ * @property {String} value the value of the region
+ */

package/src/talons/SellerCountry/useSellerCountry.js

@@ -0,0 +1,25 @@
+import { useQuery } from '@apollo/client';
+
+export const useSellerCountry = props => {
+    const {
+        queries: { getSellerCountriesQuery }
+    } = props;
+
+    const { data, error, loading } = useQuery(getSellerCountriesQuery);
+
+    let formattedCountriesData = [{ label: 'Loading Countries...', value: '' }];
+    if (!loading && !error) {
+        const { sellerCountries } = data;
+        formattedCountriesData = sellerCountries.map(country => ({
+            // If a country is missing the full english name just show the abbreviation.
+            label: country.full_name_english || country.two_letter_abbreviation,
+            value: country.two_letter_abbreviation
+        }));
+        formattedCountriesData.sort((a, b) => (a.label < b.label ? -1 : 1));
+    }
+
+    return {
+        countries: formattedCountriesData,
+        loading
+    };
+};