Skip to content

Commit

Permalink
feat: add storefront framework
Browse files Browse the repository at this point in the history
  • Loading branch information
kris liu authored and kris-liu-smile committed Nov 22, 2022
1 parent c42c636 commit 6cfe13d
Show file tree
Hide file tree
Showing 44 changed files with 1,633 additions and 462 deletions.
5 changes: 3 additions & 2 deletions apps/storefront/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,9 @@
<script>
window.B3 = {
setting: {
'store_hash': 'rtmh8fqr05',
'b2b_url': 'https://dev-v2.bundleb2b.net/api',
'store_hash': 'al0cfwwv8r',
'b2b_url': 'https://staging-v2.bundleb2b.net',
'b2b_socket_url': 'https://staging-v2.bundleb2b.net',
'captcha_setkey': '6LeGJw8hAAAAAPL0Tt91gEU8gv3gFwGeadqd-rkG',
'is_local_debugging': true,
},
Expand Down
115 changes: 28 additions & 87 deletions apps/storefront/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,20 +30,24 @@ import {
getChannelId,
loginInfo,
getCurrentCustomerInfo,
getLogo,
} from '@/utils'

import {
GlobaledContext,
} from '@/shared/global'

import {
Layout,
RegisteredCloseButton,
getB2BRegisterLogo,
} from '@/shared/service/b2b'

import {
ThemeFrame,
B3RenderRouter,
} from '@/components'
import {
RegisteredProvider,
} from '@/pages/registered/context/RegisteredContext'
// import {
// RegisteredProvider,
// } from '@/pages/registered/context/RegisteredContext'

const FONT_URL = 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap'
const CUSTOM_STYLES = `
Expand All @@ -58,22 +62,6 @@ const {
overflow: defaultOverflow,
} = document.body.style

const Home = lazy(() => import('./pages/Home'))

const Form = lazy(() => import('./pages/Form'))

const Registered = lazy(() => import('./pages/registered/Registered'))

const RegisteredBCToB2B = lazy(() => import('./pages/registered/RegisteredBCToB2B'))

const Login = lazy(() => import('./pages/login/Login'))

const Order = lazy(() => import('./pages/order/Order'))

const Dashboard = lazy(() => import('./pages/dashboard/Dashboard'))

const ForgotPassword = lazy(() => import('./pages/login/ForgotPassword'))

export default function App() {
const [{
isOpen,
Expand Down Expand Up @@ -161,6 +149,24 @@ export default function App() {
init()
}, [])

useEffect(() => {
const init = async () => {
const {
quoteConfig,
} = await getB2BRegisterLogo()
const logo = getLogo(quoteConfig)

dispatch({
type: 'common',
payload: {
logo,
},
})
}

init()
}, [])

const createConvertB2BNavNode = () => {
const convertB2BNavNode = document.createElement('li')
convertB2BNavNode.className = 'navUser-item navUser-convert-b2b'
Expand Down Expand Up @@ -207,72 +213,7 @@ export default function App() {
>

{isOpen ? (
<Suspense fallback={(
<Box sx={{
display: 'flex',
width: '100%',
height: '100vh',
justifyContent: 'center',
alignItems: 'center',
}}
>
Loading...
</Box>
)}
>
<Routes>
<Route
path="/"
element={(
<Layout>
<RegisteredCloseButton setOpenPage={setOpenPage} />
<Outlet />
</Layout>
)}
>
<Route
path="/"
element={<Home />}
/>
<Route
path="form"
element={<Form />}
/>
<Route
path="login"
element={<Login />}
/>
<Route
path="forgotpassword"
element={<ForgotPassword />}
/>
<Route
path="registeredbctob2b"
element={(
<RegisteredProvider>
<RegisteredBCToB2B setOpenPage={setOpenPage} />
</RegisteredProvider>
)}
/>
<Route
path="registered"
element={(
<RegisteredProvider>
<Registered setOpenPage={setOpenPage} />
</RegisteredProvider>
)}
/>
<Route
path="order"
element={<Order />}
/>
<Route
path="dashboard"
element={<Dashboard />}
/>
</Route>
</Routes>
</Suspense>
<B3RenderRouter setOpenPage={setOpenPage} />
) : null}
</ThemeFrame>
</div>
Expand Down
38 changes: 38 additions & 0 deletions apps/storefront/src/components/B3Card.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import {
Dispatch,
SetStateAction,
ReactNode,
} from 'react'

import type {
OpenPageState,
} from '@b3/hooks'

import {
CardContainer,
} from './styled'

import {
RegisteredCloseButton,
} from './RegisteredCloseButton'

interface B3CardProps {
setOpenPage?: Dispatch<SetStateAction<OpenPageState>>,
children: ReactNode;
}

export const B3Card = (props:B3CardProps) => {
const {
setOpenPage,
children,
} = props

return (
<CardContainer>
{
setOpenPage && <RegisteredCloseButton setOpenPage={setOpenPage} />
}
{ children }
</CardContainer>
)
}
24 changes: 12 additions & 12 deletions apps/storefront/src/components/B3CustomForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@ import {
Grid,
} from '@mui/material'
import {
B3TextField,
B3Checkbox,
B3RadioGroup,
B3Select,
B3Picker,
B3FileUpload,
B3ControlTextField,
B3ControlCheckbox,
B3ControlRadioGroup,
B3ControlSelect,
B3ControlPicker,
B3ControlFileUpload,
} from './form'

import B3UI from './form/ui'
Expand All @@ -33,15 +33,15 @@ export function B3CustomForm(props: B3UI.B3CustomFormProps) {
>
<>
{['text', 'number', 'password', 'multiline'].includes(fieldType) && (
<B3TextField
<B3ControlTextField
{...field}
errors={errors}
control={control}
/>
)}
{
['checkbox'].includes(fieldType) && (
<B3Checkbox
<B3ControlCheckbox
{...field}
errors={errors}
control={control}
Expand All @@ -51,7 +51,7 @@ export function B3CustomForm(props: B3UI.B3CustomFormProps) {
}
{
['radio'].includes(fieldType) && (
<B3RadioGroup
<B3ControlRadioGroup
{...field}
errors={errors}
control={control}
Expand All @@ -60,7 +60,7 @@ export function B3CustomForm(props: B3UI.B3CustomFormProps) {
}
{
['dropdown'].includes(fieldType) && (
<B3Select
<B3ControlSelect
{...field}
errors={errors}
control={control}
Expand All @@ -70,7 +70,7 @@ export function B3CustomForm(props: B3UI.B3CustomFormProps) {
}
{
['date'].includes(fieldType) && (
<B3Picker
<B3ControlPicker
{...field}
errors={errors}
control={control}
Expand All @@ -80,7 +80,7 @@ export function B3CustomForm(props: B3UI.B3CustomFormProps) {
}
{
['files'].includes(fieldType) && (
<B3FileUpload
<B3ControlFileUpload
{...field}
errors={errors}
control={control}
Expand Down
101 changes: 101 additions & 0 deletions apps/storefront/src/components/B3DropDown.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
import ListItemButton from '@mui/material/ListItemButton'
import ListItemText from '@mui/material/ListItemText'
import ExpandLess from '@mui/icons-material/ExpandLess'
import ExpandMore from '@mui/icons-material/ExpandMore'
import Menu from '@mui/material/Menu'
import MenuItem from '@mui/material/MenuItem'

import {
Box,
} from '@mui/material'

import {
useState,
ReactElement,
MouseEvent,
} from 'react'

type configProps = {
name: string,
key: string | number,
}

interface B3DropDownProps<T> {
width?: string,
list: Array<T>,
config?: configProps,
title: string,
handleItemClick: (arg0: T) => void,
}

export const B3DropDown: <T>(props: B3DropDownProps<T>) => ReactElement = ({
width,
list,
config,
title,
handleItemClick,
}) => {
const [open, setOpen] = useState<null | HTMLElement>(null)

const handleClick = (event: MouseEvent<HTMLElement>) => {
setOpen(event.currentTarget)
}

const handleCloseMenuClick = () => {
setOpen(null)
}

const keyName = config?.name || 'name'

return (
<Box
sx={{
width: width || '200px',
}}
>
<ListItemButton
onClick={handleClick}
>
<ListItemText primary={title} />
{open ? <ExpandLess /> : <ExpandMore />}
</ListItemButton>
<Menu
anchorEl={open}
open={Boolean(open)}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'center',
}}
id="customized-menu"
keepMounted
onClose={handleCloseMenuClick}
>

{
list.length && list.map((item) => {
const name = (item as any)[keyName]
return (
<MenuItem
sx={{
width: width || '200px',
}}
key={name}
onClick={() => {
handleCloseMenuClick()
handleItemClick(item)
}}
>
<ListItemText primary={name} />
</MenuItem>
)
})
}

</Menu>
</Box>
)
}
Loading

0 comments on commit 6cfe13d

Please sign in to comment.