@riosst100/pwa-marketplace 1.8.8 → 1.9.0

package/src/components/TrainsSets/trainsSets.js

@@ -0,0 +1,331 @@
+import React, { Fragment, useEffect, useMemo, useState } from 'react';
+import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
+import { StoreTitle, Meta } from '@magento/venia-ui/lib/components/Head';
+import { useTrainsSets } from '@riosst100/pwa-marketplace/src/talons/TrainsSets/useTrainsSets';
+import { Link } from 'react-router-dom';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+import defaultClasses from './trainsSets.module.css';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import cn from 'classnames';
+import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
+import { TrainsSetsShimmer } from '@riosst100/pwa-marketplace/src/components/TrainsSets';
+import CustomSortBy from '@riosst100/pwa-marketplace/src/components/CustomSortBy';
+import ArraySearchInput from '@riosst100/pwa-marketplace/src/components/ArraySearchInput';
+import { useCustomSort } from '@riosst100/pwa-marketplace/src/hooks/useCustomSort';
+import Breadcrumbs from '@magento/venia-ui/lib/components/Breadcrumbs';
+
+const TrainsSets = props => {
+    const { categoryId } = props
+
+    const { location } = globalThis;
+
+    const query = new URLSearchParams(location.search);
+
+    const [active, setActive] = useState('all');
+    const [activeTab, setActiveTab] = useState('all');
+    const [activeFilter, setActiveFilter] = useState('');
+    const [searchQuery, setSearchQuery] = useState('');
+    
+    const shopby = query.get('shopby') || null;
+    const setType = query.get('set_type') || null;
+
+    let defaultSort = {
+        sortText: 'All (A-Z)',
+        value: 'all'
+    };
+    
+    if (shopby == "release_year") {
+        defaultSort = {
+            sortText: 'All (By Year)',
+            value: 'date'
+        };
+    }
+
+    // if (productType == "expansion_sets") {
+    //     defaultSort = {
+    //         sortText: 'All (Expansion Sets)',
+    //         value: 'all'
+    //     };
+    // }
+    
+    // Sorting
+    const sortProps = useCustomSort({ sortFromSearch: false, defaultSort: defaultSort});
+    const [currentSort] = sortProps;
+    // const [sortBy, setSortBy] = useState({
+    //     sortText: 'All (A-Z)',
+    //     value: 'all'
+    // });
+
+    // let availableSortBy = [
+    //     {
+    //         'label': 'All (A-Z)',
+    //         'value': 'all'
+    //     },
+    //     {
+    //         'label': 'By Year',
+    //         'value': 'newest'
+    //     }
+    // ];
+
+    const classes = useStyle(defaultClasses);
+
+    const talonProps = useTrainsSets({ activeFilter, searchQuery, setActive, currentSort, shopby, setType, categoryId, activeTab });
+
+    const { error, loading, trainsSets, categoryUrlSuffix, categoryUrlKey, productType, filteredTrainsSets, availableGroups, category } = talonProps;
+
+    if (loading && !trainsSets)
+        return <TrainsSetsShimmer />;
+    if (error && !trainsSets) return <ErrorView />;
+
+    if (!trainsSets && !loading && !error) {
+        return <TrainsSetsShimmer />;
+    }
+
+    const setsLengthArr = [];
+
+    const newTrainsSets = searchQuery || activeFilter ? filteredTrainsSets : trainsSets;
+
+    // useEffect(() => {
+        if (newTrainsSets && newTrainsSets.length) {
+            newTrainsSets.map((setRelease, index) => {
+                const { group, sets } = setRelease;
+
+                setsLengthArr[group] = sets.length
+            })
+        }
+    // }, [trainsSets])
+
+    const splitToNChunks = (array, n) => {
+        let result = [];
+        for (let i = n; i > 0; i--) {
+            result.push(array.splice(0, Math.ceil(array.length / i)));
+        }
+        return result;
+    }
+
+    const setRelases = newTrainsSets && newTrainsSets.length && newTrainsSets.map((setRelease, index) => {
+        const { group, sets } = setRelease;
+
+        const setsResult = [];
+
+        if (sets.length) {
+            sets.map((set, index) => {
+                const { set_name, option_id } = set;
+
+                const categoryUrl = resourceUrl(
+                    `/${category?.url_path}${categoryUrlSuffix || ''}?${shopby}[filter]=${set_name},${option_id}`
+                );
+
+                setsResult.push(<li className='list-none'>
+                    <Link to={categoryUrl} className="hover_bg-darkblue-900 hover_text-white w-full block text-[14px] py-[2px] px-2">
+                        {set_name}
+                    </Link>
+                </li>)
+            })
+        }
+
+        let setsResultSplitted = [];
+        if (active == group || newTrainsSets.length == 1) {
+            setsResultSplitted = splitToNChunks(setsResult, 3);
+        }
+        
+        return (
+            <>
+                {active == "all" && newTrainsSets.length > 1 ?
+                <div className={cn('singles_group-wrapper mb-4 px-2 inline-block', classes.singlesGroupWrapper)}>
+                    <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2' >
+                        {group}
+                    </div>
+                    <div className={cn('singles_item-list flex flex-col')}>{setsResult}</div>
+                </div> : ''}
+                {active == group || newTrainsSets.length == 1 ? setsResultSplitted && setsResultSplitted.length && setsResultSplitted.map((setsResult, index) =>
+                    <div key={index} className={cn('singles_group-wrapper mb-4 px-2 inline-block', classes.singlesGroupWrapper)}>
+                        {index == 0 ? <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2'>{group}</div> : 
+                        <div className='singles_item_group_letter text-xl font-semibold pb-1 mb-2' style={{"marginTop":"35px"}}></div>}
+                        <div className={cn('singles_item-list flex flex-col')}>{setsResult}</div>
+                    </div>
+                )
+                 : ''}
+            </>
+        );
+    });
+
+    const handleActive = (val) => {
+        setActive(val);
+
+        setSearchQuery('')
+    }
+
+    const handleActiveTab = (val) => {
+        setActiveTab(val);
+        setActive('all');
+        setActiveFilter('');
+
+        setSearchQuery('')
+    }
+    const handleSearchQuery = (val) => {
+        setSearchQuery(val)
+        setActive('all')
+    }
+
+    let alpha = ['#', 'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
+
+    let title = "";
+    if (shopby == "trains_roadname") {
+        title = "Roadname";
+    }
+
+    if (shopby == "trains_brands") {
+        title = "Brands";
+    }
+
+    let availableFilters = [];
+
+    if (activeTab == "country") {
+        availableFilters = [
+            'USA',
+            'Canada',
+            'UK',
+            'Europe',
+            'Asia',
+            'Australia'
+        ];
+    }
+
+    if (activeTab == "trains_gauge") {
+        availableFilters = [
+            'N Scale',
+            'HO Scale',
+            'O Scale',
+            'G Scale',
+            'S Scale',
+            'Z Scale'
+        ];
+    }
+
+    const handleActiveFilter = (val) => {
+        setActiveFilter(val);
+
+        setActive('all');
+
+        setSearchQuery('')
+    }
+
+    return (
+        <Fragment>
+            <StoreTitle>{title}</StoreTitle>
+            <Breadcrumbs categoryId={categoryId} customPage={title} />
+            <ul className={classes.nav}>
+                {shopby == "trains_roadname" &&
+                    <li className={classes.nav_item}>
+                        <button
+                            onClick={() => {
+                                handleActiveTab('country')
+                            }}
+                        >
+                            {activeTab == 'country' ? <b>By Country</b> : 'By Country'}
+                        </button>
+                    </li>
+                }
+                {shopby == "trains_brands" &&
+                    <li className={classes.nav_item}>
+                        <button
+                            onClick={() => {
+                                handleActiveTab('trains_gauge')
+                            }}
+                        >
+                            {activeTab == 'trains_gauge' ? <b>By Gauge</b> : 'By Gauge'}
+                        </button>
+                    </li>
+                }
+                {/* <li className={classes.nav_item}>
+                    <button
+                        onClick={() => {
+                            handleActiveTab('all')
+                        }}
+                    >
+                        {activeTab == "all" ? <b>All</b> : 'All'}
+                    </button>
+                </li> */}
+            </ul>
+            {activeTab != "all" ? <><ul className={classes.nav}>
+                {availableFilters.map((group, index) => (
+                <li key={index} className={classes.nav_item}>
+                    <button
+                        onClick={() => {
+                            handleActiveFilter(group)
+                        }}
+                    >
+                        {activeFilter == group ? <b>{group}</b> : group}
+                    </button>
+                </li>
+                ))}
+                <li className={classes.nav_item}>
+                    <button
+                        onClick={() => {
+                            handleActiveFilter('')
+                        }}
+                    >
+                        {!activeFilter ? <b>All</b> : 'All'}
+                    </button>
+                </li>
+                </ul>
+            </> : ''}
+            <h1 className='mx-auto relative block text-xl font-bold text-center pt-10 pb-4'>
+                {title}
+            </h1>
+            <div className='border border-gray-100 px-6'>
+                {trainsSets ? (
+                    <div
+                        className={classes.toolbar}
+                    >
+                        <div style={{"width":"35%"}}><ArraySearchInput active={active} searchQuery={searchQuery} placeholder="Search sets..." isOpen={true} setSearchQuery={handleSearchQuery} /></div>
+                        {/* <CustomSortBy sortProps={sortProps} availableSortMethods={availableSortBy} /> */}
+                    </div>
+                ) : ''}
+                <section className='single_list-indexing-container relative m-auto pt-5'>
+                    {<ul className='flex gap-2 justify-center flex-wrap'>
+                        <li>
+                            <button
+                                className={cn(
+                                    'rounded-md border border-solid border-gray-100 p-2 min-w-[28px]',
+                                    'leading-4 font-medium text-base hover_bg-gray-50'
+                                )}
+                                onClick={() => {
+                                    handleActive('all')
+                                }}
+                            >
+                                {active == 'all' ? <b>All</b> : 'All'}
+                            </button>
+                        </li>
+                        {alpha.map((letter, index) => (
+                            <li key={index}>
+                                <button
+                                    className={cn(
+                                        'rounded-md border border-solid border-gray-100 p-2 min-w-[28px]',
+                                        'leading-4 font-medium text-base ',
+                                        setsLengthArr[letter] > 0 ? 'hover_bg-gray-50' : 'bg-gray-100 text-gray-400',
+                                    )}
+                                    onClick={() => {
+                                        handleActive(letter)
+                                    }}
+                                    disabled={setsLengthArr[letter] > 0 ? false : true}
+                                >
+                                    {active == letter ? <b>{letter}</b> : letter}
+                                </button>
+                            </li>
+                        ))}
+                    </ul>}
+                </section>
+                <Divider className="mb-5 px-4 mt-5" />
+                <section className='singles-container'>
+                    <div className={cn('singles-wrapper block -mx-4', classes.singlesWrapper)}>
+                        {newTrainsSets && newTrainsSets.length ? setRelases : (searchQuery ? <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>No sets found for <b>{searchQuery}</b> search query.</div> : <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>No sets found.</div>)}
+                    </div>
+                </section>
+            </div>
+        </Fragment>
+    );
+}
+
+export default TrainsSets;

package/src/components/TrainsSets/trainsSets.module.css

@@ -0,0 +1,76 @@
+.nav {
+    composes: flex from global;
+    composes: flex-wrap from global;
+    margin: 50px 0 30px 0;
+    composes: gap-[10px] from global;
+}
+
+.nav_item {
+    composes: px-4 from global;
+    composes: py-2 from global;
+    composes: transition-colors from global;
+    composes: duration-150 from global;
+    composes: border from global;
+    composes: border-solid from global;
+    composes: leading-normal from global;
+    composes: text-base from global;
+    composes: text-colorDefault from global;
+    composes: bg-white from global;
+    composes: border-gray-100 from global;
+    border-radius: 5px;
+}
+
+.toolbar {
+    composes: relative from global;
+    composes: ml-2xs from global;
+    display: flex;
+    justify-content: space-between;
+    margin-top: 20px;
+}
+
+.tabs {
+    composes: flex from global;
+    composes: flex-wrap from global;
+    composes: mt-3 from global;
+    composes: gap-[15px] from global;
+    margin-bottom: 30px;
+}
+
+.tabs_item {
+    composes: px-4 from global;
+    composes: py-2 from global;
+    composes: transition-colors from global;
+    composes: duration-150 from global;
+    composes: border from global;
+    composes: border-solid from global;
+    composes: leading-normal from global;
+    composes: text-base from global;
+    composes: text-colorDefault from global;
+    composes: bg-white from global;
+    composes: border-gray-100 from global;
+    border-radius: 5px;
+}
+
+.singlesWrapper {
+    column-count: 1;
+    display: flex;
+    width: 100%;
+    flex-wrap: wrap;
+    flex-direction: row;
+}
+
+.singlesGroupWrapper {
+    width: 100%;
+}
+
+@media screen and (min-width: 768px) {
+    .singlesGroupWrapper {
+        width: 50%;
+    }
+}
+
+@media screen and (min-width: 1023px) {
+    .singlesGroupWrapper {
+        width: 33.33%;
+    }
+}

package/src/components/TrainsSets/trainsSets.shimmer.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import Shimmer from '@magento/venia-ui/lib/components/Shimmer';
+import defaultClasses from './trainsSets.module.css';
+import cn from 'classnames';
+import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
+
+const TrainsSets = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+
+    return (
+        <>
+            <h1 className='mx-auto relative block text-xl font-bold text-center pt-10 pb-4'><Shimmer width="25%" height="6vh" /></h1>
+            <div className='border border-gray-100 px-6'>
+                <center>
+                    <section className='single_list-indexing-container relative m-auto pt-5'>
+                        <Shimmer width="95%" height="6vh" />
+                    </section>
+                </center>
+                <Divider className="mb-5 px-4" />
+                <section className='singles-container'>
+                    <div className={cn('singles-wrapper block -mx-4', classes.singlesWrapper)}>
+                        <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
+                            <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2' ><Shimmer width="95%" height="100vh" /></div>
+                        </div>
+                        <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
+                            <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2' ><Shimmer width="95%" height="100vh" /></div>
+                        </div>
+                        <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
+                            <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2' ><Shimmer width="95%" height="100vh" /></div>
+                        </div>
+                        <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
+                            <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2' ><Shimmer width="95%" height="100vh" /></div>
+                        </div>
+                        <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
+                            <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2' ><Shimmer width="95%" height="100vh" /></div>
+                        </div>
+                        <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
+                            <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2' ><Shimmer width="95%" height="100vh" /></div>
+                        </div>
+                    </div>
+                </section>
+            </div>
+        </>
+    );
+};
+
+export default TrainsSets;

