@riosst100/pwa-marketplace 1.0.1 → 1.0.3

package/src/components/SellerAccountPage/sellerAccountPage.js

@@ -0,0 +1,138 @@
+import React, { Fragment, Suspense } from 'react';
+import { shape, string } from 'prop-types';
+import { FormattedMessage, useIntl } from 'react-intl';
+
+import { useSellerAccountPage } from '@riosst100/pwa-marketplace/src/talons/SellerAccountPage/useSellerAccountPage';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+// import SellerAccount from '@riosst100/pwa-marketplace/src/components/SellerAccount';
+import { StoreTitle } from '@magento/venia-ui/lib/components/Head';
+import defaultClasses from './sellerAccountPage.module.css';
+import { fullPageLoadingIndicator } from '@magento/venia-ui/lib/components/LoadingIndicator';
+import AccountInformationPageOperations from '@magento/venia-ui/lib/components/AccountInformationPage/accountInformationPage.gql.js';
+import Button from '@magento/venia-ui/lib/components/Button';
+
+const SellerAccountPage = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+    const sellerAccountProps = useSellerAccountPage({
+        ...AccountInformationPageOperations
+    });
+    const {
+        handleCancel,
+        formErrors,
+        handleChangePassword,
+        handleSubmit,
+        initialValues,
+        isDisabled,
+        isUpdateMode,
+        loadDataError,
+        shouldShowNewPassword,
+        showUpdateMode,
+        recaptchaWidgetProps
+    } = sellerAccountProps;
+    const { formatMessage } = useIntl();
+
+    let sellerAccountDetails = null;
+    let sellerLoginAccount = null;
+    if (!initialValues) {
+        return fullPageLoadingIndicator;
+    } else {
+        const { customer } = initialValues;
+        const customerName = `${customer.firstname} ${customer.lastname}`;
+        const passwordValue = 'Same as current';
+
+        sellerAccountDetails = (
+            <Fragment>
+                <div className={classes.accountDetails}>
+                    <span className={classes.nameLabel}>
+                        <FormattedMessage
+                            id={'global.sellerAccountDetailsText'}
+                            defaultMessage={'Seller Account Details'}
+                        />
+                    </span>
+                    <div className={classes.lineItemsContainer}>
+                        <span className={classes.nameLabel}>
+                            <FormattedMessage
+                                id={'global.status'}
+                                defaultMessage={'Status'}
+                            />
+                        </span>
+                        <span className={classes.nameValue}>
+                            Not Verified
+                        </span>
+                    </div>
+                </div>
+            </Fragment>
+        );
+
+        sellerLoginAccount = (
+            <Fragment>
+                <div className={classes.accountDetails}>
+                    <span className={classes.nameLabel}>
+                        <FormattedMessage
+                            id={'global.sellerDashboardLoginAccountText'}
+                            defaultMessage={'Seller Dashboard Login Account'}
+                        />
+                    </span>
+                    <div className={classes.lineItemsContainer}>
+                        <span className={classes.emailLabel}>
+                            <FormattedMessage
+                                id={'global.email'}
+                                defaultMessage={'Email'}
+                            />
+                        </span>
+                        <span className={classes.emailValue}>
+                            {customer.email}
+                        </span>
+                        <span className={classes.passwordLabel}>
+                            <FormattedMessage
+                                id={'global.password'}
+                                defaultMessage={'Password'}
+                            />
+                        </span>
+                        <span className={classes.passwordValue}>
+                            {passwordValue}
+                        </span>
+                    </div>
+                    <div className={classes.editButtonContainer}>
+                        <a href="https://seller-local.tcgcollective.co/lofmarketplace/seller/login/"
+                            className={classes.editInformationButton}
+                        >
+                            <FormattedMessage
+                                id={'global.sellerDashboardText'}
+                                defaultMessage={'Seller Dashboard'}
+                            />
+                        </a>
+                    </div>
+                </div>
+            </Fragment>
+        );
+    }
+
+    return (
+        <div className={classes.root}>
+            <StoreTitle>
+                {formatMessage({
+                    id: 'sellerAccountPage.title',
+                    defaultMessage: 'Seller Account'
+                })}
+            </StoreTitle>
+            {sellerAccountDetails}
+            <br />
+            {sellerLoginAccount}
+        </div>
+    )
+}
+
+export default SellerAccountPage;
+
+SellerAccountPage.defaultProps = {
+    signedInRedirectUrl: '/seller-account',
+    signInPageUrl: '/sign-in'
+};
+
+SellerAccountPage.propTypes = {
+    classes: shape({
+        root: string
+    }),
+    signedInRedirectUrl: string
+};

