diff --git a/apps/storefront/index.html b/apps/storefront/index.html index 39cc1d75..e51ccf17 100644 --- a/apps/storefront/index.html +++ b/apps/storefront/index.html @@ -14,12 +14,8 @@ 'is_local_debugging': true, }, 'dom.checkoutRegisterParentElement': "#b2bParent", - b3Context: { - channelId: 1, - customer: { - email: 'xxxxx.com' - } - } + 'dom.openB3Checkout': 'childB2b', + 'before_login_goto_page': '/' } @@ -80,7 +76,7 @@

Ugly Cornerstone Store Theme with Weird CSS

if ($('#b2bParent .navUser-action').length > 0) { $('#b2bParent .navUser-action').remove() } else { - $("#b2bParent").append('testRegister') + $("#b2bParent").append('testRegister') } }) diff --git a/apps/storefront/src/App.tsx b/apps/storefront/src/App.tsx index f0641c1a..0e80a7f2 100644 --- a/apps/storefront/src/App.tsx +++ b/apps/storefront/src/App.tsx @@ -2,6 +2,7 @@ import { useEffect, lazy, Suspense, + useContext, } from 'react' import { @@ -18,6 +19,10 @@ import { useB3AppOpen, } from '@b3/hooks' +import { + GlobaledContext, +} from '@/shared/global' + import { Layout, RegisteredCloseButton, @@ -34,16 +39,6 @@ body { font-family: Roboto; }; ` -// const HeaderContainer = styled('div')(() => ({ -// display: 'flex', -// alignItems: 'center', -// justifyContent: 'flex-end', -// marginBottom: '1rem', -// })) - -// const PageContainer = styled('div')(() => ({ -// padding: '40px', -// })) const { height: defaultHeight, @@ -70,6 +65,10 @@ export default function App() { isOpen: false, }) + const { + dispatch, + } = useContext(GlobaledContext) + useEffect(() => { if (isOpen) { document.body.style.height = '100%' @@ -91,10 +90,23 @@ export default function App() { useEffect(() => { const { pathname, - hash, + href, } = window.location - if (/login.php/.test(pathname) || (hash === '#/login' && pathname === '/checkout')) { + dispatch({ + type: 'common', + payload: { + isCheckout: pathname === '/checkout', + }, + }) + + if (/login.php/.test(pathname) && !href.includes('change_password')) { + dispatch({ + type: 'common', + payload: { + isCloseGotoBCHome: true, + }, + }) setOpenPage({ isOpen: true, openUrl: '/login', diff --git a/apps/storefront/src/components/RegisteredCloseButton.tsx b/apps/storefront/src/components/RegisteredCloseButton.tsx index 59350262..76fdc701 100644 --- a/apps/storefront/src/components/RegisteredCloseButton.tsx +++ b/apps/storefront/src/components/RegisteredCloseButton.tsx @@ -5,14 +5,17 @@ import type { import { Dispatch, SetStateAction, + useContext, } from 'react' import { Box, } from '@mui/material' + +import globalB3 from '@b3/global-b3' import { - B3SStorage, -} from '@/utils' + GlobaledContext, +} from '@/shared/global' import { CloseButton, @@ -27,9 +30,15 @@ export function RegisteredCloseButton(props: CloseButtonProps) { setOpenPage, } = props + const { + state: { + isCheckout, + isCloseGotoBCHome, + }, + } = useContext(GlobaledContext) + const handleCloseForm = () => { - const isGotoBCHome = B3SStorage.get('isGotoBCHome') || '' - if (isGotoBCHome) { + if (isCloseGotoBCHome || (isCheckout && document.getElementById(globalB3['dom.openB3Checkout']))) { window.location.href = '/' } else { setOpenPage({ diff --git a/apps/storefront/src/components/form/B3TextField.tsx b/apps/storefront/src/components/form/B3TextField.tsx index cefc7e9e..9d883e03 100644 --- a/apps/storefront/src/components/form/B3TextField.tsx +++ b/apps/storefront/src/components/form/B3TextField.tsx @@ -44,15 +44,22 @@ export const B3TextField = ({ const b3Lang = useB3Lang() + let requiredText = '' + if (fieldType === 'password') { + requiredText = b3Lang('intl.global.validate.password.required') + } else { + requiredText = b3Lang('intl.global.validate.required', { + label: labelName || label, + }) + } + const fieldsProps = { type: fieldType, name, key: name, defaultValue, rules: { - required: required && b3Lang('intl.global.validate.required', { - label: labelName || labelName, - }), + required: required && requiredText, validate: validate && ((v: string) => validate(v, b3Lang)), }, control, diff --git a/apps/storefront/src/locales/en-US/global.ts b/apps/storefront/src/locales/en-US/global.ts index 831e0557..901b7d2f 100644 --- a/apps/storefront/src/locales/en-US/global.ts +++ b/apps/storefront/src/locales/en-US/global.ts @@ -7,6 +7,7 @@ export default { 'intl.global.button.finish': 'FINISH', 'intl.global.validate.required': '{label} is required', + 'intl.global.validate.password.required': 'You must enter a password.', 'intl.global.fileUpload.defaultText': 'Drag & drop file here or click here browse', 'intl.global.fileUpload.typeNotSupport': '{name} file type not support', diff --git a/apps/storefront/src/locales/en-US/users.ts b/apps/storefront/src/locales/en-US/users.ts index 2e918e12..e30baec6 100644 --- a/apps/storefront/src/locales/en-US/users.ts +++ b/apps/storefront/src/locales/en-US/users.ts @@ -30,7 +30,7 @@ export default { 'intl.user.register.registeredAccount.contactInformation': 'Contact Information', 'intl.user.register.registeredAccount.additionalInformation': 'Additional Information', - 'intl.user.register.validatorRules.email': 'Please enter a valid email address', + 'intl.user.register.validatorRules.email': 'Please use a valid email address, such as user@example.com.', 'intl.user.register.validatorRules.phoneNumber': 'Please enter a valid phone number', 'intl.user.register.validatorRules.number': 'Please enter a valid integer number', 'intl.user.register.validatorRules.max': 'Please do not exceed {max}', diff --git a/apps/storefront/src/main.tsx b/apps/storefront/src/main.tsx index 953c9b2c..85469bbf 100644 --- a/apps/storefront/src/main.tsx +++ b/apps/storefront/src/main.tsx @@ -5,6 +5,10 @@ import { LangProvider, } from '@b3/lang' +import { + GlobalProvider, +} from '@/shared/global' + import App from './App' import B3ThemeProvider from './theme' @@ -29,8 +33,10 @@ ReactDOM.createRoot(container).render( locales={locales} supportLang={SUPPORT_LANGUAGE} > - - - + + + + + , ) diff --git a/apps/storefront/src/pages/index.tsx b/apps/storefront/src/pages/index.tsx index b5d3f2a5..336ce12b 100644 --- a/apps/storefront/src/pages/index.tsx +++ b/apps/storefront/src/pages/index.tsx @@ -1,15 +1 @@ -// export { -// Home, -// } from './Home' -// export { -// Form, -// } from './Form' - -// export { -// Login, -// ForgotPassword, -// } from './login' -// export { -// Registered, RegisteredBCToB2B, -// } from './registered' export {} diff --git a/apps/storefront/src/pages/login/ForgotPassword.tsx b/apps/storefront/src/pages/login/ForgotPassword.tsx index 9f83e31b..f6b5e0c1 100644 --- a/apps/storefront/src/pages/login/ForgotPassword.tsx +++ b/apps/storefront/src/pages/login/ForgotPassword.tsx @@ -116,7 +116,6 @@ const ForgotPassword = () => { > { const init = async () => { try { @@ -147,17 +160,29 @@ export default function Login() { if (loginFlag) setLoginFlag(loginFlag) if (loginFlag === '3') { - const loginTokenInfo = getloginTokenInfo(channelId) - const { - data: { - token, - }, - } = await getBCToken(loginTokenInfo) - B3SStorage.set('BcToken', token) + if (!BcToken) { + const loginTokenInfo = getloginTokenInfo(channelId) + const { + data: { + token, + }, + } = await getBCToken(loginTokenInfo) + B3SStorage.set('BcToken', token) + dispatch({ + type: 'common', + payload: { + BcToken: token, + }, + }) + } await bcLogoutLogin() - B3SStorage.set('isGotoBCHome', true) - } else { - B3SStorage.set('isGotoBCHome', false) + + dispatch({ + type: 'common', + payload: { + isCloseGotoBCHome: true, + }, + }) } setChannelId(getChannelId) @@ -219,7 +244,6 @@ export default function Login() { setLoading(true) setLoginAccount(data) - const isCheckout = B3SStorage.get('isCheckout') if (isCheckout) { try { await loginCheckout(data) @@ -235,6 +259,12 @@ export default function Login() { token, }, } = await getBCToken(loginTokenInfo) + dispatch({ + type: 'common', + payload: { + BcToken: token, + }, + }) B3SStorage.set('BcToken', token) const getBCFieldsValue = { @@ -247,7 +277,7 @@ export default function Login() { if (errors?.length || !bcData) { getforcePasswordReset(data.emailAddress) } else { - window.location.href = '/' + window.location.href = globalB3.before_login_goto_page } setLoading(false) @@ -292,10 +322,9 @@ export default function Login() { sx={{ mb: 2, mt: 2, - fontSize: '30px', - fontWeight: 'bold', display: 'flex', justifyContent: 'center', + fontSize: '28px', }} > {loginInfo.loginTitle} @@ -312,7 +341,7 @@ export default function Login() { }} > - {tipInfo(flag, loginAccount?.emailAddress || globalB3?.b3Context?.customer?.email || '')} + {tipInfo(flag, loginAccount?.emailAddress || '')} diff --git a/apps/storefront/src/pages/login/LoginPanel.tsx b/apps/storefront/src/pages/login/LoginPanel.tsx index cd506470..75e4fb16 100644 --- a/apps/storefront/src/pages/login/LoginPanel.tsx +++ b/apps/storefront/src/pages/login/LoginPanel.tsx @@ -34,23 +34,15 @@ const LoginPanel = (props: LoginPanelProps) => { background: '#F5F5F5', }} > - {/* - {loginInfo.createAccountPanelTittle} - */} - [ { name: 'emailAddress', - label: '', - labelName: lang('intl.user.login.loginText.emailAddress'), + label: lang('intl.user.login.loginText.emailAddress'), required: true, default: '', fieldType: 'text', @@ -77,8 +75,7 @@ export const getForgotPasswordFields = (lang: B3Lang) => [ export const getLoginFields = (lang: B3Lang) => [ { name: 'emailAddress', - label: '', - labelName: lang('intl.user.login.loginText.emailAddress'), + label: lang('intl.user.login.loginText.emailAddress'), required: true, default: '', fieldType: 'text', @@ -87,8 +84,7 @@ export const getLoginFields = (lang: B3Lang) => [ }, { name: 'password', - label: '', - labelName: lang('intl.user.login.loginText.password'), + label: lang('intl.user.login.loginText.password'), required: true, default: '', fieldType: 'password', @@ -132,7 +128,6 @@ export const sendEmail = (emailAddress: string) => { } export const getloginTokenInfo = (channelId: number) => { - console.log(globalB3, 'globalB3') const { origin, } = window.location diff --git a/apps/storefront/src/pages/login/index.ts b/apps/storefront/src/pages/login/index.ts index f4fbc005..336ce12b 100644 --- a/apps/storefront/src/pages/login/index.ts +++ b/apps/storefront/src/pages/login/index.ts @@ -1,9 +1 @@ -// import Login from './Login' -// import ForgotPassword from './ForgotPassword' - -// export { -// Login, -// ForgotPassword, -// } - export {} diff --git a/apps/storefront/src/pages/registered/index.ts b/apps/storefront/src/pages/registered/index.ts index a7235ce2..336ce12b 100644 --- a/apps/storefront/src/pages/registered/index.ts +++ b/apps/storefront/src/pages/registered/index.ts @@ -1,9 +1 @@ -// import Registered from './Registered' -// import RegisteredBCToB2B from './RegisteredBCToB2B' - -// export default { -// Registered, -// RegisteredBCToB2B, -// } - export {} diff --git a/apps/storefront/src/shared/global/context/Provider.tsx b/apps/storefront/src/shared/global/context/Provider.tsx new file mode 100644 index 00000000..6b595db6 --- /dev/null +++ b/apps/storefront/src/shared/global/context/Provider.tsx @@ -0,0 +1,34 @@ +import { + useReducer, + useMemo, +} from 'react' + +import { + GlobaledContext, + reducer, +} from './index' + +import { + GlobaledProviderProps, + initState, +} from './config' + +export function GlobalProvider(props: GlobaledProviderProps) { + const [state, + dispatch] = useReducer(reducer, initState) + + const { + children, + } = props + + const GlobalValue = useMemo(() => ({ + state, + dispatch, + }), [state]) + + return ( + + {children} + + ) +} diff --git a/apps/storefront/src/shared/global/context/config.ts b/apps/storefront/src/shared/global/context/config.ts new file mode 100644 index 00000000..045386d7 --- /dev/null +++ b/apps/storefront/src/shared/global/context/config.ts @@ -0,0 +1,33 @@ +import { + Dispatch, + ReactNode, +} from 'react' + +import { + B3SStorage, +} from '@/utils' + +export interface GlobalState { + isCheckout: boolean, + isCloseGotoBCHome: boolean, + BcToken: string, +} + +export const initState = { + isCheckout: false, + isCloseGotoBCHome: false, + BcToken: B3SStorage.get('BcToken') || '', +} + +export interface GlobalAction { + type: string, + payload: Partial +} +export interface GlobalContext { + state: GlobalState, + dispatch: Dispatch>, +} + +export interface GlobaledProviderProps { + children: ReactNode +} diff --git a/apps/storefront/src/shared/global/context/index.ts b/apps/storefront/src/shared/global/context/index.ts new file mode 100644 index 00000000..72ea6ce8 --- /dev/null +++ b/apps/storefront/src/shared/global/context/index.ts @@ -0,0 +1,27 @@ +import { + createContext, +} from 'react' + +import { + GlobalContext, + initState, + GlobalState, + GlobalAction, +} from './config' + +export const GlobaledContext = createContext({ + state: initState, + dispatch: () => {}, +}) + +export const reducer = (state: GlobalState, action: Partial) => { + switch (action.type) { + case 'common': + return { + ...state, + ...action.payload, + } + default: + return state + } +} diff --git a/apps/storefront/src/shared/global/index.ts b/apps/storefront/src/shared/global/index.ts new file mode 100644 index 00000000..c2900519 --- /dev/null +++ b/apps/storefront/src/shared/global/index.ts @@ -0,0 +1,12 @@ +import { + GlobaledContext, +} from './context' + +import { + GlobalProvider, +} from './context/Provider' + +export { + GlobaledContext, + GlobalProvider, +} diff --git a/apps/storefront/src/shared/service/b2b/api/login.ts b/apps/storefront/src/shared/service/b2b/api/login.ts index a52cf52c..dddb59f0 100644 --- a/apps/storefront/src/shared/service/b2b/api/login.ts +++ b/apps/storefront/src/shared/service/b2b/api/login.ts @@ -4,9 +4,6 @@ import { import { RequestType, } from '../../request/base' -// import { -// storeHash, -// } from '../../../../utils/basicConfig' interface CustomFieldItems { [key: string]: any diff --git a/apps/storefront/src/shared/service/bc/graphql/login.ts b/apps/storefront/src/shared/service/bc/graphql/login.ts index e8d4824d..21133ec8 100644 --- a/apps/storefront/src/shared/service/bc/graphql/login.ts +++ b/apps/storefront/src/shared/service/bc/graphql/login.ts @@ -2,11 +2,6 @@ import { B3Request, } from '../../request/b3Fetch' -// import { -// convertArrayToGraphql, -// storeHash, -// } from '../../../../utils' - interface CustomFieldItems { [key: string]: any } diff --git a/packages/global-b3/index.ts b/packages/global-b3/index.ts index 03826134..d89823d5 100644 --- a/packages/global-b3/index.ts +++ b/packages/global-b3/index.ts @@ -4,6 +4,7 @@ const globalB3 = { 'dom.registerElement': '[href^="/login.php"]', 'dom.registerUrl': '/registered', 'dom.checkoutRegisterParentElement': '.checkout-step--customer .checkout-view-content', + before_login_goto_page: '/', ...window.B3, } diff --git a/packages/hooks/index.ts b/packages/hooks/index.ts index 45dfdac2..41b7fb75 100644 --- a/packages/hooks/index.ts +++ b/packages/hooks/index.ts @@ -2,6 +2,10 @@ export { useB3AppOpen, } from './useB3AppOpen' +export { + useMutationObservable, +} from './useMutationObservable' + export type { OpenPageState, } from './useB3AppOpen' diff --git a/packages/hooks/useB3AppOpen.ts b/packages/hooks/useB3AppOpen.ts index 9d4202b2..9cf34efd 100644 --- a/packages/hooks/useB3AppOpen.ts +++ b/packages/hooks/useB3AppOpen.ts @@ -39,6 +39,12 @@ export const useB3AppOpen = (initOpenState: OpenPageState) => { } useLayoutEffect(() => { + if (globalB3['dom.openB3Checkout'] && document.getElementById(globalB3['dom.openB3Checkout'])) { + setOpenPage({ + isOpen: true, + openUrl: '/login', + }) + } if (document.querySelectorAll(globalB3['dom.registerElement']).length) { const registerArr = Array.from(document.querySelectorAll(globalB3['dom.registerElement'])) const handleTriggerClick = (e: MouseEvent) => { @@ -49,12 +55,6 @@ export const useB3AppOpen = (initOpenState: OpenPageState) => { const href = (e.target as any)?.href || '' const gotoUrl = getCurrentLoginUrl(href) - const { - pathname, - } = window.location - - window.sessionStorage.setItem('isCheckout', JSON.stringify(pathname === '/checkout')) - setOpenPage({ isOpen: true, openUrl: gotoUrl,