package/src/overwrites/venia-ui/lib/RootComponents/Category/category.js

@@ -16,6 +16,8 @@ import { useLocation } from 'react-router-dom';
 import SportCardsSets from '@riosst100/pwa-marketplace/src/components/SportCardsSets/sportCardsSets';
 import NonSportCardsSets from '@riosst100/pwa-marketplace/src/components/NonSportCardsSets/nonSportCardsSets';
 import LegoSets from '@riosst100/pwa-marketplace/src/components/LegoSets/legoSets';
+import TrainsSets from '@riosst100/pwa-marketplace/src/components/TrainsSets/trainsSets';
+import ShopByVehicles from '@riosst100/pwa-marketplace/src/components/ShopByVehicles/shopByVehicles';
 
 const MESSAGES = new Map().set(
     'NOT_FOUND',
@@ -92,6 +94,9 @@ const Category = props => {
                 isLoading={loading} /> : shopby && parentCategoryUrlKey == "non-sports-cards" ? <NonSportCardsSets
                 categoryId={uid}
                 shopby={shopby}
+                isLoading={loading} /> : shopby == "trains_brands" || shopby == "trains_roadname" ? <TrainsSets
+                categoryId={uid}
+                shopby={shopby}
                 isLoading={loading} /> : shopby == "sc_baseball_players" || shopby == "sc_baseball_teams" || shopby == "release" && parentCategoryUrlKey == "sport-cards" ? <SportCardsSets
                 categoryId={uid}
                 shopby={shopby}

package/src/overwrites/venia-ui/lib/RootComponents/Category/categoryContent.js

@@ -91,6 +91,10 @@ const CategoryContent = props => {
             if (urlKey == "non-sports-cards") {
                 history.replace('/cards/non-sports-cards/comics.html')
             }
+
+            if (urlKey == "age-level" || urlKey == "lego" || urlKey == "minifigures" || urlKey == "sub-theme" || urlKey == "theme" || urlKey == "interest") {
+                history.replace('/lego-toys/lego/sets.html')
+            }
         }
     }, [category]);
 

