Skip to content

Commit

Permalink
feat: add register complete
Browse files Browse the repository at this point in the history
  • Loading branch information
kris liu authored and kris liu committed Jul 18, 2022
1 parent cc67a3c commit 0b2fcb6
Show file tree
Hide file tree
Showing 11 changed files with 417 additions and 18 deletions.
3 changes: 2 additions & 1 deletion apps/storefront/src/components/form/B3TextField.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import Form from './ui'
export const B3TextField = ({ control, errors, ...rest } : Form.B3UIProps) => {
const {
fieldType, name, default: defaultValue, required, label, validate, variant, rows,
min, max, minLength, maxLength, fullWidth, muiTextFieldProps,
min, max, minLength, maxLength, fullWidth, muiTextFieldProps, disabled,
} = rest

const fieldsProps = {
Expand All @@ -28,6 +28,7 @@ export const B3TextField = ({ control, errors, ...rest } : Form.B3UIProps) => {
label,
key: name,
rows,
disabled,
multiline: fieldType === 'multiline',
variant: variant || 'filled',
fullWidth: fullWidth || true,
Expand Down
218 changes: 216 additions & 2 deletions apps/storefront/src/pages/registered/RegisterComplete.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,219 @@
export default function RegisterComplete() {
import {
useContext, useEffect, MouseEvent, useState,
} from 'react'
import {
Box,
Alert,
} from '@mui/material'
import styled from '@emotion/styled'
import { useForm } from 'react-hook-form'

import { RegisteredContext } from './context/RegisteredContext'
import RegisteredStepButton from './component/RegisteredStepButton'
import { B3CustomForm } from '../../components'

import { createBCCompanyUser } from '../../shared/service/b2b'

import { RegisterFileds, CustomFieldItems } from './config'

const InformationFourLabels = styled('h4')(() => ({
marginBottom: '20px',
}))

interface RegisterCompleteProps {
handleBack: () => void,
handleNext: () => void,
activeStep: number,
}

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

const [personalInfo, setPersonalInfo] = useState<Array<CustomFieldItems>>([])
const [errorMessage, setErrorMessage] = useState<String>('')

const {
control, handleSubmit, formState: { errors },
} = useForm({
mode: 'all',
})
const { state } = useContext(RegisteredContext)

const {
contactInformation, bcContactInformationFields, passwordInformation, accountType,
additionalInformation, addressBasicFields, addressExtraFields,
} = state

const emailName = accountType === '1' ? 'workEmailAddress' : 'emailAddress'
const list:RegisterCompleteList = accountType === '1' ? contactInformation : bcContactInformationFields
useEffect(() => {
if (!accountType) return
const newPasswordInformation: Array<CustomFieldItems> = []
let emailItem: CustomFieldItems = {}
if (list && list.length) {
const emailFileds = list.find((item: RegisterFileds) => item.name === emailName) || {}
emailItem = { ...emailFileds }
}
emailItem.label = 'email'
emailItem.name = 'email'
emailItem.disabled = true
newPasswordInformation.push(emailItem)

if (passwordInformation?.length) newPasswordInformation.push(passwordInformation[0])
newPasswordInformation.push({
default: '',
required: true,
label: 'Confirm Password',
name: 'Confirm Password',
id: 'Confirm Password',
fieldType: 'password',
xs: 12,
})

setPersonalInfo(newPasswordInformation)
}, [contactInformation, bcContactInformationFields, accountType])

const getBCFieldsValue = (data: CustomFieldItems) => {
const bcFields: CustomFieldItems = {}

bcFields.authentication = {
force_password_reset: false,
new_password: data.password,
}
if (list) {
list.forEach((item: any) => {
if (item.name === 'lastName') {
bcFields.last_name = item.default
}
if (item.name === 'firstName') {
bcFields.first_name = item.default
}
if (item.name === 'phoneNumber') {
bcFields.phone = item?.default || ''
}
if (item.name === 'companyName') {
bcFields.company = item?.default || ''
}
if (item.name === emailName) {
bcFields.email = item.default
}
})

bcFields.form_fields = []

if (additionalInformation && (additionalInformation as Array<CustomFieldItems>).length) {
additionalInformation.forEach((field: CustomFieldItems) => {
bcFields.form_fields.push({
name: field.name,
value: field.default,
})
})
}
}

if (addressBasicFields) {
bcFields.addresses = {}
addressBasicFields.forEach((field: any) => {
if (field.name === 'country') {
bcFields.addresses.country_code = field.default
}
if (field.name === 'address1') {
bcFields.addresses.address1 = field.default
}
if (field.name === 'address2') {
bcFields.addresses.address2 = field.default
}
if (field.name === 'city') {
bcFields.addresses.city = field.default
}
if (field.name === 'state_or_province') {
bcFields.addresses.state_or_province = field.default
}
if (field.name === 'postal_code') {
bcFields.addresses.country_code = field.default
}
})
}
bcFields.addresses.first_name = bcFields.first_name
bcFields.addresses.last_name = bcFields.last_name

bcFields.addresses.form_fields = []
if (addressExtraFields && addressExtraFields.length) {
addressExtraFields.forEach((field: any) => {
bcFields.addresses.form_fields.push({
name: field.name,
value: field.default,
})
})
}

const userItem: any = {
storeHash: 'rtmh8fqr05',
method: 'post',
url: '/v3/customers',
data: [bcFields],
}

createBCCompanyUser(userItem)
}

const getB2BFieldsValue = (data: CustomFieldItems) => {}

const handleCompleted = (event: MouseEvent) => {
handleSubmit((data: CustomFieldItems) => {
if (accountType === '2') {
getBCFieldsValue(data)
} else {
getB2BFieldsValue(data)
}
})(event)
}

return (
<div>RegisterComplete</div>
<Box
sx={{
pl: 10,
pr: 10,
mt: 2,
}}
>
{
errorMessage && (
<Alert
severity="error"
>
<TipContent>
{errorMessage}
</TipContent>
</Alert>
)
}
<Box>
<InformationFourLabels>Complete Registration</InformationFourLabels>
{
personalInfo && (
<B3CustomForm
formFields={personalInfo}
errors={errors}
control={control}
/>
)
}
</Box>

<RegisteredStepButton
handleBack={handleBack}
activeStep={activeStep}
handleNext={handleCompleted}
/>
</Box>
)
}
8 changes: 6 additions & 2 deletions apps/storefront/src/pages/registered/RegisterContent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -42,12 +42,16 @@ export default function RegisterContent(props: RegisterContentProps) {

case 2:
return (
<RegisteredFinish />
<RegisterComplete
activeStep={activeStep}
handleBack={handleBack}
handleNext={handleNext}
/>
)

case 3:
return (
<RegisterComplete />
<RegisteredFinish />
)

default:
Expand Down
3 changes: 3 additions & 0 deletions apps/storefront/src/pages/registered/Registered.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,8 @@ export default function Registered() {
}
})

const filterPasswordInformation = customerAccount.length && customerAccount.filter((field: RegisterFileds) => !field.custom && field.fieldType === 'password')
const newPasswordInformation: Array<RegisterFileds> = conversionDataFormat(filterPasswordInformation)
if (dispatch) {
dispatch({
type: 'all',
Expand All @@ -85,6 +87,7 @@ export default function Registered() {
addressBasicFields: [...addressInformationFields],
addressExtraFields: [...addressExtraFields],
countryList: [...countries],
passwordInformation: [...newPasswordInformation],
},
})
}
Expand Down
12 changes: 3 additions & 9 deletions apps/storefront/src/pages/registered/RegisteredAccount.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,6 @@ export default function RegisteredAccount(props: RegisteredAccountProps) {

const captchaRef = useRef<any>(null)

console.log(activeStep, 'activeStep')

const {
contactInformation, accountType, additionalInformation, bcContactInformationFields,
emailMarketingNewsletter,
Expand All @@ -83,12 +81,8 @@ export default function RegisteredAccount(props: RegisteredAccountProps) {
}

const handleAccountToDetail = async (event: MouseEvent) => {
try {
const token = await captchaRef.current.executeAsync()
console.log(token, 'token')
} catch (error) {
console.log(error, 'error')
}
// await captchaRef.current.executeAsync()

handleSubmit((data: CustomFieldItems) => {
const email = accountType === '1' ? data.email : data.workEmailAddress
getB2BCompanyUserInfo(email).then(({ companyUserInfo: { userType } }: any) => {
Expand Down Expand Up @@ -216,7 +210,7 @@ export default function RegisteredAccount(props: RegisteredAccountProps) {
}}
>
<ReCAPTCHA
sitekey={(window as any).b3?.setting?.ReCAPTCHASiteKey || '6LdXPfsgAAAAANGvcY88glhKn1RJCUmvJfrB1AkY'}
sitekey="6Lcct_sgAAAAACfgXLKQxiOvHwBQ0JZOqcX9A6-F"
ref={captchaRef}
size="invisible"
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ interface RegisterState {
addressExtraFields?: Array<RegisterFileds> | Array<[]>,
countryList?: Array<Country>,
stateList?: Array<State>,
passwordInformation?: Array<RegisterFileds> | Array<[]>,
}
interface RegisterAction {
type: string,
Expand All @@ -34,6 +35,7 @@ const initState = {
contactInformation: [],
bcContactInformation: [],
additionalInformation: [],
passwordInformation: [],
accountType: '',
emailMarketingNewsletter: false,
companyInformation: [],
Expand Down
9 changes: 9 additions & 0 deletions apps/storefront/src/shared/service/b2b/api/register.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { B3Request } from '../../request/b3Fetch'

interface CustomFieldItems {
[key: string]: any
}

const storeHash = (window as any).b3?.setting?.storeHash || 'rtmh8fqr05'

export const createBCCompanyUser = (data: CustomFieldItems): CustomFieldItems => B3Request.post('/api/v2/proxy', data)
4 changes: 4 additions & 0 deletions apps/storefront/src/shared/service/b2b/graphql/register.ts
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,10 @@ const getCountries = () => `{
}
}`

// const createB2BCompanyUser = () => `{

// }`

export const getB2BCompanyUserInfo = (email: string): CustomFieldItems => B3Request.graphqlB2B({ query: getCompanyUserInfo(email) })

export const getB2BRegisterLogo = (): CustomFieldItems => B3Request.graphqlB2B({ query: getRegisterLogo() })
Expand Down
5 changes: 5 additions & 0 deletions apps/storefront/src/shared/service/b2b/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,14 @@ import {
getB2BCountries,
} from './graphql/register'

import {
createBCCompanyUser,
} from './api/register'

export {
getB2BRegisterCustomFields,
getB2BRegisterLogo,
getB2BCompanyUserInfo,
getB2BCountries,
createBCCompanyUser,
}
3 changes: 2 additions & 1 deletion apps/storefront/src/shared/service/request/b3Fetch.ts
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,8 @@ function request<T>(path: string, config?: T) {
},
...config,
}
return b3Fetch(path, init)
const url = `https://dev-v2.bundleb2b.net/api${path}`
return b3Fetch(url, init)
}

function graphqlRequest<T, Y>(type: string, data: T, config?: Y) {
Expand Down
Loading

0 comments on commit 0b2fcb6

Please sign in to comment.