@riosst100/pwa-marketplace 1.8.9 → 1.9.1

package/src/overwrites/venia-ui/lib/components/Select/index.js

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

package/src/overwrites/venia-ui/lib/components/Select/option.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { bool, shape, string } from 'prop-types';
+
+const Option = props => {
+    const { disabled, item } = props;
+    const { label, value } = item;
+    const text = label != null ? label : value;
+
+    return (
+        <option value={value} disabled={disabled}>
+            {text}
+        </option>
+    );
+};
+
+Option.propTypes = {
+    disabled: bool,
+    item: shape({
+        label: string,
+        value: string.isRequired
+    }).isRequired
+};
+
+Option.defaultProps = {
+    disabled: false
+};
+
+export default Option;

package/src/overwrites/venia-ui/lib/components/Select/select.js

@@ -0,0 +1,74 @@
+import React, { Fragment } from 'react';
+import { arrayOf, node, number, oneOfType, shape, string } from 'prop-types';
+import {
+    Option as InformedOption,
+    Select as InformedSelect,
+    useFieldState
+} from 'informed';
+import cn from 'classnames'
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import { FieldIcons, Message } from '@magento/venia-ui/lib/components/Field';
+import defaultClasses from './select.module.css';
+import Icon from '@magento/venia-ui/lib/components/Icon';
+import { ChevronDown as ChevronDownIcon } from 'react-feather';
+
+const arrow = <Icon src={ChevronDownIcon} size={24} />;
+
+const Select = props => {
+    const {
+        before,
+        classes: propClasses,
+        regionError,
+        field,
+        items,
+        message,
+        ...rest
+    } = props;
+    const fieldState = useFieldState(field);
+    const classes = useStyle(defaultClasses, propClasses);
+    const inputClass =
+        fieldState.error || regionError ? classes.input_error : classes.input;
+
+    const options = items.map(
+        ({ disabled = null, hidden = null, label, value, key = value }) => (
+            <InformedOption
+                key={key}
+                disabled={disabled}
+                hidden={hidden}
+                value={value}
+            >
+                {label || (value != null ? value : '')}
+            </InformedOption>
+        )
+    );
+
+    return (
+        <Fragment>
+            <FieldIcons after={arrow} before={before}>
+                <InformedSelect {...rest} className={cn(inputClass, '!border border-gray-100 focus_!shadow-none')} field={field}>
+                    {options}
+                </InformedSelect>
+            </FieldIcons>
+            <Message fieldState={fieldState}>{message}</Message>
+        </Fragment>
+    );
+};
+
+export default Select;
+
+Select.propTypes = {
+    before: node,
+    classes: shape({
+        input: string
+    }),
+    field: string.isRequired,
+    items: arrayOf(
+        shape({
+            key: oneOfType([number, string]),
+            label: string,
+            value: oneOfType([number, string])
+        })
+    ),
+    message: node
+};

package/src/overwrites/venia-ui/lib/components/Select/select.module.css

@@ -0,0 +1,25 @@
+.wrapper {
+    composes: grid-flow-col from global;
+    composes: h-[2.25rem] from global;
+    composes: inline-grid from global;
+    grid-template-areas: 'input icon';
+    grid-template-columns: auto 2.25rem;
+}
+
+.input,
+.input_error {
+    composes: input from '@magento/venia-ui/lib/components/Field/field.module.css';
+    grid-area: input-start / input-start / input-end / icon-end;
+    padding-right: calc(2.25rem - 1px);
+    /* TODO @TW: review */
+
+    composes: disabled_text-subtle from global;
+}
+
+.input {
+    composes: disabled_pointer-events-none from global;
+}
+
+.input_error {
+    composes: border-error from global;
+}

package/src/overwrites/venia-ui/lib/components/SignIn/index.js

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

package/src/overwrites/venia-ui/lib/components/SignIn/signIn.gql.js

