@riosst100/pwa-marketplace 1.8.9 → 1.9.0

package/src/components/LiveChat/index.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import LiveChat from './liveChat';
+
+const index = (props) => {
+
+    const {
+        open = false,
+        setOpen = () => { },
+    } = props;
+
+    const dummyChat = [
+        {
+            "message": "May I help you",
+            "type": "seller",
+            "timeStamp": "03-06-2024 2:59 pm"
+        },
+        {
+            "message": "Yes",
+            "type": "buyer",
+            "timeStamp": "03-06-2024 2:59 pm"
+        },
+        {
+            "message": "can i get a discount",
+            "type": "buyer",
+            "timeStamp": "03-06-2024 2:59 pm"
+        },
+        {
+            "message": "you can redeem this code 'JunePlay'",
+            "type": "seller",
+            "timeStamp": "03-06-2024 2:59 pm"
+        },
+        {
+            "message": "or this code 'collectfest'",
+            "type": "seller",
+            "timeStamp": "03-06-2024 2:59 pm"
+        },
+    ]
+
+    const liveChatProps = {
+        open,
+        setOpen,
+        chatData: dummyChat
+    }
+
+    return (
+        <>
+            <LiveChat {...liveChatProps} />
+        </>
+    )
+}
+
+export default index

package/src/components/LiveChat/liveChat.js

@@ -0,0 +1,160 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import cn from 'classnames';
+import { ArrowSquareDown } from 'iconsax-react';
+import ChatContent from './chatContent';
+import { Send } from 'iconsax-react';
+import Button from '@magento/venia-ui/lib/components/Button';
+import Tabs from '@riosst100/pwa-marketplace/src/components/commons/Tabs';
+import SignIn from '@magento/venia-ui/lib/components/SignIn';
+import { Link } from 'react-router-dom';
+import { useUserContext } from '@magento/peregrine/lib/context/user';
+
+const ChatContentComponent = (props) => {
+    const { chatData } = props;
+    return (
+        <>
+            <div className='h-[calc(100%-76px)] mb-4 overflow-auto chat-container pr-1'>
+                <ChatContent chatData={chatData} />
+            </div>
+            <div className='flex gap-2'>
+                <textarea
+                    className='w-full focus-visible_outline-none border border-gray-100 p-1 rounded-md'
+                    cols={5}
+                />
+                <Button
+                    priority='high'
+                    classes={{
+                        content: "flex justify-center gap-x-2.5 items-center text-[14px] font-medium capitalize"
+                    }}
+                    className={cn(
+                        "bg-blue-600 px-6 py-2 rounded-full text-white border ",
+                        "border-blue-600 hover_bg-blue-700 hover_border-blue-700 focus-visible_outline-none"
+                    )}
+                >
+                    <Send
+                        size="24"
+                        className='text-white'
+                    />
+                </Button>
+            </div>
+        </>
+    )
+}
+
+const LoginComponent = () => (
+    <>
+        <SignIn
+            classes={{
+                root: 'gap-sm grid justify-items-stretch xs_!p-0',
+                title: 'hidden',
+            }}
+            showSocialLogin={false}
+        />
+        <Link
+            to={'/sign-in'}
+            className={cn(
+                // 'text-[16px] text-blue-600 font-medium w-full border border-blue-600 block py-2 px-6 rounded-full text-center mt-4',
+                // 'hover_bg-blue-600 hover_text-white'
+                'text-blue-600 underline mt-2 block text-center'
+            )}
+        >
+            <FormattedMessage
+                id={'liveChat.otherMethod'}
+                defaultMessage={"Try Other Method"}
+            />
+        </Link>
+    </>
+)
+
+const liveChat = (props) => {
+    const { open, setOpen, chatData } = props;
+    const [{ isSignedIn }] = useUserContext();
+
+    const dataTabs =
+        [
+            {
+                id: isSignedIn ? 'login-chat' : 'guest-chat',
+                title: isSignedIn ? 'Login Chat' : 'Guest Chat',
+                content: <ChatContentComponent chatData={chatData} />
+            },
+            {
+                id: !isSignedIn ? 'login-chat' : 'guest-chat',
+                title: !isSignedIn ? 'Login Chat' : 'Guest Chat',
+                content: isSignedIn ? <ChatContentComponent chatData={chatData} /> : <LoginComponent />
+            }
+        ];
+
+    return (
+        <>
+            <div
+                className={cn(
+                    'bg-white flex flex-col w-full max-w-[380px] h-[520px] fixed right-6 animate-anima-slide-up z-50 shadow-type-1',
+                    open ? 'animate-anima-slide-up bottom-0' : 'animate-anima-slide-down bottom-[-468px]'
+                )}
+            >
+                <div
+                    className='bg-darkblue-900 p-4 rounded-t-md cursor-pointer flex justify-between items-center'
+                    onClick={() => setOpen(!open)}
+                >
+                    <span className='text-white font-medium'>
+                        <FormattedMessage
+                            id={'chat.ChatWith'}
+                            defaultMessage={
+                                'Chat with Gundam Info'
+                            }
+                        />
+                    </span>
+                    <span>
+                        <ArrowSquareDown
+                            size="14"
+                            className={
+                                cn(
+                                    'transition-all text-white',
+                                    open ? 'rotate-180' : '',
+                                )
+                            }
+                        />
+                    </span>
+
+                </div>
+                <div
+                    className={cn(
+                        'border border-gray-100 p-4 w-full h-full flex flex-col gap-3',
+                        'max-h-[468px]'
+                    )}
+                >
+                    <Tabs
+                        data={dataTabs}
+                        tabContentWrapperClassName='!p-0 h-full'
+                        hasContent
+                        tabWrapperClassName='justify-around'
+                        rootClassName="mb-0"
+                        tabTitleClassName="pt-0 pb-2 text-[12px]"
+                    />
+                </div>
+            </div>
+            <style jsx>
+                {`
+                    .chat-container::-webkit-scrollbar {
+                        width: 8px;
+                        border-radius: 5px;
+                    }
+                    
+                    .chat-container::-webkit-scrollbar-track {
+                        background: #f2f2f2;
+                        border-radius: 8px;
+                    }
+                    
+                    .chat-container::-webkit-scrollbar-thumb {
+                        background-color: #c3c3c3;
+                        border-radius: 20px;
+                        border: 2px solid #f2f2f2;
+                    }
+                `}
+            </style>
+        </>
+    )
+}
+
+export default liveChat

