@riosst100/pwa-marketplace 1.0.7 → 1.0.8

package/package.json

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

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}
             />

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/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
+    };
+};