@@ -0,0 +1,50 @@
+import { gql } from '@apollo/client';
+import { CartPageFragment } from '@magento/peregrine/lib/talons/CartPage/cartPageFragments.gql.js';
+
+export const GET_CART_DETAILS_QUERY = gql`
+    query GetCartDetailsAfterSignIn($cartId: String!) {
+        cart(cart_id: $cartId) {
+            id
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
+            items {
+                uid
+                # eslint-disable-next-line @graphql-eslint/require-id-when-available
+                product {
+                    uid
+                    name
+                    sku
+                    small_image {
+                        url
+                        label
+                    }
+                    price {
+                        regularPrice {
+                            amount {
+                                value
+                            }
+                        }
+                    }
+                }
+                quantity
+                # eslint-disable-next-line @graphql-eslint/require-id-when-available
+                ... on ConfigurableCartItem {
+                    # eslint-disable-next-line @graphql-eslint/require-id-when-available
+                    configurable_options {
+                        configurable_product_option_uid
+                        option_label
+                        configurable_product_option_value_uid
+                        value_label
+                    }
+                }
+            }
+            prices {
+                grand_total {
+                    value
+                    currency
+                }
+            }
+            ...CartPageFragment
+        }
+    }
+    ${CartPageFragment}
+`;

package/src/overwrites/venia-ui/lib/components/SignIn/signIn.js