package/src/overwrites/venia-ui/lib/components/AccountInformationPage/accountInformationPage.gql.js

@@ -0,0 +1,48 @@
+import { gql } from '@apollo/client';
+import { AccountInformationPageFragment } from './accountInformationPageFragment.gql';
+
+export const SET_CUSTOMER_INFORMATION = gql`
+    mutation SetCustomerInformation($customerInput: CustomerInput!) {
+        updateCustomer(input: $customerInput) {
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
+            customer {
+                ...AccountInformationPageFragment
+            }
+        }
+    }
+    ${AccountInformationPageFragment}
+`;
+
+export const CHANGE_CUSTOMER_PASSWORD = gql`
+    mutation ChangeCustomerPassword(
+        $currentPassword: String!
+        $newPassword: String!
+    ) {
+        changeCustomerPassword(
+            currentPassword: $currentPassword
+            newPassword: $newPassword # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        ) {
+            email
+        }
+    }
+`;
+
+export const GET_CUSTOMER_INFORMATION = gql`
+    query GetCustomerInformation {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        customer {
+            ...AccountInformationPageFragment
+        }
+    }
+    ${AccountInformationPageFragment}
+`;
+
+export default {
+    mutations: {
+        setCustomerInformationMutation: SET_CUSTOMER_INFORMATION,
+        changeCustomerPasswordMutation: CHANGE_CUSTOMER_PASSWORD
+    },
+    queries: {
+        getCustomerInformationQuery: GET_CUSTOMER_INFORMATION
+    }
+};