package/src/components/SellerAccountPage/sellerAccountPage.module.css

@@ -0,0 +1,55 @@
+.root {
+    composes: grid from global;
+    composes: gap-y-md from global;
+    composes: px-lg from global;
+    composes: py-md from global;
+}
+
+.title {
+    composes: font-bold from global;
+    composes: font-serif from global;
+    composes: justify-self-center from global;
+}
+
+.accountDetails {
+    composes: gap-y-md from global;
+    composes: grid from global;
+    composes: grid-cols-1 from global;
+
+    composes: lg_grid-cols-3 from global;
+}
+
+.lineItemsContainer {
+    composes: gap-3 from global;
+    composes: grid from global;
+    composes: grid-cols-1 from global;
+    composes: leading-normal from global;
+    grid-column: 1 / span 1;
+
+    composes: lg_gap-xs from global;
+    composes: lg_grid-cols-2 from global;
+}
+
+.lineItemLabel {
+    composes: font-bold from global;
+}
+
+.nameLabel,
+.emailLabel,
+.passwordLabel {
+    composes: font-bold from global;
+}
+
+.nameValue,
+.emailValue,
+.passwordValue {
+}
+
+.editButtonContainer {
+    grid-column: 1 / span 1;
+    composes: text-center from global;
+}
+
+.editInformationButton {
+    composes: root_normalPriority from '@magento/venia-ui/lib/components/Button/button.module.css';
+}

package/src/components/SellerVerification/index.js

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

package/src/components/SellerVerification/sellerVerification.js