@@ -0,0 +1,224 @@
+import React from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { func, shape, string } from 'prop-types';
+import { Form } from 'informed';
+import { useSignIn } from '@magento/peregrine/lib/talons/SignIn/useSignIn';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import { isRequired } from '@magento/venia-ui/lib/util/formValidators';
+import Button from '@magento/venia-ui/lib/components/Button';
+import Field from '@magento/venia-ui/lib/components/Field';
+import TextInput from '@magento/venia-ui/lib/components/TextInput';
+import defaultClasses from './signIn.module.css';
+import { GET_CART_DETAILS_QUERY } from './signIn.gql';
+import LinkButton from '@magento/venia-ui/lib/components/LinkButton';
+import Password from '@magento/venia-ui/lib/components/Password';
+import FormError from '@magento/venia-ui/lib/components/FormError/formError';
+import GoogleRecaptcha from '@magento/venia-ui/lib/components/GoogleReCaptcha';
+import cn from 'classnames';
+import { Link } from 'react-router-dom';
+import SocialLogin from '@riosst100/pwa-marketplace/src/components/SocialLogin';
+
+const SignIn = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+    const {
+        handleTriggerClick,
+        setDefaultUsername,
+        showCreateAccount,
+        showForgotPassword,
+        initialValues,
+        showSocialLogin = true,
+    } = props;
+
+    const { formatMessage } = useIntl();
+    const talonProps = useSignIn({
+        handleTriggerClick,
+        getCartDetailsQuery: GET_CART_DETAILS_QUERY,
+        setDefaultUsername,
+        showCreateAccount,
+        showForgotPassword
+    });
+
+    const {
+        errors,
+        handleCreateAccount,
+        handleEnterKeyPress,
+        signinHandleEnterKeyPress,
+        handleForgotPassword,
+        forgotPasswordHandleEnterKeyPress,
+        handleSubmit,
+        isBusy,
+        setFormApi,
+        recaptchaWidgetProps
+    } = talonProps;
+
+    const forgotPasswordClasses = {
+        root: classes.forgotPasswordButton
+    };
+
+    return (
+        <div data-cy="SignIn-root" className={cn(classes.root, '!p-[30px]')}>
+            <span data-cy="SignIn-title" className={cn(classes.title, 'text-xl font-semibold')}>
+                <FormattedMessage
+                    id={'signIn.signInText'}
+                    defaultMessage={'Sign In'}
+                />
+            </span>
+            <FormError errors={Array.from(errors.values())} />
+            <Form
+                getApi={setFormApi}
+                className={classes.form}
+                onSubmit={handleSubmit}
+                data-cy="SignIn-form"
+                initialValues={initialValues && initialValues}
+            >
+                <Field
+                    id="email"
+                    label={formatMessage({
+                        id: 'signIn.emailAddressText',
+                        defaultMessage: 'Email address'
+                    })}
+                    classes={{
+                        root: "mb-6",
+                        label: "font-normal text-left mb-2 text-[14px] block mb-2"
+                    }}
+                >
+                    <TextInput
+                        id="email"
+                        data-cy="SignIn-email"
+                        autoComplete="email"
+                        field="email"
+                        validate={isRequired}
+                        aria-label={formatMessage({
+                            id: 'global.emailRequired',
+                            defaultMessage: 'Email Required'
+                        })}
+                        placeholder='johndoe@gmail.com'
+                    />
+                </Field>
+                <Password
+                    data-cy="SignIn-password"
+                    fieldName="password"
+                    id="Password"
+                    label={formatMessage({
+                        id: 'signIn.passwordText',
+                        defaultMessage: 'Password'
+                    })}
+                    validate={isRequired}
+                    autoComplete="current-password"
+                    isToggleButtonHidden={false}
+                    aria-label={formatMessage({
+                        id: 'global.passwordRequired',
+                        defaultMessage: 'Password Required'
+                    })}
+                    placeholder={formatMessage({
+                        id: 'signIn.passwordText',
+                        defaultMessage: 'Password'
+                    })}
+                    classes={{
+                        root: "mb-6",
+                    }}
+                />
+                <div className={cn(classes.forgotPasswordButtonContainer, 'mb-6')}>
+                    <LinkButton
+                        // classes={forgotPasswordClasses}
+                        type="button"
+                        onClick={handleForgotPassword}
+                        onKeyDown={forgotPasswordHandleEnterKeyPress}
+                        data-cy="SignIn-forgotPasswordButton"
+                    >
+                        <span className='font-normal text-xs'>
+                            <FormattedMessage
+                                id={'signIn.forgotPasswordText'}
+                                defaultMessage={'Forgot your password?'}
+                            />
+                        </span>
+                    </LinkButton>
+                </div>
+                <GoogleRecaptcha {...recaptchaWidgetProps} />
+                <div className={cn(classes.buttonsContainer, '!flex flex-col gap-y-6')}>
+                    <Button
+                        priority="high"
+                        type="submit"
+                        onKeyDown={signinHandleEnterKeyPress}
+                        data-cy="SignInButton-root_highPriority"
+                        disabled={isBusy}
+                        classes={{
+                            rootClass: '!w-full',
+                            content: 'capitalize font-medium text-[16px]'
+                        }}
+                    >
+                        <FormattedMessage
+                            id={'signIn.signInText'}
+                            defaultMessage={'Sign In'}
+                        />
+                    </Button>
+                    <div className='block text-center'>
+                        <span className='text-xs font-normal'>
+                            <FormattedMessage
+                                id={'signIn.dontHaveAccount'}
+                                defaultMessage={"Don't have an account ? "}
+                            />
+                        </span>
+                        {' '}
+                        <Link
+                            to={'/create-account'}
+                            className='text-xs font-normal text-blue-700 underline'
+                        >
+                            <FormattedMessage
+                                id={'signIn.signUpNow'}
+                                defaultMessage={"Sign up now "}
+                            />
+                        </Link>
+                    </div>
+                    {showSocialLogin ? (
+                        <>
+                            <div className='max-w-[390px] w-full mx-auto'>
+                                <label
+                                    className={cn(
+                                        'relative after_w-full after_h-[1px] after_bg-gray-100 after_block after_absolute after_top-1/2 z-[0]',
+                                        'w-full block'
+                                    )}>
+                                    <span
+                                        className={cn(
+                                            'text-[14px] inline-block font-normal bg-white z-[1] relative px-5',
+                                        )}>
+                                        <FormattedMessage
+                                            id={'signIn.orContinueWith'}
+                                            defaultMessage={"Or continue with"}
+                                        />
+                                    </span>
+                                </label>
+                            </div>
+                            <SocialLogin />
+                        </>
+                    ) : null}
+
+                </div>
+            </Form>
+        </div>
+    );
+};
+
+export default SignIn;
+SignIn.propTypes = {
+    classes: shape({
+        buttonsContainer: string,
+        form: string,
+        forgotPasswordButton: string,
+        forgotPasswordButtonContainer: string,
+        root: string,
+        title: string
+    }),
+    setDefaultUsername: func,
+    showCreateAccount: func,
+    showForgotPassword: func,
+    initialValues: shape({
+        email: string.isRequired
+    })
+};
+SignIn.defaultProps = {
+    setDefaultUsername: () => { },
+    showCreateAccount: () => { },
+    showForgotPassword: () => { }
+};

package/src/overwrites/venia-ui/lib/components/SignIn/signIn.module.css

