@riosst100/pwa-marketplace 2.0.9 → 2.1.1

package/src/overwrites/venia-ui/lib/components/CheckoutPage/checkoutPage.module.css

@@ -0,0 +1,186 @@
+.root {
+    composes: mx-0 from global;
+    composes: my-0 from global;
+    composes: px-0 from global;
+    composes: py-md from global;
+}
+
+/* prettier-ignore */
+.checkoutContent {
+    composes: gap-xs from global;
+    composes: grid from global;
+    /* composes: grid-cols-1 from global; */
+    grid-template-columns: repeat(1, minmax(calc(100% - 380px), 0));
+
+    composes: lg_gap-[30px] from global;
+    /* TODO @TW: review (B7) */
+    /* composes: lg_grid-cols-[2fr, 1fr] from global; */
+}
+
+.checkoutContent_hidden {
+    composes: checkoutContent;
+
+    composes: hidden from global;
+}
+
+.heading_container {
+    composes: col-span-1 from global;
+    composes: col-start-1 from global;
+    composes: gap-y-xs from global;
+    composes: grid from global;
+    composes: text-[24px] from global;
+    composes: font-medium from global;
+    composes: leading-[30px] from global;
+}
+
+.heading {
+    composes: leading-tight from global;
+}
+
+.cartLink {
+    composes: root from '@magento/venia-ui/lib/components/LinkButton/linkButton.module.css';
+
+    composes: text-inherit from global;
+}
+
+.stepper_heading {
+    composes: border-b from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: font-medium from global;
+    composes: pb-xs from global;
+    composes: text-colorDefault from global;
+    composes: uppercase from global;
+
+    composes: lg_pb-md from global;
+}
+
+.shipping_method_heading {
+    composes: stepper_heading;
+}
+
+.payment_information_heading {
+    composes: stepper_heading;
+    composes: border-b-0 from global;
+
+    /* On mobile, order summary has a top border, so avoid doubling up. */
+    composes: lg_border-b from global;
+}
+
+.signInContainer {
+    composes: border from global;
+    composes: border-gray-100 from global;
+    composes: gap-xs from global;
+    composes: flex from global;
+    composes: justify-between from global;
+    composes: items-center from global;
+    composes: justify-items-center from global;
+    composes: mb-xs from global;
+    composes: p-xs from global;
+    composes: rounded-md from global;
+    composes: row-start-1 from global;
+    composes: lg_mb-0 from global;
+}
+
+.signInLabel {
+    composes: font-medium from global;
+    composes: text-[14px] from global;
+}
+
+.signInButton {
+    composes: root_normalPriority from '@magento/venia-ui/lib/components/Button/button.module.css';
+
+    composes: min-h-auto from global;
+    composes: min-w-auto from global;
+    composes: !border from global;
+    composes: px-md from global;
+    composes: py-2 from global;
+}
+
+.empty_cart_container {
+    composes: mb-sm from global;
+}
+
+.shipping_information_container {
+    grid-column: 1 / span 1;
+    composes: relative from global;
+}
+
+.shipping_method_container {
+    grid-column: 1 / span 1;
+    composes: relative from global;
+    composes: border from global;
+    composes: border-gray-100 from global;
+    composes: rounded-md from global;
+}
+
+.payment_information_container {
+    grid-column: 1 / span 1;
+}
+
+.price_adjustments_container {
+    grid-column: 1 / span 1;
+}
+
+.items_review_container {
+    grid-column: 1 / span 1;
+}
+
+.summaryContainer {
+    grid-column: 1 / span 1;
+
+    composes: lg_h-minContent from global;
+    composes: lg_sticky from global;
+    /* TODO @TW: review. Magic number. Slightly bigger than sticky header. */
+    composes: lg_top-[9rem] from global;
+}
+
+@media (min-width: 960px) {
+    .summaryContainer {
+        grid-column: 2 / span 1;
+        grid-row: 2 / span 3;
+    }
+
+    .reCaptchaMargin {
+        margin-bottom: 5.5rem;
+    }
+
+    .signInContainerVisible {
+        grid-row: 1 / span 3;
+    }
+}
+
+@media only screen and (max-width: 1023px) {
+    .checkoutContent {
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+.formErrors {
+    composes: border-error from global;
+    composes: border-solid from global;
+    composes: border-t-0 from global;
+    composes: border-r-0 from global;
+    composes: border-b-0 from global;
+    composes: border-l-4 from global;
+    composes: grid from global;
+    composes: pl-xs from global;
+    composes: pr-0 from global;
+    composes: py-xs from global;
+    grid-column: 1 / span 1;
+}
+
+.review_order_button {
+    composes: root_highPriority from '@magento/venia-ui/lib/components/Button/button.module.css';
+
+    grid-column: 1 / span 1;
+    composes: m-auto from global;
+}
+
+.place_order_button {
+    composes: root_highPriority from '@magento/venia-ui/lib/components/Button/button.module.css';
+
+    grid-column: 1 / span 1;
+    composes: m-auto from global;
+}

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

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

package/src/overwrites/venia-ui/lib/components/CreateAccount/createAccount.js

@@ -0,0 +1,323 @@
+import React from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { Form } from 'informed';
+import { func, shape, string, bool } from 'prop-types';
+import { useCreateAccount } from '@magento/peregrine/lib/talons/CreateAccount/useCreateAccount';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import combine from '@magento/venia-ui/lib/util/combineValidators';
+import {
+    hasLengthAtLeast,
+    isRequired,
+    validatePassword
+} from '@magento/venia-ui/lib/util/formValidators';
+import Button from '@magento/venia-ui/lib/components/Button';
+import Checkbox from '@magento/venia-ui/lib/components/Checkbox';
+import Field from '@magento/venia-ui/lib/components/Field';
+import TextInput from '@magento/venia-ui/lib/components/TextInput';
+import defaultClasses from './createAccount.module.css';
+import FormError from '@magento/venia-ui/lib/components/FormError';
+import Password from '@magento/venia-ui/lib/components/Password';
+import GoogleRecaptcha from '@magento/venia-ui/lib/components/GoogleReCaptcha';
+import { Link } from 'react-router-dom';
+import SocialLogin from '@riosst100/pwa-marketplace/src/components/SocialLogin';
+import cn from 'classnames';
+
+const CreateAccount = props => {
+    const talonProps = useCreateAccount({
+        initialValues: props.initialValues,
+        onSubmit: props.onSubmit,
+        onCancel: props.onCancel
+    });
+
+    const {
+        errors,
+        handleCancel,
+        handleSubmit,
+        handleEnterKeyPress,
+        handleCancelKeyPress,
+        isDisabled,
+        initialValues,
+        recaptchaWidgetProps
+    } = talonProps;
+    const { formatMessage } = useIntl();
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const cancelButton = props.isCancelButtonHidden ? null : (
+        <Button
+            data-cy="CreateAccount-cancelButton"
+            className={classes.cancelButton}
+            disabled={isDisabled}
+            type="button"
+            priority="low"
+            onClick={handleCancel}
+            onKeyDown={handleCancelKeyPress}
+        >
+            <FormattedMessage
+                id={'createAccount.cancelText'}
+                defaultMessage={'Cancel'}
+            />
+        </Button>
+    );
+
+    const submitButton = (
+        <Button
+            className={cn(classes.submitButton, 'w-full max-w-[490px]')}
+            disabled={isDisabled}
+            type="submit"
+            priority="high"
+            onKeyDown={handleEnterKeyPress}
+            data-cy="CreateAccount-submitButton"
+            classes={{
+                content: 'font-medium text-[16px] capitalize',
+            }}
+        >
+            <FormattedMessage
+                id={'createAccount.createAccountText'}
+                defaultMessage={'Create an Account'}
+            />
+        </Button>
+    );
+
+    return (
+        <Form
+            data-cy="CreateAccount-form"
+            className={classes.root}
+            initialValues={initialValues}
+            onSubmit={handleSubmit}
+        >
+            <h2 data-cy="CreateAccount-title" className={classes.title}>
+                <FormattedMessage
+                    id={'createAccount.createAccountText'}
+                    defaultMessage={'Sign Up'}
+                />
+            </h2>
+            <FormError errors={Array.from(errors.values())} />
+            <div className='grid grid-cols-2 gap-6'>
+                <Field
+                    id="firstName"
+                    label={formatMessage({
+                        id: 'createAccount.firstNameText',
+                        defaultMessage: 'First Name'
+                    })}
+                    classes={{
+                        label: "font-normal text-left mb-2 text-[14px] block mb-2"
+                    }}
+                >
+                    <TextInput
+                        id="firstName"
+                        field="customer.firstname"
+                        autoComplete="given-name"
+                        validate={isRequired}
+                        validateOnBlur
+                        mask={value => value && value.trim()}
+                        maskOnBlur={true}
+                        data-cy="customer-firstname"
+                        aria-label={formatMessage({
+                            id: 'global.firstNameRequired',
+                            defaultMessage: 'First Name Required'
+                        })}
+                    />
+                </Field>
+                <Field
+                    id="lastName"
+                    label={formatMessage({
+                        id: 'createAccount.lastNameText',
+                        defaultMessage: 'Last Name'
+                    })}
+                    classes={{
+                        label: "font-normal text-left mb-2 text-[14px] block mb-2"
+                    }}
+                >
+                    <TextInput
+                        id="lastName"
+                        field="customer.lastname"
+                        autoComplete="family-name"
+                        validate={isRequired}
+                        validateOnBlur
+                        mask={value => value && value.trim()}
+                        maskOnBlur={true}
+                        data-cy="customer-lastname"
+                        aria-label={formatMessage({
+                            id: 'global.lastNameRequired',
+                            defaultMessage: 'Last Name Required'
+                        })}
+                    />
+                </Field>
+                <Field
+                    id="Email"
+                    label={formatMessage({
+                        id: 'createAccount.emailText',
+                        defaultMessage: 'Email'
+                    })}
+                    classes={{
+                        label: "font-normal text-left mb-2 text-[14px] block mb-2"
+                    }}
+                >
+                    <TextInput
+                        id="EmailField"
+                        field="customer.email"
+                        autoComplete="email"
+                        validate={isRequired}
+                        validateOnBlur
+                        mask={value => value && value.trim()}
+                        maskOnBlur={true}
+                        data-cy="customer-email"
+                        aria-label={formatMessage({
+                            id: 'global.emailRequired',
+                            defaultMessage: 'Email Required'
+                        })}
+                    />
+                </Field>
+                <Field
+                    id="PhoneNumberField"
+                    label={formatMessage({
+                        id: 'createAccount.phoneNumber',
+                        defaultMessage: 'Phone Number'
+                    })}
+                    classes={{
+                        label: "font-normal text-left mb-2 text-[14px] block mb-2"
+                    }}
+                >
+                    <TextInput
+                        id="phoneNumber"
+                        field="customer.phoneNumber"
+                        autoComplete="phoneNumber"
+                        // validate={isRequired}
+                        validateOnBlur
+                        mask={value => value && value.trim()}
+                        maskOnBlur={true}
+                        data-cy="customer-phoneNumber"
+                        aria-label={formatMessage({
+                            id: 'global.phoneNumberRequired',
+                            defaultMessage: 'Phone Number Required'
+                        })}
+                    />
+                </Field>
+                <Password
+                    id="Password"
+                    autoComplete="new-password"
+                    fieldName="password"
+                    isToggleButtonHidden={false}
+                    label={formatMessage({
+                        id: 'createAccount.passwordText',
+                        defaultMessage: 'Password'
+                    })}
+                    validate={combine([
+                        isRequired,
+                        [hasLengthAtLeast, 8],
+                        validatePassword
+                    ])}
+                    validateOnBlur
+                    mask={value => value && value.trim()}
+                    maskOnBlur={true}
+                    data-cy="password"
+                    aria-label={formatMessage({
+                        id: 'global.passwordRequired',
+                        defaultMessage: 'Password Required'
+                    })}
+                />
+                <Password
+                    id="ConfirmPassword"
+                    autoComplete="confirm-password"
+                    fieldName="confirmpassword"
+                    isToggleButtonHidden={false}
+                    label={formatMessage({
+                        id: 'createAccount.confirmPassword',
+                        defaultMessage: 'Confirm Password'
+                    })}
+                    validate={combine([
+                        isRequired,
+                        [hasLengthAtLeast, 8],
+                        validatePassword
+                    ])}
+                    validateOnBlur
+                    mask={value => value && value.trim()}
+                    maskOnBlur={true}
+                    data-cy="password"
+                    aria-label={formatMessage({
+                        id: 'global.confirmPasswordRequired',
+                        defaultMessage: 'Confirm Password Required'
+                    })}
+                />
+            </div>
+            <div className={classes.subscribe}>
+                <Checkbox
+                    field="subscribe"
+                    id="subscribe"
+                    label={formatMessage({
+                        id: 'createAccount.subscribeText',
+                        defaultMessage: 'Subscribe to news and updates'
+                    })}
+                />
+            </div>
+            <GoogleRecaptcha {...recaptchaWidgetProps} />
+            <div className="flex w-full justify-center">
+                {submitButton}
+                {/* {cancelButton} */}
+            </div>
+            <div className='block'>
+                <span className='text-xs font-normal'>
+                    <FormattedMessage
+                        id={'createAccount.alreadyHaveAccount'}
+                        defaultMessage={"Already have an account ?"}
+                    />
+                </span>
+                {' '}
+                <Link
+                    to={'/sign-in'}
+                    className='text-xs font-normal text-blue-700 underline'
+                >
+                    <FormattedMessage
+                        id={'createAccount.SignIn'}
+                        defaultMessage={"Sign in now "}
+                    />
+                </Link>
+            </div>
+            <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>
+            <div className='relative mx-auto w-full max-w-[490px]'>
+                <SocialLogin />
+            </div>
+        </Form>
+    );
+};
+
+CreateAccount.propTypes = {
+    classes: shape({
+        actions: string,
+        lead: string,
+        root: string,
+        subscribe: string
+    }),
+    initialValues: shape({
+        email: string,
+        firstName: string,
+        lastName: string
+    }),
+    isCancelButtonHidden: bool,
+    onSubmit: func,
+    onCancel: func
+};
+
+CreateAccount.defaultProps = {
+    onCancel: () => { },
+    isCancelButtonHidden: true
+};
+
+export default CreateAccount;

package/src/overwrites/venia-ui/lib/components/CreateAccount/createAccount.module.css

@@ -0,0 +1,52 @@
+.root {
+    composes: gap-6 from global;
+    composes: grid from global;
+    composes: justify-items-stretch from global;
+    composes: p-[30px] from global;
+}
+
+.message {
+    composes: bg-subtle from global;
+    composes: leading-tight from global;
+    composes: p-xs from global;
+    composes: rounded from global;
+    composes: text-sm from global;
+}
+
+/* TODO @TW: cannot compose */
+.message:empty {
+    display: none;
+}
+
+.actions {
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: grid-flow-row from global;
+    composes: justify-center from global;
+    composes: mt-xs from global;
+    composes: text-center from global;
+
+    composes: lg_grid-flow-col from global;
+}
+
+.cancelButton {
+    composes: root_lowPriority from '@magento/venia-ui/lib/components/Button/button.module.css';
+}
+
+.submitButton {
+    composes: root_highPriority from '@magento/venia-ui/lib/components/Button/button.module.css';
+
+    composes: col-start-auto from global;
+
+    composes: lg_col-start-2 from global;
+}
+
+.subscribe {
+    composes: -ml-1.5 from global;
+}
+
+.title {
+    composes: capitalize from global;
+    composes: text-lg from global;
+    composes: font-medium from global;
+}

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

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

package/src/overwrites/venia-ui/lib/components/CreateAccountPage/createAccountPage.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { shape, string } from 'prop-types';
+import { FormattedMessage, useIntl } from 'react-intl';
+
+import { useCreateAccountPage } from '@magento/peregrine/lib/talons/CreateAccountPage/useCreateAccountPage';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import CreateAccount from '@magento/venia-ui/lib/components/CreateAccount';
+import { StoreTitle } from '@magento/venia-ui/lib/components/Head';
+
+import defaultClasses from './createAccountPage.module.css';
+import cn from 'classnames';
+
+const CreateAccountPage = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+    const { createAccountProps } = useCreateAccountPage(props);
+    const { formatMessage } = useIntl();
+
+    return (
+        <div className={classes.root}>
+            <StoreTitle>
+                {formatMessage({
+                    id: 'createAccountPage.title',
+                    defaultMessage: 'Create an Account'
+                })}
+            </StoreTitle>
+            <div className={cn(classes.contentContainer, '!border !border-gray-100 !rounded-lg')}>
+                <CreateAccount {...createAccountProps} />
+            </div>
+        </div>
+    );
+};
+
+CreateAccountPage.defaultProps = {
+    signedInRedirectUrl: '/order-history',
+    signInPageUrl: '/sign-in'
+};
+
+CreateAccountPage.propTypes = {
+    classes: shape({
+        root: string,
+        header: string,
+        contentContainer: string
+    }),
+    signedInRedirectUrl: string,
+    signInPageUrl: string
+};
+
+export default CreateAccountPage;

package/src/overwrites/venia-ui/lib/components/CreateAccountPage/createAccountPage.module.css

@@ -0,0 +1,21 @@
+.root {
+    composes: gap-y-md from global;
+    composes: grid from global;
+    composes: justify-center from global;
+    composes: px-0 from global;
+    composes: py-[60px] from global;
+    composes: text-center from global;
+    grid-template-columns: minmax(auto, 800px);
+}
+
+.header {
+    composes: font-serif from global;
+}
+
+.contentContainer {
+    composes: lg_border-2 from global;
+    composes: lg_border-solid from global;
+    composes: lg_border-subtle from global;
+    composes: lg_pb-md from global;
+    composes: lg_rounded-md from global;
+}

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

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