@riosst100/pwa-marketplace 1.0.5 → 1.0.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@riosst100/pwa-marketplace",
   "author": "riosst100@gmail.com",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "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

@@ -22,6 +22,8 @@ import GoogleRecaptcha from '@magento/venia-ui/lib/components/GoogleReCaptcha';
 import Country from '@magento/venia-ui/lib/components/Country';
 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';
 
 const BecomeSeller = props => {
     const talonProps = useBecomeSeller({
@@ -257,6 +259,7 @@ const BecomeSeller = props => {
                     id: 'global.region',
                     defaultMessage: 'Region'
                 })}
+                translationId="global.region"
                 countryCodeField="seller.country_id"
                 validate={isRequired}
             />
@@ -286,10 +289,23 @@ const BecomeSeller = props => {
                     field="become_seller_agreement"
                     id="becomeSellerAgreement"
                     validate={isRequired}
-                    label={formatMessage({
-                        id: 'becomeSeller.becomeSellerAgreementText',
-                        defaultMessage: 'I agree the Terms and Condition (Terms and Conditions)'
-                    })}
+                    label={(
+                        <>
+                            {formatMessage({
+                                id: 'becomeSeller.becomeSellerAgreementText',
+                                defaultMessage: 'I agree the Terms and Condition'
+                            })} <span>
+                                (<a href={'/seller-term-conditions'}>
+                                    <u>
+                                        {formatMessage({
+                                            id: 'becomeSellerPage.termConditions',
+                                            defaultMessage: 'Terms and Conditions'
+                                        })}
+                                    </u>
+                                </a>)
+                            </span>
+                        </>
+                    )}
                 />
             </div>
             <GoogleRecaptcha {...recaptchaWidgetProps} />

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/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
+ */