@@ -0,0 +1,65 @@
+.root {
+    composes: gap-sm from global;
+    composes: grid from global;
+    composes: justify-items-stretch from global;
+}
+
+.forgotPassword {
+    composes: block from global;
+    composes: text-error from global;
+    composes: text-sm from global;
+    composes: underline from global;
+}
+
+.form {
+    composes: grid from global;
+}
+
+.modal {
+    composes: absolute from global;
+    composes: bg-subtle from global;
+    composes: bottom-0 from global;
+    composes: h-full from global;
+    composes: text-center from global;
+    composes: w-full from global;
+
+    /* TODO @TW: review (B6) */
+    /* composes: invisible from global; */
+    visibility: hidden;
+}
+
+.modal_active {
+    composes: modal;
+    composes: opacity-90 from global;
+
+    /* TODO @TW: review (B6) */
+    /* composes: visible from global; */
+    visibility: visible;
+}
+
+.buttonsContainer {
+    composes: gap-sm from global;
+    composes: grid from global;
+    composes: grid-flow-row from global;
+    composes: justify-center from global;
+    composes: w-full from global;
+}
+
+.forgotPasswordButtonContainer {
+    composes: flex from global;
+    composes: items-center from global;
+    composes: justify-center from global;
+    composes: justify-self-start from global;
+    composes: text-center from global;
+}
+
+.forgotPasswordButton {
+    composes: root from '@magento/venia-ui/lib/components/LinkButton/linkButton.module.css';
+
+    composes: p-0 from global;
+}
+
+.title {
+    composes: capitalize from global;
+    composes: text-lg from global;
+}

package/src/overwrites/venia-ui/lib/components/SignInPage/index.js

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

package/src/overwrites/venia-ui/lib/components/SignInPage/signInPage.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { shape, string } from 'prop-types';
+import { FormattedMessage, useIntl } from 'react-intl';
+
+import { useSignInPage } from '@magento/peregrine/lib/talons/SignInPage/useSignInPage';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import { StoreTitle } from '@magento/venia-ui/lib/components/Head';
+import SignIn from '@magento/venia-ui/lib/components/SignIn';
+import cn from 'classnames';
+
+import defaultClasses from './signInPage.module.css';
+
+const SignInPage = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+    const { signInProps } = useSignInPage(props);
+    const { formatMessage } = useIntl();
+
+    return (
+        <div className={cn(classes.root, '!py-[60px]')}>
+            <StoreTitle>
+                {formatMessage({
+                    id: 'signInPage.title',
+                    defaultMessage: 'Sign In'
+                })}
+            </StoreTitle>
+            <div className={cn(classes.contentContainer, 'border border-gray-100 rounded-lg')}>
+                <SignIn {...signInProps} />
+            </div>
+        </div>
+    );
+};
+
+SignInPage.defaultProps = {
+    createAccountPageUrl: '/create-account',
+    forgotPasswordPageUrl: '/forgot-password',
+    signedInRedirectUrl: '/order-history'
+};
+
+SignInPage.propTypes = {
+    classes: shape({
+        root: string,
+        header: string,
+        contentContainer: string
+    }),
+    createAccountPageUrl: string,
+    forgotPasswordPageUrl: string,
+    signedInRedirectUrl: string
+};
+
+export default SignInPage;

package/src/overwrites/venia-ui/lib/components/SignInPage/signInPage.module.css

@@ -0,0 +1,17 @@
+.root {
+    composes: gap-y-md from global;
+    composes: grid from global;
+    composes: justify-center from global;
+    composes: px-0 from global;
+    composes: py-lg from global;
+    composes: text-center from global;
+    grid-template-columns: minmax(auto, 512px);
+}
+
+.header {
+    composes: font-serif from global;
+}
+
+.contentContainer {
+    composes: rounded-lg from global;
+}

package/src/overwrites/venia-ui/lib/components/TextInput/textInput.js