@@ -0,0 +1,198 @@
+import React from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { Form } from 'informed';
+import { func, shape, string, bool } from 'prop-types';
+import { useBecomeSeller } from '@riosst100/pwa-marketplace/src/talons/BecomeSeller/useBecomeSeller';
+
+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 Select from '@magento/venia-ui/lib/components/Select';
+import TextInput from '@magento/venia-ui/lib/components/TextInput';
+import defaultClasses from './sellerVerification.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';
+
+const BecomeSeller = props => {
+    const talonProps = useBecomeSeller({
+        initialValues: props.initialValues,
+        onSubmit: props.onSubmit,
+        onCancel: props.onCancel
+    });
+
+    const {
+        errors,
+        handleSubmit,
+        handleEnterKeyPress,
+        isDisabled,
+        initialValues,
+        recaptchaWidgetProps
+    } = talonProps;
+    const { formatMessage } = useIntl();
+    const classes = useStyle(defaultClasses, props.classes);
+    
+    const submitButton = (
+        <Button
+            className={classes.submitButton}
+            disabled={isDisabled}
+            type="submit"
+            priority="high"
+            onKeyDown={handleEnterKeyPress}
+            data-cy="BecomeSeller-submitButton"
+        >
+            <FormattedMessage
+                id={'sellerVerification.sellerVerificationText'}
+                defaultMessage={'Become a Seller'}
+            />
+        </Button>
+    );
+
+    const sellerTypeOptions = [
+        {
+            value: "individual",
+            label: "Individual"
+        },
+        {
+            value: "company",
+            label: "Company"
+        }
+    ];
+
+    return (
+        <Form
+            data-cy="BecomeSeller-form"
+            className={classes.root}
+            initialValues={initialValues}
+            onSubmit={handleSubmit}
+        >
+            <h2 data-cy="BecomeSeller-title" className={classes.title}>
+                <FormattedMessage
+                    id={'sellerVerification.sellerVerificationText'}
+                    defaultMessage={'Become a Seller'}
+                />
+            </h2>
+            <FormError errors={Array.from(errors.values())} />
+            <Field
+                id="sellerType"
+                label={formatMessage({
+                    id: 'sellerVerification.sellerTypeText',
+                    defaultMessage: 'Seller Type'
+                })}
+            >
+                <Select
+                    field="seller.seller_type"
+                    id={classes.root}
+                    items={sellerTypeOptions}
+                />
+            </Field>
+            <Field
+                id="sellerProfileName"
+                label={formatMessage({
+                    id: 'sellerVerification.sellerProfileNameText',
+                    defaultMessage: 'Seller Profile Name'
+                })}
+            >
+                <TextInput
+                    id="sellerProfileName"
+                    field="seller.seller_profile_name"
+                    validate={isRequired}
+                    validateOnBlur
+                    mask={value => value && value.trim()}
+                    maskOnBlur={true}
+                    data-cy="seller-profilename"
+                    aria-label={formatMessage({
+                        id: 'global.sellerProfileNameRequired',
+                        defaultMessage: 'Seller Profile Name is required.'
+                    })}
+                />
+            </Field>
+            <Field
+                id="companyName"
+                label={formatMessage({
+                    id: 'sellerVerification.companyNameText',
+                    defaultMessage: 'Company Name'
+                })}
+            >
+                <TextInput
+                    id="companyName"
+                    field="seller.company_name"
+                    validate={isRequired}
+                    validateOnBlur
+                    mask={value => value && value.trim()}
+                    maskOnBlur={true}
+                    data-cy="seller-companyname"
+                    aria-label={formatMessage({
+                        id: 'global.companyNameRequired',
+                        defaultMessage: 'Company Name Required'
+                    })}
+                />
+            </Field>
+            <Field
+                id="storeURL"
+                label={formatMessage({
+                    id: 'sellerVerification.storeURLText',
+                    defaultMessage: 'Store URL'
+                })}
+            >
+                <TextInput
+                    id="storeUrl"
+                    field="seller.store_url"
+                    validate={isRequired}
+                    validateOnBlur
+                    mask={value => value && value.trim()}
+                    maskOnBlur={true}
+                    data-cy="seller-storeurl"
+                    aria-label={formatMessage({
+                        id: 'global.storeUrlRequired',
+                        defaultMessage: 'Store URL is required.'
+                    })}
+                />
+            </Field>
+            <div className={classes.subscribe}>
+                <Checkbox
+                    field="become_seller_agreement"
+                    id="sellerVerificationAgreement"
+                    label={formatMessage({
+                        id: 'sellerVerification.sellerVerificationAgreementText',
+                        defaultMessage: 'I agree the Terms and Condition (Terms and Conditions)'
+                    })}
+                />
+            </div>
+            <GoogleRecaptcha {...recaptchaWidgetProps} />
+            <div className={classes.actions}>
+                {submitButton}
+            </div>
+        </Form>
+    );
+};
+
+BecomeSeller.propTypes = {
+    classes: shape({
+        actions: string,
+        lead: string,
+        root: string,
+        subscribe: string
+    }),
+    initialValues: shape({
+        sellerProfileName: string,
+        companyName: string
+    }),
+    isCancelButtonHidden: bool,
+    onSubmit: func,
+    onCancel: func
+};
+
+BecomeSeller.defaultProps = {
+    onCancel: () => {},
+    isCancelButtonHidden: true
+};
+
+export default BecomeSeller;

package/src/components/SellerVerification/sellerVerification.module.css

@@ -0,0 +1,47 @@
+.root {
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: justify-items-stretch from global;
+    composes: px-sm from global;
+    composes: py-xs 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;
+}

package/src/components/SellerVerificationPage/index.js

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

package/src/components/SellerVerificationPage/sellerVerificationPage.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { shape, string } from 'prop-types';
+import { FormattedMessage, useIntl } from 'react-intl';
+
+import { useBecomeSellerPage } from '@riosst100/pwa-marketplace/src/talons/BecomeSellerPage/useBecomeSellerPage';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import BecomeSeller from '@riosst100/pwa-marketplace/src/components/BecomeSeller';
+import { StoreTitle } from '@magento/venia-ui/lib/components/Head';
+import defaultClasses from './sellerVerificationPage.module.css';
+
+const BecomeSellerPage = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+    const { sellerVerificationProps } = useBecomeSellerPage(props);
+    const { formatMessage } = useIntl();
+
+    return (
+        <div className={classes.root}>
+            <StoreTitle>
+                {formatMessage({
+                    id: 'sellerVerificationPage.title',
+                    defaultMessage: 'Become a Seller'
+                })}
+            </StoreTitle>
+            <div className={classes.contentContainer}>
+                <BecomeSeller {...sellerVerificationProps} />
+            </div>
+        </div>
+    );
+}
+
+export default BecomeSellerPage;
+
+BecomeSellerPage.defaultProps = {
+    signedInRedirectUrl: '/seller-verification',
+    signInPageUrl: '/become-seller'
+};
+
+BecomeSellerPage.propTypes = {
+    classes: shape({
+        root: string
+    }),
+    signedInRedirectUrl: string
+};

