@riosst100/pwa-marketplace 1.8.8 → 1.9.0

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/productFullDetail.js

@@ -71,6 +71,7 @@ const ProductFullDetail = props => {
         wishlistButtonProps,
         sellerDetails
     } = talonProps;
+    console.log("🚀 ~ ProductFullDetail ~ talonProps:", talonProps)
 
     const { formatMessage } = useIntl();
 
@@ -496,20 +497,34 @@ const ProductFullDetail = props => {
                         )}
                     >
                         <div className='flex flex-col gap-y-5 max-w-[448px]'>
-                            <p
-                                data-cy="ProductFullDetail-productPrice"
-                                className={cn(
-                                    classes.productPrice,
-                                    'text-[32px] font-semibold leading-[32px] mb-0',
-                                )}
-                            >
-                                <Price
-                                    currencyCode={productDetails.price.currency}
-                                    value={productDetails.price.value}
-                                />
-                            </p>
-                            <AuctionDetail productDetails={productDetails} className="auction_detail-container" />
-                            <PreorderDetail productDetails={productDetails} className={'preorder_detail-container'} />
+                            <div className='flex flex-col gap-y-3'>
+                                <p
+                                    data-cy="ProductFullDetail-productPrice"
+                                    className={cn(
+                                        classes.productPrice,
+                                        'text-[32px] font-semibold leading-[32px] mb-0',
+                                    )}
+                                >
+                                    <Price
+                                        currencyCode={productDetails.price.currency}
+                                        value={productDetails.price.value}
+                                    />
+                                </p>
+                                <p
+                                    data-cy="ProductFullDetail-productOldPrice"
+                                    className={cn(
+                                        classes.productPrice,
+                                        'text-lg font-normal leading-none text-gray-400 mb-0 line-through',
+                                    )}
+                                >
+                                    <Price
+                                        currencyCode={productDetails.price.currency}
+                                        value={productDetails.price.value}
+                                    />
+                                </p>
+                            </div>
+                            <AuctionDetail className="auction_detail-container" />
+                            <PreorderDetail className={'preorder_detail-container'} />
                             <small className='shipping-calculation-notes text-gray-200 text-xs'>
                                 Shipping method is calculated on checkout
                             </small>
@@ -624,7 +639,7 @@ const ProductFullDetail = props => {
                                             </div>
                                         </div>
                                     </Link>
-                                    <Link class="flex items-center justify-center gap-[5px] py-1 px-5 relative bg-white rounded-[30px] border border-solid border-[#6243fa]">
+                                    <Link to={"/seller/"+sellerDetails.url_key} class="flex items-center justify-center gap-[5px] py-1 px-5 relative bg-white rounded-[30px] border border-solid border-[#6243fa]">
                                         <div class="flex items-center justify-center gap-[10px] relative">
                                             <Shop color="#6243FA" size={14} variant="Outline" className='stroke-[#6243FA]' />
                                             <div class="relative xs_hidden lg_flex w-fit font-medium text-[#6243fa] text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">

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/LegoSets/legoSets.gql.js

@@ -12,8 +12,8 @@ export const GET_STORE_CONFIG_DATA = gql`
 `;
 
 export const GET_LEGO_SETS_QUERY = gql`
-    query getLegoSets($categoryUrlKey: String!, $activeTab: String, $filters: ProductAttributeFilterInput!, $shopby: String) {
-        legoSets(categoryUrlKey: $categoryUrlKey, activeTab: $activeTab, filters: $filters, shopby: $shopby) {
+    query getLegoSets($categoryUrlKey: String!, $activeTab: String, $filters: ProductAttributeFilterInput!, $shopby: String, $activeFilter: String) {
+        legoSets(categoryUrlKey: $categoryUrlKey, activeTab: $activeTab, filters: $filters, shopby: $shopby, activeFilter: $activeFilter) {
             group
             sets {
                 set_name