@@ -41,7 +41,7 @@ const TextInput = props => {
             <Message
                 classes={{
                     root: 'text-[12px] font-normal',
-                    root_error: 'text-[12px] font-normal mt-1 text-red-400'
+                    root_error: 'text-[12px] font-normal mt-1 text-red-400 text-left'
                 }}
                 fieldState={fieldState}
             >

package/src/talons/Header/logo.gql.js

@@ -0,0 +1,19 @@
+import { gql } from '@apollo/client';
+
+export const getStoreConfig = gql`
+    query {
+        storeConfig {
+            header_logo_src
+            base_url
+            store_code
+            base_media_url
+            logo_width
+            logo_height
+            logo_alt
+        }
+    }
+`;
+
+export default {
+    getStoreConfig,
+};

package/src/talons/Header/useLogo.js

@@ -0,0 +1,19 @@
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import DEFAULT_OPERATIONS from './logo.gql';
+import { useQuery } from '@apollo/client';
+
+export const useLogo = props => {
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, null);
+    const { getStoreConfig } = operations;
+    const { data, loading, error } = useQuery(getStoreConfig, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
+    return {
+        error,
+        data,
+        loading
+    };
+};

package/src/talons/ShopBy/shopBy.gql.js

@@ -12,8 +12,8 @@ export const GET_STORE_CONFIG_DATA = gql`
 `;
 
 export const GET_SHOP_BY_DATA_QUERY = gql`
-    query getShopByData($categoryUrlKey: String!, $attributeCode: String, $filters: ProductAttributeFilterInput!) {
-        shopByData(categoryUrlKey: $categoryUrlKey, attributeCode: $attributeCode, filters: $filters) {
+    query getShopByData($activeFilter: String, $categoryUrlKey: String!, $attributeCode: String, $filters: ProductAttributeFilterInput!) {
+        shopByData(activeFilter: $activeFilter, categoryUrlKey: $categoryUrlKey, attributeCode: $attributeCode, filters: $filters) {
             label
             count
             attribute_code

package/src/talons/ShopBy/useShopBy.js

@@ -8,7 +8,7 @@ import { getFilterInput, getFiltersFromSearch } from '@magento/peregrine/lib/tal
 
 export const useShopBy = props => {
 
-    const { searchQuery, active, setActive, currentSort, categoryId, shopby } = props
+    const { searchQuery, activeFilter, active, setActive, currentSort, categoryId, shopby } = props
 
     const { value: sortby } = currentSort
 
@@ -58,14 +58,10 @@ export const useShopBy = props => {
 
     const filters = getFiltersFromSearch(search);
 
-    // console.log(search)
-
     // Construct the filter arg object.
     const newFilters = {};
     filters.forEach((values, key) => {
         newFilters[key] = getFilterInput(values, filterTypeMap.get(key));
-// console.log(key)
-// console.log(values)
         
         if (key == "sc_baseball_release") {
             for(let item of values) {
@@ -96,11 +92,16 @@ export const useShopBy = props => {
             variables: {
                 filters: newFilters,
                 categoryUrlKey: categoryUrlKey,
-                attributeCode: shopby
+                attributeCode: shopby,
+                activeFilter: activeFilter
             }
         });
     }, [
         runQuery,
+        activeFilter,
+        shopby,
+        categoryUrlKey,
+        filters
         // filterTypeMap,
         // search
     ]);
@@ -140,7 +141,7 @@ export const useShopBy = props => {
             if (!alpha.includes(firstLetter)) {
                 firstLetter = '#';
             }
-            if (shopby == "trains_gauge" || shopby == "vehicles_scale" || shopby == "lego_theme" || shopby == "lego_subtheme" || shopby == "lego_interest") {
+            if (shopby == "vehicles_year" || shopby == "trains_gauge" || shopby == "vehicles_scale" || shopby == "lego_theme" || shopby == "lego_subtheme" || shopby == "lego_interest") {
                 firstLetter = '#';
             }
             acc[firstLetter] = acc[firstLetter] || [];
@@ -201,7 +202,7 @@ export const useShopBy = props => {
                 if (!alpha.includes(firstLetter)) {
                     firstLetter = '#';
                 }
-                if (shopby == "trains_gauge" || shopby == "vehicles_scale" || shopby == "lego_theme" || shopby == "lego_subtheme" || shopby == "lego_interest") {
+                if (shopby == "vehicles_year" || shopby == "trains_gauge" || shopby == "vehicles_scale" || shopby == "lego_theme" || shopby == "lego_subtheme" || shopby == "lego_interest") {
                     firstLetter = '#';
                 }
                 acc[firstLetter] = acc[firstLetter] || [];
@@ -219,7 +220,7 @@ export const useShopBy = props => {
 
     let filteredAvailableGroups = dataResult ? Object.keys(dataResult).sort() : [];
     
-    if (shopby == "trains_gauge" || shopby == "vehicles_scale" || shopby == "lego_theme" || shopby == "lego_subtheme" || shopby == "lego_interest") {
+    if (shopby == "vehicles_year" || shopby == "trains_gauge" || shopby == "vehicles_scale" || shopby == "lego_theme" || shopby == "lego_subtheme" || shopby == "lego_interest") {
         availableGroups = ['#'];
         filteredAvailableGroups = ['#'];
     }