package/src/components/SellerVerificationPage/sellerVerificationPage.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-md from global;
+    composes: text-center from global;
+    grid-template-columns: minmax(auto, 512px);
+}
+
+.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/components/WebsiteSwitcher/websiteSwitcher.js

@@ -0,0 +1,109 @@
+import React from 'react';
+import { shape, string } from 'prop-types';
+
+import { useWebsiteSwitcher } from '@riosst100/pwa-marketplace/src/talons/WebsiteSwitcher/useWebsiteSwitcher';
+import { availableRoutes } from '@magento/venia-ui/lib/components/Routes/routes';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './websiteSwitcher.module.css';
+import WebsiteSwitcherItem from './websiteSwitcherItem';
+import Shimmer from './websiteSwitcher.shimmer';
+
+const WebsiteSwitcher = props => {
+    const {
+        availableStores,
+        currentGroupName,
+        currentWebsiteName,
+        handleSwitchWebsite,
+        storeGroups,
+        storeMenuRef,
+        storeMenuTriggerRef,
+        storeMenuIsOpen,
+        handleTriggerClick
+    } = useWebsiteSwitcher({ availableRoutes });
+
+    const classes = useStyle(defaultClasses, props.classes);
+    const menuClassName = storeMenuIsOpen ? classes.menu_open : classes.menu;
+
+    if (!availableStores) return <Shimmer />;
+
+    if (availableStores.size <= 1) return null;
+
+    const groups = [];
+    const hasOnlyOneGroup = storeGroups.size === 1;
+
+    storeGroups.forEach((group, key) => {
+        const stores = [];
+        group.forEach(({ storeGroupName, websiteCode, websiteName, isCurrent, storeCode }) => {
+            let label = `${websiteName}`;
+            stores.push(
+                <li
+                    aria-selected={currentWebsiteName}
+                    role="option"
+                    key={storeCode}
+                    className={classes.menuItem}
+                    data-cy="WebsiteSwitcher-view"
+                >
+                    <WebsiteSwitcherItem
+                        active={isCurrent}
+                        onClick={handleSwitchWebsite}
+                        option={storeCode}
+                        option2={websiteCode}
+                    >
+                        {label}
+                    </WebsiteSwitcherItem>
+                </li>
+            );
+        });
+
+        groups.push(
+            <ul
+                role="listbox"
+                className={classes.groupList}
+                key={key}
+                data-cy="WebsiteSwitcher-group"
+            >
+                {stores}
+            </ul>
+        );
+    });
+
+    let triggerLabel = currentWebsiteName ? `${currentWebsiteName}` : '';
+
+    return (
+        <div className={classes.root} data-cy="WebsiteSwitcher-root">
+            <button
+                data-cy="WebsiteSwitcher-triggerButton"
+                className={classes.trigger}
+                aria-label={currentWebsiteName || ''}
+                onClick={handleTriggerClick}
+                ref={storeMenuTriggerRef}
+                data-cy="WebsiteSwitcher-trigger"
+                aria-expanded={storeMenuIsOpen}
+            >
+                {triggerLabel || ''}
+            </button>
+            <div
+                ref={storeMenuRef}
+                className={menuClassName}
+                data-cy="WebsiteSwitcher-menu"
+            >
+                <div className={classes.groups}>{groups}</div>
+            </div>
+        </div>
+    );
+};
+
+export default WebsiteSwitcher;
+
+WebsiteSwitcher.propTypes = {
+    classes: shape({
+        groupList: string,
+        groups: string,
+        menu: string,
+        menu_open: string,
+        menuItem: string,
+        root: string,
+        trigger: string
+    })
+};