package/src/components/SellerCountry/sellerCountry.js

@@ -44,7 +44,7 @@ const SellerCountry = props => {
         <Field
             id={classes.root}
             label={formatMessage({ id: translationId, defaultMessage: label })}
-            classes={{ root: classes.root }}
+        // classes={{ root: classes.root }}
         >
             <Select {...selectProps} id={classes.root} />
         </Field>

package/src/components/SellerDetail/sellerDetail.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useSeller } from '@riosst100/pwa-marketplace/src/talons/Seller/useSeller';
 import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
@@ -19,6 +19,9 @@ import {
     Shop,
 } from 'iconsax-react';
 import Image from '@magento/venia-ui/lib/components/Image';
+import LiveChat from '@riosst100/pwa-marketplace/src/components/LiveChat';
+import Button from '@magento/venia-ui/lib/components/Button';
+import cn from 'classnames';
 
 const SellerDetail = props => {
     const talonProps = useSeller({
@@ -63,6 +66,11 @@ const SellerDetail = props => {
             }
         ];
 
+    const [openChat, setOpenChat] = useState(false);
+    const toggleChat = () => {
+        setOpenChat(!openChat);
+    }
+
     return (
         <div className=' py-8'>
             <Slider seller={seller} rootClassname='mb-[30px]' />
@@ -105,14 +113,33 @@ const SellerDetail = props => {
                                     </div>
                                 </div>
                             </button>
-                            <button class="flex items-center justify-center gap-[5px] xs_p-[11px] lg_px-[20px] lg_py-[8px] relative bg-[#280135] rounded-[30px] border border-solid border-[#280135]">
+                            {/* <button class="flex items-center justify-center gap-[5px] xs_p-[11px] lg_px-[20px] lg_py-[8px] relative bg-[#280135] rounded-[30px] border border-solid border-[#280135]">
                                 <div class="flex items-center justify-center gap-[10px] relative">
                                     <Message color='#FFFFFF' size={14} variant="Outline" className='stroke-[#FFFFFF]' />
                                     <div class="relative xs_hidden lg_flex w-fit font-medium text-[#fff] text-base tracking-[0] leading-[20px] whitespace-nowrap">
                                         Chat With Seller
                                     </div>
                                 </div>
-                            </button>
+                            </button> */}
+                            <Button
+                                priority='high'
+                                classes={{
+                                    content: "flex justify-center gap-x-2.5 items-center text-[14px] font-medium capitalize"
+                                }}
+                                className={cn(
+                                    "bg-darkblue-900 px-6 py-2 rounded-full text-white border",
+                                    "border-darkblue-900 hover_bg-blue-900 hover_border-blue-900 focus-visible_outline-none"
+                                )}
+                                onClick={toggleChat}
+                            >
+                                <Message color='#FFFFFF' size={14} variant="Outline" className='stroke-[#FFFFFF]' />
+                                <span>
+                                    <FormattedMessage
+                                        id={'seller.chatWithSeller'}
+                                        defaultMessage={'Chat With Seller'}
+                                    />
+                                </span>
+                            </Button>
                             <button class="flex items-center justify-center gap-[5px] p-[11px] relative bg-white rounded-[30px] overflow-hidden border border-solid border-[#6243fa]">
                                 <Heart color='#6243FA' size={14} variant="Outline" className='stroke-[#6243FA]' />
                             </button>
@@ -143,6 +170,10 @@ const SellerDetail = props => {
                 hasContent
                 tabWrapperClassName='xl_gap-x-[60px]'
             />
+            <LiveChat
+                open={openChat}
+                setOpen={setOpenChat}
+            />
         </div>
     )
 }

package/src/components/ShopBy/shopBy.js

@@ -85,8 +85,9 @@ const ShopBy = props => {
     //     virtualCategoryFilters
     // } = talonProps;
     
-    const [active, setActive] = useState('all');
-
+    const [active, setActive] = useState('all')
+    const [activeTab, setActiveTab] = useState('all');
+    const [activeFilter, setActiveFilter] = useState('');
     const [searchQuery, setSearchQuery] = useState('');
 
     const { search } = useLocation();
@@ -106,7 +107,7 @@ const ShopBy = props => {
 
     const classes = useStyle(defaultClasses);
 
-    const talonProps = useShopBy({ searchQuery, active, setActive, currentSort, categoryId, shopby });
+    const talonProps = useShopBy({ activeFilter, searchQuery, active, setActive, currentSort, categoryId, shopby });
 
     const { error, loading, dataResult, categoryUrlSuffix, categoryUrlKey, productType, filteredAvailableGroups, availableGroups, attributeData, alpha, category, activeFilters } = talonProps;
 
@@ -230,10 +231,97 @@ const ShopBy = props => {
     
     const title = attributeData ? (attributeData.attribute_code == "sc_baseball_parallel" ? "Parallel Sets" : (attributeData.attribute_code == "sc_baseball_inserts" ? "Insert Sets" : attributeData.label)) : "Shop By"
 
+    let availableFilterOption = [];
+
+    if (shopby == "vehicles_make" || shopby == "vehicles_brands") {
+        availableFilterOption = [
+            {
+                'code': 'vehicles_diecast',
+                'value': 'Cars',
+            },
+            {
+                'code': 'vehicles_diecast',
+                'value': 'Formula Racing'
+            },
+            {
+                'code': 'vehicles_diecast',
+                'value': 'Motorsport'
+            },
+            {
+                'code': 'vehicles_diecast',
+                'value': 'Aircraft'
+            },
+            {
+                'code': 'vehicles_diecast',
+                'value': 'Bikes'
+            },
+            {
+                'code': 'vehicles_diecast',
+                'value': 'Military'
+            },
+            {
+                'code': 'vehicles_diecast',
+                'value': 'Transport'
+            },
+            {
+                'code': 'vehicles_diecast',
+                'value': 'Emergency Services'
+            },
+            {
+                'code': 'vehicles_diecast',
+                'value': 'Heavy Machinery'
+            },
+            {
+                'code': 'vehicles_diecast',
+                'value': 'TV/Movies'
+            }
+        ];
+    }
+
+    const handleActiveTab = (val) => {
+        setActiveTab(val);
+        setActive('all');
+        setActiveFilter('');
+
+        setSearchQuery('')
+    }
+
+    const handleActiveFilter = (val) => {
+        setActiveFilter(val);
+
+        setActive('all');
+
+        setSearchQuery('')
+    }
+
     return (
         <Fragment>
             <StoreTitle>{title}</StoreTitle>
             <Breadcrumbs categoryId={categoryId} customPage={title} currentFilter={activeFilters} />
+            {availableFilterOption.length ? 
+                <ul className={classes.nav}>
+                    {availableFilterOption.map((filter, index) => (
+                        <li className={classes.nav_item}>
+                            <button
+                                onClick={() => {
+                                    handleActiveFilter(filter.code + '|' + filter.value)
+                                }}
+                            >
+                                {activeFilter == filter.code + '|' + filter.value ? <b>{filter.value}</b> : filter.value}
+                            </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>
@@ -246,7 +334,7 @@ const ShopBy = props => {
                         <CustomSortBy sortProps={sortProps} availableSortMethods={availableSortBy} />
                     </div>
                 ) : ''}
-                {shopby != "trains_gauge" && shopby != "vehicles_scale" && shopby != "lego_theme" && shopby != "lego_subtheme" && shopby != "lego_interest" && shopby != "lego_age_level" && productType != "expansion-sets" ? (
+                {shopby != "vehicles_year" && shopby != "trains_gauge" && shopby != "vehicles_scale" && shopby != "lego_theme" && shopby != "lego_subtheme" && shopby != "lego_interest" && shopby != "lego_age_level" && productType != "expansion-sets" ? (
                     <>
                         <section className='single_list-indexing-container relative m-auto pt-5'>
                             <ul className='flex gap-2 justify-center flex-wrap'>

package/src/components/ShopBy/shopBy.module.css

@@ -6,6 +6,28 @@
     margin-top: 20px;
 }
 
+.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;
+}
+
 .tabs {
     composes: flex from global;
     composes: flex-wrap from global;

package/src/components/ShopByVehicles/shopByVehicles.js

@@ -127,8 +127,7 @@ const ShopByVehicles = props => {
 
                 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">
-                        <b>{set_name}</b>
-                        <div style={{"fontSize": "12px"}}>589 Parts, 2 Minifigures</div>
+                        {set_name}
                     </Link>
                 </li>)
             })

package/src/components/ShopByVehicles/shopByVehicles.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/SocialLogin/img/facebook.svg

@@ -0,0 +1,3 @@
+<svg width="13" height="24" viewBox="0 0 13 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.35849 23.9999V13.0523H12.0332L12.5833 8.78588H8.35849V6.06189C8.35849 4.82668 8.70154 3.98482 10.473 3.98482L12.7322 3.98377V0.167932C12.3413 0.116127 11.0003 0 9.44014 0C6.18279 0 3.95274 1.98818 3.95274 5.63957V8.786H0.268555V13.0524H3.95263V24L8.35849 23.9999Z" fill="#3C5A9A"/>
+</svg>

package/src/components/SocialLogin/img/google.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.7602 12.2667C23.7602 11.28 23.6802 10.56 23.5069 9.81334H12.2402V14.2666H18.8535C18.7202 15.3733 18.0002 17.04 16.4002 18.1599L16.3778 18.309L19.9401 21.0687L20.1869 21.0933C22.4535 19 23.7602 15.92 23.7602 12.2667Z" fill="#4285F4"/>
+<path d="M12.2402 24C15.4802 24 18.2002 22.9333 20.1869 21.0933L16.4002 18.1599C15.3869 18.8666 14.0269 19.3599 12.2402 19.3599C9.06692 19.3599 6.37361 17.2667 5.41352 14.3733L5.27279 14.3853L1.56864 17.252L1.5202 17.3866C3.49352 21.3066 7.54686 24 12.2402 24Z" fill="#34A853"/>
+<path d="M5.41352 14.3733C5.16019 13.6267 5.01358 12.8266 5.01358 12C5.01358 11.1733 5.16019 10.3733 5.40019 9.62666L5.39348 9.46764L1.64292 6.55491L1.5202 6.61328C0.706906 8.23997 0.240234 10.0667 0.240234 12C0.240234 13.9333 0.706906 15.7599 1.5202 17.3866L5.41352 14.3733Z" fill="#FBBC05"/>
+<path d="M12.2402 4.63997C14.4935 4.63997 16.0135 5.6133 16.8802 6.42669L20.2669 3.12C18.1869 1.18667 15.4802 0 12.2402 0C7.54686 0 3.49352 2.69331 1.5202 6.61328L5.40019 9.62666C6.37361 6.73333 9.06692 4.63997 12.2402 4.63997Z" fill="#EB4335"/>
+</svg>

package/src/components/SocialLogin/img/instagram.svg

@@ -0,0 +1,27 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_310_25353)">
+<path d="M16.5 0H7.5C5.51088 0 3.60322 0.790176 2.1967 2.1967C0.790176 3.60322 0 5.51088 0 7.5L0 16.5C0 18.4891 0.790176 20.3968 2.1967 21.8033C3.60322 23.2098 5.51088 24 7.5 24H16.5C18.4891 24 20.3968 23.2098 21.8033 21.8033C23.2098 20.3968 24 18.4891 24 16.5V7.5C24 5.51088 23.2098 3.60322 21.8033 2.1967C20.3968 0.790176 18.4891 0 16.5 0ZM21.75 16.5C21.75 19.395 19.395 21.75 16.5 21.75H7.5C4.605 21.75 2.25 19.395 2.25 16.5V7.5C2.25 4.605 4.605 2.25 7.5 2.25H16.5C19.395 2.25 21.75 4.605 21.75 7.5V16.5Z" fill="url(#paint0_linear_310_25353)"/>
+<path d="M12 6C10.4087 6 8.88258 6.63214 7.75736 7.75736C6.63214 8.88258 6 10.4087 6 12C6 13.5913 6.63214 15.1174 7.75736 16.2426C8.88258 17.3679 10.4087 18 12 18C13.5913 18 15.1174 17.3679 16.2426 16.2426C17.3679 15.1174 18 13.5913 18 12C18 10.4087 17.3679 8.88258 16.2426 7.75736C15.1174 6.63214 13.5913 6 12 6ZM12 15.75C11.0058 15.7488 10.0527 15.3533 9.34966 14.6503C8.64666 13.9473 8.25119 12.9942 8.25 12C8.25 9.9315 9.933 8.25 12 8.25C14.067 8.25 15.75 9.9315 15.75 12C15.75 14.067 14.067 15.75 12 15.75Z" fill="url(#paint1_linear_310_25353)"/>
+<path d="M18.4499 6.34998C18.8914 6.34998 19.2494 5.99203 19.2494 5.55048C19.2494 5.10892 18.8914 4.75098 18.4499 4.75098C18.0083 4.75098 17.6504 5.10892 17.6504 5.55048C17.6504 5.99203 18.0083 6.34998 18.4499 6.34998Z" fill="url(#paint2_linear_310_25353)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_310_25353" x1="2.196" y1="21.804" x2="21.804" y2="2.196" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFC107"/>
+<stop offset="0.507" stop-color="#F44336"/>
+<stop offset="0.99" stop-color="#9C27B0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_310_25353" x1="7.758" y1="16.242" x2="16.242" y2="7.758" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFC107"/>
+<stop offset="0.507" stop-color="#F44336"/>
+<stop offset="0.99" stop-color="#9C27B0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_310_25353" x1="17.8844" y1="6.11598" x2="19.0154" y2="4.98498" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFC107"/>
+<stop offset="0.507" stop-color="#F44336"/>
+<stop offset="0.99" stop-color="#9C27B0"/>
+</linearGradient>
+<clipPath id="clip0_310_25353">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/components/SocialLogin/img/wechat.svg

@@ -0,0 +1,15 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_310_25358)">
+<path d="M24.5 15C24.5 11.6865 21.1415 9 17 9C12.8585 9 9.5 11.6865 9.5 15C9.5 18.3135 12.8585 21 17 21C17.681 21 18.329 20.904 18.9575 20.7675L23 22.5L21.602 19.7055C23.354 18.6075 24.5 16.9185 24.5 15Z" fill="#8BC34A"/>
+<path d="M9.5 1.5C4.529 1.5 0.5 4.8585 0.5 9C0.5 11.388 1.847 13.506 3.9365 14.877L2.75 17.25L5.9825 15.8655C6.6755 16.1115 7.3955 16.314 8.165 16.4085C8.057 15.9467 8.00165 15.4742 8 15C8 10.8645 12.0365 7.5 17 7.5C17.4545 7.5 17.8985 7.5375 18.3365 7.5915C17.5445 4.1235 13.892 1.5 9.5 1.5Z" fill="#8BC34A"/>
+<path d="M6.5 7.125C7.12132 7.125 7.625 6.62132 7.625 6C7.625 5.37868 7.12132 4.875 6.5 4.875C5.87868 4.875 5.375 5.37868 5.375 6C5.375 6.62132 5.87868 7.125 6.5 7.125Z" fill="#FAFAFA"/>
+<path d="M12.5 7.125C13.1213 7.125 13.625 6.62132 13.625 6C13.625 5.37868 13.1213 4.875 12.5 4.875C11.8787 4.875 11.375 5.37868 11.375 6C11.375 6.62132 11.8787 7.125 12.5 7.125Z" fill="#FAFAFA"/>
+<path d="M14.75 14.625C15.3713 14.625 15.875 14.1213 15.875 13.5C15.875 12.8787 15.3713 12.375 14.75 12.375C14.1287 12.375 13.625 12.8787 13.625 13.5C13.625 14.1213 14.1287 14.625 14.75 14.625Z" fill="#FAFAFA"/>
+<path d="M19.25 14.625C19.8713 14.625 20.375 14.1213 20.375 13.5C20.375 12.8787 19.8713 12.375 19.25 12.375C18.6287 12.375 18.125 12.8787 18.125 13.5C18.125 14.1213 18.6287 14.625 19.25 14.625Z" fill="#FAFAFA"/>
+</g>
+<defs>
+<clipPath id="clip0_310_25358">
+<rect width="24" height="24" fill="white" transform="translate(0.5)"/>
+</clipPath>
+</defs>
+</svg>

package/src/components/SocialLogin/img/weibo.svg

@@ -0,0 +1,7 @@
+<svg width="30" height="24" viewBox="0 0 30 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.5224 11.5056C22.1038 11.3785 21.8165 11.2963 22.0341 10.7465C23.6374 6.47504 19.614 5.94561 15.4072 7.74702C15.4072 7.74702 14.4551 8.16146 14.7013 7.41063C15.1651 5.9128 15.0954 4.66152 14.3732 3.93522C12.732 2.2899 8.3618 3.9967 4.6153 7.7432C1.81267 10.5455 0.183594 13.5202 0.183594 16.0931C0.183594 21.009 6.49062 24.0002 12.6578 24.0002C20.7455 24.0002 26.1253 19.3019 26.1253 15.572C26.1294 13.315 24.2295 12.0347 22.5224 11.5056Z" fill="#E6162D"/>
+<path d="M12.6788 22.2356C7.75458 22.7239 3.50349 20.496 3.18366 17.2665C2.84663 9.47054 19.8201 7.79591 21.0086 15.502C21.3329 18.7356 17.5988 21.7514 12.6788 22.2356Z" fill="#F1F1F1"/>
+<path d="M27.7877 2.59835C25.8343 0.431877 22.954 -0.392857 20.295 0.173212C19.6796 0.304455 19.2897 0.911936 19.4209 1.52324C19.5522 2.13868 20.1555 2.52859 20.7709 2.39735C24.9433 1.47577 28.6089 5.54337 27.2666 9.59473C26.8403 11.0311 28.9358 11.7099 29.433 10.2965C30.2683 7.71336 29.7433 4.7626 27.7877 2.59835Z" fill="#FF9933"/>
+<path d="M24.3692 9.67119C24.8862 9.83525 25.436 9.5562 25.6042 9.03919C26.5408 6.29039 23.9847 3.45559 21.156 4.11118C20.6265 4.22203 20.2901 4.74732 20.401 5.27644C20.516 5.80588 21.0372 6.14227 21.5621 6.02727C22.1941 5.89188 22.8835 6.08875 23.347 6.60162C23.8108 7.11863 23.9379 7.8204 23.7369 8.43585C23.5731 8.94904 23.8522 9.503 24.3692 9.67119Z" fill="#FF9933"/>
+<path d="M13.1668 13.0196C10.8238 12.4083 8.17699 13.5777 7.15953 15.6416C6.12137 17.7466 7.12672 20.0854 9.49038 20.8487C11.9442 21.6406 14.8331 20.426 15.8382 18.1569C16.8311 15.9331 15.5919 13.6475 13.1668 13.0196ZM11.3778 18.3952C10.3428 20.0552 7.50771 19.1811 8.60799 17.1681C9.6366 15.5362 12.4424 16.3826 11.3778 18.3952ZM12.9492 16.3845C12.5947 17.0276 11.4813 16.7263 11.8824 15.9576C12.2385 15.3256 13.327 15.6136 12.9492 16.3845Z" fill="black"/>
+</svg>

package/src/components/SocialLogin/index.js

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