perf: styled and environment variable

apps/storefront/.env.development

@@ -1,2 +1,3 @@
 NODE_ENV=development
-VITE_B2B_BASIC_URL=https://dev-v2.bundleb2b.net
+VITE_B2B_BASIC_URL=https://dev-v2.bundleb2b.net
+VITE_B2B_STOREHASH='rtmh8fqr05'

apps/storefront/package.json

@@ -5,7 +5,6 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "build:staging": "tsc && vite build --mode staging",
     "lint": "eslint \"**/*.{ts,tsx}\" --fix",
     "preview": "vite preview"
   },

apps/storefront/src/components/spin/B3Sping.tsx

@@ -7,7 +7,7 @@ import {
   SpinCenter,
   SpinTip,
   SpinContext,
-} from './style'
+} from './styled'
 
 interface B3SpingProps {
   isSpinning: Boolean | undefined,

apps/storefront/src/constants/index.ts

@@ -9,3 +9,9 @@ export const FILE_UPLOAD_ACCEPT_TYPE = [
   'text/csv',
   'image/*',
 ]
+
+export const re = {
+  phone: /^((\(\+?[0-9]{0,2}\))|(\+?[0-9]{0,2}))?(\s|-)?((\([0-9]{1,5}\))|([0-9]{1,5}))((\s|-)?)([0-9]{2,4}){0,3}((\s|-)?)[0-9]{4}$/,
+  email: /^([A-Za-z0-9.!#$%&'*+-/=?^_`{|}~])+@([A-Za-z0-9\-.])+\.([A-Za-z][A-Za-z0-9]{1,64})$/,
+  password: /^(?=.*[0-9].*)(?=.*[A-Za-z].*).{7,}$/,
+}

apps/storefront/src/pages/registered/RegisterComplete.tsx

@@ -5,7 +5,6 @@ import {
   Box,
   Alert,
 } from '@mui/material'
-import styled from '@emotion/styled'
 import { useForm } from 'react-hook-form'
 
 import { RegisteredContext } from './context/RegisteredContext'
@@ -18,9 +17,9 @@ import {
   RegisterFileds, CustomFieldItems, Base64, validatorRules,
 } from './config'
 
-const InformationFourLabels = styled('h4')(() => ({
-  marginBottom: '20px',
-}))
+import { storeHash } from '../../utils'
+
+import { InformationFourLabels, TipContent } from './styled'
 
 interface RegisterCompleteProps {
   handleBack: () => void,
@@ -30,12 +29,6 @@ interface RegisterCompleteProps {
 
 type RegisterCompleteList = Array<any> | undefined
 
-const TipContent = styled('div')(() => ({
-  display: 'flex',
-  flexDirection: 'row',
-  alignItems: 'center',
-}))
-
 export default function RegisterComplete(props: RegisterCompleteProps) {
   const { handleBack, activeStep, handleNext } = props
 
@@ -168,7 +161,7 @@ export default function RegisterComplete(props: RegisterCompleteProps) {
     bcFields.addresses = [addresses]
 
     const userItem: any = {
-      storeHash: (window as any).b3?.setting?.storeHash || 'rtmh8fqr05',
+      storeHash,
       method: 'post',
       url: '/v3/customers',
       data: [bcFields],
@@ -181,7 +174,7 @@ export default function RegisterComplete(props: RegisterCompleteProps) {
     const b2bFields: any = {}
 
     b2bFields.customerId = customerId || ''
-    b2bFields.storeHash = (window as any).b3?.setting?.storeHash || 'rtmh8fqr05'
+    b2bFields.storeHash = storeHash
     if (companyInformation) {
       companyInformation.forEach((item: any) => {
         b2bFields[item.name] = item?.default || ''

apps/storefront/src/pages/registered/RegisterContent.tsx

@@ -10,14 +10,13 @@ import RegisterComplete from './RegisterComplete'
 
 interface RegisterContentProps {
   activeStep: number,
-  handleReset: () => void,
   handleBack:() => void,
   handleNext: () => void,
 }
 
 export default function RegisterContent(props: RegisterContentProps) {
   const {
-    activeStep, handleReset, handleBack, handleNext,
+    activeStep, handleBack, handleNext,
   } = props
 
   const renderStep = (step: number): ReactNode => {

apps/storefront/src/pages/registered/Registered.tsx

@@ -2,8 +2,6 @@ import {
   useEffect, useState, useContext,
 } from 'react'
 
-import styled from '@emotion/styled'
-
 import { ImageListItem } from '@mui/material'
 import { getBCRegisterCustomFields } from '../../shared/service/bc'
 import {
@@ -28,18 +26,7 @@ import {
   addressInformationFields,
 } from './config'
 
-const RegisteredContainer = styled('div')({
-  padding: '20px 20px',
-})
-
-const RegisteredImage = styled('div')({
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'center',
-  alignItems: 'center',
-  width: '100%',
-  height: '150px',
-})
+import { RegisteredContainer, RegisteredImage } from './styled'
 
 export default function Registered() {
   const [activeStep, setActiveStep] = useState(0)

apps/storefront/src/pages/registered/RegisteredAccount.tsx

@@ -12,8 +12,6 @@ import {
 
 import { useForm } from 'react-hook-form'
 
-import styled from '@emotion/styled'
-
 import { B3CustomForm } from '../../components'
 import RegisteredStepButton from './component/RegisteredStepButton'
 import RegisteredSigleCheckBox from './component/RegisteredSigleCheckBox'
@@ -24,25 +22,9 @@ import { RegisterFileds, CustomFieldItems } from './config'
 
 import { getB2BCompanyUserInfo } from '../../shared/service/b2b'
 
-const InformationLabels = styled('h3')(() => ({
-  marginBottom: '20px',
-}))
-
-const InformationFourLabels = styled('h4')(() => ({
-  marginBottom: '20px',
-}))
-
-const TipContent = styled('div')(() => ({
-  display: 'flex',
-  flexDirection: 'row',
-  alignItems: 'center',
-}))
-
-const TipLogin = styled('div')(() => ({
-  cursor: 'pointer',
-  color: '#1976d2',
-  borderBottom: '1px solid #1976d2',
-}))
+import {
+  InformationLabels, InformationFourLabels, TipContent, TipLogin,
+} from './styled'
 
 interface RegisteredAccountProps {
   handleBack: () => void,

apps/storefront/src/pages/registered/RegisteredDetail.tsx

@@ -10,7 +10,6 @@ import {
   Alert,
 } from '@mui/material'
 
-import styled from '@emotion/styled'
 import { useForm } from 'react-hook-form'
 
 import { B3CustomForm } from '../../components'
@@ -27,24 +26,9 @@ import {
   Base64,
 } from './config'
 
-import { validateBCCompanyExtraFields } from '../../shared/service/b2b'
+import { InformationFourLabels, AddressBox, TipContent } from './styled'
 
-const InformationFourLabels = styled('h4')(() => ({
-  marginBottom: '20px',
-}))
-
-const AddressBox = styled(Box)(() => ({
-  '& .MuiGrid-item': {
-    alignItems: 'flex-end',
-    display: 'flex',
-  },
-}))
-
-const TipContent = styled('div')(() => ({
-  display: 'flex',
-  flexDirection: 'row',
-  alignItems: 'center',
-}))
+import { validateBCCompanyExtraFields } from '../../shared/service/b2b'
 
 export default function RegisteredDetail(props: any) {
   const { handleBack, handleNext, activeStep } = props

apps/storefront/src/pages/registered/RegisteredFinish.tsx

@@ -4,15 +4,11 @@ import {
   Box,
   Button,
 } from '@mui/material'
-import styled from '@emotion/styled'
 import { useNavigate } from 'react-router-dom'
 
 import { RegisteredContext } from './context/RegisteredContext'
 
-const StyleTipContainer = styled('p')(() => ({
-  textAlign: 'center',
-  margin: '2rem auto',
-}))
+import { StyleTipContainer } from './styled'
 
 export default function RegisteredFinish() {
   const { state, dispatch } = useContext(RegisteredContext)

apps/storefront/src/pages/registered/config.ts

@@ -1,3 +1,5 @@
+import { re } from '../../constants'
+
 export interface CustomFieldItems {
   [key: string]: any
 }
@@ -29,12 +31,6 @@ export type ContactInformationItems = Array<RegisterFileds>
 
 export const steps = ['Account', 'Details', 'Finish']
 
-export const re = {
-  phone: /^((\(\+?[0-9]{0,2}\))|(\+?[0-9]{0,2}))?(\s|-)?((\([0-9]{1,5}\))|([0-9]{1,5}))((\s|-)?)([0-9]{2,4}){0,3}((\s|-)?)[0-9]{4}$/,
-  email: /^([A-Za-z0-9.!#$%&'*+-/=?^_`{|}~])+@([A-Za-z0-9\-.])+\.([A-Za-z][A-Za-z0-9]{1,64})$/,
-  password: /^(?=.*[0-9].*)(?=.*[A-Za-z].*).{7,}$/,
-}
-
 const companyExtraFieldsType = ['text', 'multiline', 'number', 'dropdown']
 
 export const Base64 = {

apps/storefront/src/pages/registered/styled.ts

@@ -0,0 +1,46 @@
+import styled from '@emotion/styled'
+
+export const StyleTipContainer = styled('p')(() => ({
+  textAlign: 'center',
+  margin: '2rem auto',
+}))
+
+export const InformationLabels = styled('h3')(() => ({
+  marginBottom: '20px',
+}))
+
+export const InformationFourLabels = styled('h4')(() => ({
+  marginBottom: '20px',
+}))
+
+export const AddressBox = styled('div')(() => ({
+  '& .MuiGrid-item': {
+    alignItems: 'flex-end',
+    display: 'flex',
+  },
+}))
+
+export const TipContent = styled('div')(() => ({
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+}))
+
+export const TipLogin = styled('div')(() => ({
+  cursor: 'pointer',
+  color: '#1976d2',
+  borderBottom: '1px solid #1976d2',
+}))
+
+export const RegisteredContainer = styled('div')({
+  padding: '20px 20px',
+})
+
+export const RegisteredImage = styled('div')({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: '100%',
+  height: '150px',
+})

apps/storefront/src/shared/service/b2b/graphql/register.ts

@@ -1,15 +1,13 @@
 import { B3Request } from '../../request/b3Fetch'
 
 import {
-  convertArrayToGraphql,
+  convertArrayToGraphql, storeHash,
 } from '../../../../utils'
 
 interface CustomFieldItems {
   [key: string]: any
 }
 
-const storeHash = (window as any).b3?.setting?.storeHash || 'rtmh8fqr05'
-
 const getCompanyExtraFields = () => `{
   companyExtraFields(storeHash: "${storeHash}") {
     fieldName,

apps/storefront/src/shared/service/request/base.ts

@@ -1,4 +1,4 @@
-const B2B_BASIC_URL = import.meta.env.VITE_B2B_BASIC_URL
+const B2B_BASIC_URL = (window as any).b3?.setting?.B2B_URL || import.meta.env.VITE_B2B_BASIC_URL
 
 enum RequestType {
   B2BGraphql = 'B2BGraphql',

apps/storefront/src/utils/basicConfig.ts

@@ -0,0 +1,5 @@
+const storeHash = (window as any).b3?.setting.storeHash || import.meta.env.VITE_B2B_STOREHASH
+
+export {
+  storeHash,
+}

apps/storefront/src/utils/index.ts

@@ -3,7 +3,10 @@ import {
   convertObjectToGraphql,
 } from './graphqlDataConvert'
 
+import { storeHash } from './basicConfig'
+
 export {
   convertArrayToGraphql,
   convertObjectToGraphql,
+  storeHash,
 }

apps/storefront/tsconfig.json

@@ -2,7 +2,7 @@
   "exclude": ["node_modules"],
   "extends": "@b3/tsconfig/vite.json",
   "compilerOptions": {
-    "outDir": "dist",
+    "outDir": "dist"
   },
   "include": ["src"]
 }

package.json

@@ -8,7 +8,6 @@
   ],
   "scripts": {
     "build": "turbo run build",
-    "build:staging": "turbo run build:staging",
     "dev": "turbo run dev --parallel",
     "lint": "turbo run lint",
     "prepare": "husky install"