package/src/overwrites/venia-ui/lib/components/AccountInformationPage/accountInformationPage.js

@@ -0,0 +1,147 @@
+import React, { Fragment, Suspense } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { useAccountInformationPage } from '@magento/peregrine/lib/talons/AccountInformationPage/useAccountInformationPage';
+
+import { useStyle } from '@magento/venia-ui/lib/classify.js';
+import Button from '@magento/venia-ui/lib/components/Button';
+import { Message } from '@magento/venia-ui/lib/components/Field';
+import { StoreTitle } from '@magento/venia-ui/lib/components/Head';
+import { fullPageLoadingIndicator } from '@magento/venia-ui/lib/components/LoadingIndicator';
+
+import defaultClasses from './accountInformationPage.module.css';
+import AccountInformationPageOperations from './accountInformationPage.gql.js';
+
+const EditModal = React.lazy(() => import('./editModal'));
+
+const AccountInformationPage = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const talonProps = useAccountInformationPage({
+        ...AccountInformationPageOperations
+    });
+
+    const {
+        handleCancel,
+        formErrors,
+        handleChangePassword,
+        handleSubmit,
+        initialValues,
+        isDisabled,
+        isUpdateMode,
+        loadDataError,
+        shouldShowNewPassword,
+        showUpdateMode,
+        recaptchaWidgetProps,
+        setShouldShowNewPassword,
+    } = talonProps;
+    console.log("🚀 ~ AccountInformationPage ~ talonProps:", talonProps)
+    const { formatMessage } = useIntl();
+
+    const errorMessage = loadDataError ? (
+        <Message>
+            <FormattedMessage
+                id={'accountInformationPage.errorTryAgain'}
+                defaultMessage={
+                    'Something went wrong. Please refresh and try again.'
+                }
+            />
+        </Message>
+    ) : null;
+
+    let pageContent = null;
+    if (!initialValues) {
+        return fullPageLoadingIndicator;
+    } else {
+        const { customer } = initialValues;
+        const customerName = `${customer.firstname} ${customer.lastname}`;
+        const passwordValue = '***********';
+
+        pageContent = (
+            <Fragment>
+                {/* <div className={classes.accountDetails}>
+                    <div className={classes.lineItemsContainer}>
+                        <span className={classes.nameLabel}>
+                            <FormattedMessage
+                                id={'global.name'}
+                                defaultMessage={'Name'}
+                            />
+                        </span>
+                        <span className={classes.nameValue}>
+                            {customerName}
+                        </span>
+                        <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}>
+                        <Button
+                            className={classes.editInformationButton}
+                            disabled={false}
+                            onClick={showUpdateMode}
+                            priority="normal"
+                            data-cy="AccountInformationPage-editInformationButton"
+                        >
+                            <FormattedMessage
+                                id={'global.editButton'}
+                                defaultMessage={'Edit'}
+                            />
+                        </Button>
+                    </div>
+                </div> */}
+                <Suspense fallback={null}>
+                    <EditModal
+                        formErrors={formErrors}
+                        initialValues={customer}
+                        isDisabled={isDisabled}
+                        isOpen={isUpdateMode}
+                        onCancel={handleCancel}
+                        onChangePassword={handleChangePassword}
+                        onSubmit={handleSubmit}
+                        shouldShowNewPassword={shouldShowNewPassword}
+                        recaptchaWidgetProps={recaptchaWidgetProps}
+                        setShouldShowNewPassword={setShouldShowNewPassword}
+                    />
+                </Suspense>
+            </Fragment>
+        );
+    }
+
+    return (
+        <div className={classes.root}>
+            <StoreTitle>
+                {formatMessage({
+                    id: 'accountInformationPage.titleAccount',
+                    defaultMessage: 'Account Information'
+                })}
+            </StoreTitle>
+            <div
+                aria-live="polite"
+                className="text-xl font-medium text-left"
+                data-cy="AccountInformationPage-title"
+            >
+                <FormattedMessage
+                    id={'accountInformationPage.accountInformation'}
+                    defaultMessage={'Account Information'}
+                />
+            </div>
+            {errorMessage ? errorMessage : pageContent}
+        </div>
+    );
+};
+
+export default AccountInformationPage;