@riosst100/pwa-marketplace 1.6.1 → 1.6.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@riosst100/pwa-marketplace",
   "author": "riosst100@gmail.com",
-  "version": "1.6.1",
+  "version": "1.6.3",
   "main": "src/index.js",
   "pwa-studio": {
     "targets": {
@@ -11,7 +11,8 @@
   "dependencies": {
     "axios": "^1.6.5",
     "iconsax-react": "^0.0.8",
-    "react-phone-number-input": "^3.3.9"
+    "react-phone-number-input": "^3.3.9",
+    "react-slick": "^0.30.2"
   },
   "license": "MIT",
   "private": false

package/src/components/AlphaFilter/alphaFilter.js

@@ -15,14 +15,31 @@ import ProductSort from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/
 import CustomSortBy from '@riosst100/pwa-marketplace/src/components/CustomSortBy';
 
 const AlphaFilter = props => {
-    const {items, handleActiveLetter} = props;
+    const {items, handleActiveLetter, activeLetter, isSingles } = props;
 
     const groupSinglesFirstLetter = (data) => {
         return data.reduce((acc, item) => {
-            if (item && item.name) {
-                const firstLetter = item.name.charAt(0).toUpperCase();
-                acc[firstLetter] = acc[firstLetter] || [];
-                acc[firstLetter].push(item);
+            if (item) {
+                const { custom_attributes } = item;
+                if (custom_attributes) {
+                    let cardName = '';
+                    custom_attributes.some((attribute, index) => {
+                        const { attribute_metadata, entered_attribute_value, selected_attribute_options } = attribute
+                        if (attribute_metadata.code == "card_name") {
+                            cardName = selected_attribute_options.attribute_option[0].label;
+
+                            return true;
+                        }
+
+                        return false;
+                    });
+
+                    if (cardName) {
+                        const firstLetter = cardName.charAt(0).toUpperCase();
+                        acc[firstLetter] = acc[firstLetter] || [];
+                        acc[firstLetter].push(item);
+                    }
+                }
             }
 
             return acc;
@@ -34,11 +51,17 @@ const AlphaFilter = props => {
     
     const 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'];
 
-    return <>
+    return isSingles && <>
         <section className='single_list-indexing-container relative m-auto py-1'>
             <ul className='flex gap-2 justify-center flex-wrap'>
                 {alpha.map((letter, index) => (
                     <li key={index}>
+                        {activeLetter == letter ? <button
+                            className={cn(
+                                'rounded-md border border-solid border-gray-100 p-2 min-w-[28px]',
+                                'leading-4 font-medium text-base ',
+                                availableLetter.includes(letter) ? 'hover_bg-gray-50' : 'bg-gray-100 text-gray-400',
+                            )}><b>{letter}</b></button> :
                         <button
                             className={cn(
                                 'rounded-md border border-solid border-gray-100 p-2 min-w-[28px]',
@@ -51,10 +74,15 @@ const AlphaFilter = props => {
                             disabled={availableLetter.includes(letter) > 0 ? false : true}
                         >
                             {letter}
-                        </button>
+                        </button>}
                     </li>
                 ))}
                 <li>
+                    {activeLetter == 'all' ? <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',
+                            )}><b>All</b></button> :
                     <button
                         className={cn(
                             'rounded-md border border-solid border-gray-100 p-2 min-w-[28px]',
@@ -65,7 +93,7 @@ const AlphaFilter = props => {
                         }}
                     >
                         All
-                    </button>
+                    </button>}
                 </li>
             </ul>
         </section>

package/src/components/AlphaFilter/alphaFilter.shimmer.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { shape, string } from 'prop-types';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import Shimmer from '@magento/venia-ui/lib/components/Shimmer';
+import defaultClasses from './collectibleGameSets.module.css';
+import cn from 'classnames';
+import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
+
+const CollectibleGameSets = 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 py-10'>
+                        <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 CollectibleGameSets;

package/src/components/ArraySearchInput/arraySearchInput.js

@@ -0,0 +1,100 @@
+import React, { useCallback } from 'react';
+import { bool, shape, string } from 'prop-types';
+import { Form } from 'informed';
+import { useIntl } from 'react-intl';
+import { useSearchBar } from '@magento/peregrine/lib/talons/SearchBar';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Autocomplete from '@magento/venia-ui/lib/components/SearchBar/autocomplete';
+import defaultClasses from './arraySearchInput.module.css';
+import Dropdown from '@riosst100/pwa-marketplace/src/components/Dropdown';
+import cn from 'classnames';
+import SearchField from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/SearchBar/searchField';
+import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
+import { useArraySearchInput } from '@riosst100/pwa-marketplace/src/talons/ArraySearchInput/useArraySearchInput';
+
+const ArraySearchInput = React.forwardRef((props, ref) => {
+    const { isOpen, placeholder, setSearchQuery, active, setActive } = props;
+    const talonProps = useArraySearchInput({ active });
+    // const fieldState = useFieldState('search_query');
+    const {
+        containerRef,
+        // handleChange,
+        handleFocus,
+        // handleSubmit,
+        initialValues,
+        isAutoCompleteOpen,
+        setIsAutoCompleteOpen,
+        valid
+    } = talonProps;
+
+    const handleSubmit = useCallback(
+        ({ search_query }) => {
+            return false;
+        },
+        []
+    );
+
+    const handleChange = useCallback(
+        value => {
+            // const hasValue = !!value;
+            // const isValid = hasValue && value.length > 2;
+
+            setSearchQuery(value)
+
+            
+
+            // setValid(isValid);
+            // setIsAutoCompleteOpen(hasValue);
+        },
+        [setSearchQuery]
+    );
+
+    const classes = useStyle(defaultClasses, props.classes);
+    const rootClassName = isOpen ? classes.root_open : classes.root;
+    const { formatMessage } = useIntl();
+
+    return (
+        <div className={rootClassName} data-cy="ArraySearchInput-root" ref={ref}>
+            <div ref={containerRef} className={classes.container}>
+                <Form
+                    autoComplete="off"
+                    className={classes.form}
+                    initialValues={initialValues}
+                    onSubmit={handleSubmit}
+                >
+                    <div
+                        className={cn(
+                            classes.search,
+                            'flex flex-row relative border border-gray-100 rounded-full'
+                        )}
+                    >
+                        <SearchField
+                            addLabel={formatMessage({
+                                id: 'global.clearText',
+                                defaultMessage: 'Clear Text'
+                            })}
+                            isSearchOpen={isAutoCompleteOpen}
+                            onChange={handleChange}
+                            onFocus={handleFocus}
+                        />
+                    </div>
+                </Form>
+            </div>
+        </div>
+    );
+});
+
+export default ArraySearchInput;
+
+ArraySearchInput.propTypes = {
+    classes: shape({
+        autocomplete: string,
+        container: string,
+        form: string,
+        root: string,
+        root_open: string,
+        search: string
+    }),
+    isOpen: bool
+};

package/src/components/ArraySearchInput/arraySearchInput.module.css

@@ -0,0 +1,48 @@
+.root {
+    composes: items-center from global;
+    composes: justify-items-center from global;
+    composes: justify-self-center from global;
+    composes: py-0 from global;
+    composes: w-full from global;
+
+    /* TODO @TW: review (B6) */
+    /* composes: hidden from global; */
+    display: none;
+}
+
+.root_open {
+    composes: root;
+
+    composes: z-dropdown from global;
+
+    /* TODO @TW: review (B6) */
+    /* composes: grid from global; */
+    display: grid;
+}
+
+.form {
+    composes: grid from global;
+    composes: items-center from global;
+    composes: justify-items-stretch from global;
+    composes: w-full from global;
+}
+
+.container {
+    composes: inline-flex from global;
+    composes: items-center from global;
+    composes: justify-center from global;
+    composes: max-w-full from global;
+    composes: relative from global;
+    composes: w-full from global;
+}
+
+.search {
+    composes: relative from global;
+    padding-left: 20px;
+}
+
+.autocomplete {
+    composes: grid from global;
+    /* composes: relative from global; */
+    composes: z-menu from global;
+}

package/src/components/ArraySearchInput/index.js

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

package/src/components/CollectibleGameSets/collectibleGameSets.js

@@ -1,6 +1,4 @@
-import React, { Fragment, useState } from 'react';
-import { FormattedMessage } from 'react-intl';
-import { useSeller } from '@riosst100/pwa-marketplace/src/talons/Seller/useSeller';
+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 { useCollectibleGameSets } from '@riosst100/pwa-marketplace/src/talons/CollectibleGameSets/useCollectibleGameSets';
@@ -11,22 +9,35 @@ import { useStyle } from '@magento/venia-ui/lib/classify';
 import cn from 'classnames';
 import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
 import { CollectibleGameSetsShimmer } from '@riosst100/pwa-marketplace/src/components/CollectibleGameSets';
-import ProductSort from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/ProductSort';
 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';
 
 const CollectibleGameSets = props => {
     const [active, setActive] = useState('all');
 
-    const [sortBy, setSortBy] = useState({
+    const [searchQuery, setSearchQuery] = useState('');
+
+    
+    const sortProps = useCustomSort({ sortFromSearch: false, defaultSort: {
         sortText: 'All (A-Z)',
         value: 'all'
-    });
+    }});
+
+    const [currentSort] = sortProps;
+
+    // const [sortBy, setSortBy] = useState({
+    //     sortText: 'All (A-Z)',
+    //     value: 'all'
+    // });
+
+    // console.log(currentSort)
 
     const classes = useStyle(defaultClasses);
 
-    const talonProps = useCollectibleGameSets();
+    const talonProps = useCollectibleGameSets({ searchQuery, setActive, currentSort });
 
-    const { error, loading, collectibleGameSets, categoryUrlSuffix, categoryUrlKey, productType } = talonProps;
+    const { error, loading, collectibleGameSets, categoryUrlSuffix, categoryUrlKey, productType, filteredCollectibleGameSets } = talonProps;
 
     if (loading && !collectibleGameSets)
         return <CollectibleGameSetsShimmer />;
@@ -37,12 +48,21 @@ const CollectibleGameSets = props => {
     }
 
     const setsLengthArr = [];
-    const groupByYear = [];
 
-    const setRelases = collectibleGameSets.map((setRelease, index) => {
-        const { release_type, sets } = setRelease;
+    const newCollectibleGameSets = searchQuery ? filteredCollectibleGameSets : collectibleGameSets;
+
+    // useEffect(() => {
+        if (collectibleGameSets) {
+            collectibleGameSets.map((setRelease, index) => {
+                const { release_type, sets } = setRelease;
+
+                setsLengthArr[release_type] = sets.length
+            })
+        }
+    // }, [collectibleGameSets])
 
-        setsLengthArr[release_type] = sets.length
+    const setRelases = newCollectibleGameSets.map((setRelease, index) => {
+        const { release_type, sets } = setRelease;
 
         const setsResult = [];
 
@@ -50,8 +70,6 @@ const CollectibleGameSets = props => {
             sets.map((set, index) => {
                 const { set_name, option_id, set_abbreviation, release_year } = set;
 
-                groupByYear[release_year] = set;
-
                 const categoryUrl = resourceUrl(
                     `/games/collectible-game/${categoryUrlKey}${categoryUrlSuffix || ''}?card_set[filter]=${set_name},${option_id}`
                 );
@@ -67,7 +85,7 @@ const CollectibleGameSets = props => {
         return (
             <>
                 {active == "all" || active == release_type ?
-                <div id={"#tab_list_"+release_type.toLowerCase()} className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
+                <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' >
                         {release_type}
                     </div>
@@ -77,10 +95,13 @@ const CollectibleGameSets = props => {
         );
     });
 
-    console.log(groupByYear)
-
     const handleActive = (val) => {
         setActive(val);
+
+        // 
+
+
+        setSearchQuery('')
     }
 
     const 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'];
@@ -91,12 +112,12 @@ const CollectibleGameSets = props => {
             'value': 'all'
         },
         {
-            'label': 'Newest',
+            'label': 'Latest Sets',
             'value': 'newest'
         },
         {
-            'label': 'All (Date)',
-            'value': 'all-date'
+            'label': 'By Date',
+            'value': 'date'
         }
     ];
 
@@ -114,9 +135,16 @@ const CollectibleGameSets = props => {
                 {title}
             </h1>
             <div className='border border-gray-100 px-6'>
+                {collectibleGameSets ? (
+                    <div
+                        className={classes.toolbar}
+                    >
+                        <div style={{"width":"35%"}}><ArraySearchInput active={active} searchQuery={searchQuery} placeholder="Search sets..." isOpen={true} setSearchQuery={setSearchQuery} /></div>
+                        <CustomSortBy sortProps={sortProps} availableSortMethods={availableSortBy} />
+                    </div>
+                ) : ''}
                 {productType != "expansion-sets" ? (
                     <>
-                        <CustomSortBy sortProps={[sortBy, setSortBy]} availableSortMethods={availableSortBy} />
                         <section className='single_list-indexing-container relative m-auto py-10'>
                             <ul className='flex gap-2 justify-center flex-wrap'>
                                 <li>
@@ -129,7 +157,7 @@ const CollectibleGameSets = props => {
                                             handleActive('all')
                                         }}
                                     >
-                                        All
+                                        {active == 'all' ? <b>All</b> : 'All'}
                                     </button>
                                 </li>
                                 {alpha.map((letter, index) => (
@@ -145,7 +173,7 @@ const CollectibleGameSets = props => {
                                             }}
                                             disabled={setsLengthArr[letter] > 0 ? false : true}
                                         >
-                                            {letter}
+                                            {active == letter ? <b>{letter}</b> : letter}
                                         </button>
                                     </li>
                                 ))}
@@ -153,10 +181,10 @@ const CollectibleGameSets = props => {
                         </section>
                     </>
                 ) : ''}
-                <Divider className="mb-5 px-4" />
+                <Divider className="mb-5 px-4 mt-5" />
                 <section className='singles-container'>
                     <div className={cn('singles-wrapper block -mx-4', classes.singlesWrapper)}>
-                        {setRelases}
+                        {newCollectibleGameSets && newCollectibleGameSets.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>

package/src/components/CollectibleGameSets/collectibleGameSets.module.css

@@ -1,3 +1,11 @@
+.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;

package/src/components/CrossSeller/crossSellerBuy.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import Item from './item';
+
+const crossSellerBuy = () => {
+    return (
+        <>
+            <h3 className='capitalize font-semibold text-xl mb-[30px]'>
+                Also Available
+            </h3>
+            <div className='flex flex-col gap-y-5'>
+                {[...Array(6)].map(() => (
+                    <Item />
+                ))}
+            </div>
+        </>
+    )
+}
+
+export default crossSellerBuy

package/src/components/CrossSeller/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import Content from './crossSellerBuy';
+
+const index = () => {
+
+    const contentProps = {
+
+    }
+
+    return (
+        <Content {...contentProps} />
+    )
+}
+
+export default index

package/src/components/CrossSeller/item.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import { Form } from 'informed';
+import Button from '@magento/venia-ui/lib/components/Button';
+import Image from '@magento/venia-ui/lib/components/Image';
+import QuantityStepper from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/QuantityStepper';
+import Verify from './verifyIcon';
+import Star from './starIcon';
+import logoImage from './logo_seller.png';
+
+const item = () => {
+    return (
+        <>
+            <div className='flex flex-col gap-y-4 lg_flex-row justify-between bg-white rounded-lg border border-gray-100 p-[15px]'>
+                <div className='seller_info-container flex flex-row gap-x-[15px]'>
+                    <div className='logo_wrapper w-[100px] h-[100px]'>
+                        <Image
+                            alt='seller name'
+                            className="relative mt-[-5px]"
+                            src={logoImage}
+                        />
+                    </div>
+                    <div className='flex flex-col gap-y-[15px]'>
+                        <div className='seller_summary-wrapper flex flex-row gap-x-2.5 items-center'>
+                            <div className='seller_name text-lg font-semibold leading-6'>
+                                Zen Market
+                            </div>
+                            <div className='seller_badge flex flex-row gap-x-[5px] items-center leading-6'>
+                                <Verify />
+                                <span className='text-xs font-medium text-gray-600-transparent capitalize'>
+                                    Verified
+                                </span>
+                            </div>
+                        </div>
+                        <div className='rating_sales flex flex-row gap-x-[5px] items-center'>
+                            <Star />
+                            <span className='font-normal text-[14px] text-gray-200'>
+                                4.7 (Sales 120)
+                            </span>
+                        </div>
+                    </div>
+                </div>
+
+                <div className='price_container'>
+                    <div className='price text-lg font-semibold'>
+                        $34.19
+                    </div>
+                    <span className='shipping_note text-xs text-gray-200'>
+                        Shipping method is calculated on checkout
+                    </span>
+                </div>
+
+                <div className='form_wrapper'>
+                    <Form
+                        data-cy="FormAddToCartCrossSeller"
+                        onSubmit={() => { }}
+                        className="flex flex-row gap-x-7"
+                    >
+                        <QuantityStepper
+                            min={1}
+                        // message={'error quantity'}
+                        />
+                        <Button
+                            data-cy="addToCartButton"
+                            classes={{
+                                content: 'normal-case font-semibold text-[16px]'
+                            }}
+                            priority="high"
+                            type="button"
+                        >
+                            Add To Cart
+                        </Button>
+                    </Form>
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default item

package/src/components/CrossSeller/starIcon.js

@@ -0,0 +1,14 @@
+import React from 'react'
+
+const starIcon = () => {
+    return (
+        <>
+            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M8.00985 2.04754L9.03651 4.10087C9.17651 4.38671 9.54985 4.66087 9.86485 4.71337L11.7257 5.02254C12.9157 5.22087 13.1957 6.08421 12.3382 6.93587L10.8915 8.38254C10.6465 8.62754 10.5123 9.10004 10.5882 9.43837L11.0023 11.2292C11.329 12.6467 10.5765 13.195 9.32235 12.4542L7.57818 11.4217C7.26318 11.235 6.74401 11.235 6.42318 11.4217L4.67901 12.4542C3.43068 13.195 2.67235 12.6409 2.99901 11.2292L3.41318 9.43837C3.48901 9.10004 3.35485 8.62754 3.10985 8.38254L1.66318 6.93587C0.811513 6.08421 1.08568 5.22087 2.27568 5.02254L4.13651 4.71337C4.44568 4.66087 4.81901 4.38671 4.95901 4.10087L5.98568 2.04754C6.54568 0.933372 7.45568 0.933372 8.00985 2.04754Z" fill="#F7C317" stroke="#F7C317" stroke-linecap="round" stroke-linejoin="round" />
+            </svg>
+
+        </>
+    )
+}
+
+export default starIcon

package/src/components/CrossSeller/verifyIcon.js

@@ -0,0 +1,12 @@
+import React from 'react'
+
+const verifyIcon = () => (
+    <>
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M8.9584 2.04185C9.5334 1.55018 10.4751 1.55018 11.0584 2.04185L12.3751 3.17518C12.6251 3.39185 13.0917 3.56685 13.4251 3.56685H14.8417C15.7251 3.56685 16.4501 4.29185 16.4501 5.17518V6.59185C16.4501 6.91685 16.6251 7.39185 16.8417 7.64185L17.9751 8.95851C18.4667 9.53351 18.4667 10.4752 17.9751 11.0585L16.8417 12.3752C16.6251 12.6252 16.4501 13.0918 16.4501 13.4252V14.8418C16.4501 15.7252 15.7251 16.4502 14.8417 16.4502H13.4251C13.1001 16.4502 12.6251 16.6252 12.3751 16.8418L11.0584 17.9752C10.4834 18.4668 9.54173 18.4668 8.9584 17.9752L7.64173 16.8418C7.39173 16.6252 6.92506 16.4502 6.59173 16.4502H5.15006C4.26673 16.4502 3.54173 15.7252 3.54173 14.8418V13.4168C3.54173 13.0918 3.36673 12.6252 3.1584 12.3752L2.0334 11.0502C1.55007 10.4752 1.55007 9.54185 2.0334 8.96685L3.1584 7.64185C3.36673 7.39185 3.54173 6.92518 3.54173 6.60018V5.16685C3.54173 4.28351 4.26673 3.55851 5.15006 3.55851H6.59173C6.91673 3.55851 7.39173 3.38351 7.64173 3.16685L8.9584 2.04185Z" fill="#4E31DB" stroke="#4E31DB" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M6.9834 10.0001L8.99173 12.0167L13.0167 7.9834" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+    </>
+)
+
+export default verifyIcon