Skip to content

Commit

Permalink
chore(ONYX-1435): fix phone number validation on SWA submission flow (#…
Browse files Browse the repository at this point in the history 
…14956)

* chore: make phone number on submission flow required for quest users

* chore

* chore: make phine input not mandatory again
  • Loading branch information
@dariakoko
dariakoko authored Dec 11, 2024
1 parent 0f290e8 commit 3fe6c6f
Show file tree
Hide file tree
Showing 5 changed files with 159 additions and 159 deletions.
28 changes: 13 additions & 15 deletions src/Apps/Order/Routes/Shipping/Components/AddressModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,21 +154,19 @@ export const AddressModal: FC<React.PropsWithChildren<AddressModalProps>> = ({
console.time("AddressModal")
}, [])
return (
<>
<Formik<FormValues>
validateOnMount
validationSchema={validationSchema}
enableReinitialize={true}
initialValues={initialValues}
onSubmit={handleSubmit}
>
<AddressModalForm
addressModalAction={addressModalAction}
onClose={closeModal}
onDeleteAddress={handleDeleteAddress}
/>
</Formik>
</>
<Formik<FormValues>
validateOnMount
validationSchema={validationSchema}
enableReinitialize={true}
initialValues={initialValues}
onSubmit={handleSubmit}
>
<AddressModalForm
addressModalAction={addressModalAction}
onClose={closeModal}
onDeleteAddress={handleDeleteAddress}
/>
</Formik>
)
}

Expand Down
174 changes: 86 additions & 88 deletions src/Apps/Sell/Routes/AdditionalRoutes/FrameRoute.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,9 @@ interface FrameRouteProps {
submission: FrameRoute_submission$key
}

export const FrameRoute: React.FC<React.PropsWithChildren<FrameRouteProps>> = props => {
export const FrameRoute: React.FC<React.PropsWithChildren<
FrameRouteProps
>> = props => {
const submission = useFragment(FRAGMENT, props.submission)
const artwork = submission.myCollectionArtwork
const { actions } = useSellFlowContext()
Expand Down Expand Up @@ -96,107 +98,103 @@ export const FrameRoute: React.FC<React.PropsWithChildren<FrameRouteProps>> = pr
validateOnMount
validationSchema={Schema}
>
{({ handleChange, setFieldValue, values }) => {
return (
<SubmissionLayout>
<SubmissionStepTitle>Frame</SubmissionStepTitle>
{({ handleChange, setFieldValue, values }) => (
<SubmissionLayout>
<SubmissionStepTitle>Frame</SubmissionStepTitle>

<Join separator={<Spacer y={4} />}>
<Join separator={<Spacer y={2} />}>
<Text variant="sm-display">Is the work framed?</Text>

<GridColumns>
<Column span={[4, 3]}>
<RadioGroup
flexDirection="row"
onSelect={option => setFieldValue("isFramed", option)}
defaultValue={values.isFramed}
justifyContent="flex-start"
data-testid="signature-radio"
>
<Radio
value={true}
label="Yes"
data-testid="signature-radio-yes"
/>

<Spacer x={2} />

<Radio
value={false}
label="No"
data-testid="signature-radio-no"
/>
</RadioGroup>
</Column>
</GridColumns>
</Join>

{values.isFramed && (
<>
<GridColumns>
<Column span={[6, 6]}>
<LabeledInput
label={values.framedMetric}
onChange={handleChange}
name="framedWidth"
title="Width"
defaultValue={values.framedWidth || ""}
data-testid="width-input"
/>
</Column>

<Join separator={<Spacer y={4} />}>
<Join separator={<Spacer y={2} />}>
<Text variant="sm-display">Is the work framed?</Text>
<Column span={[6, 6]}>
<LabeledInput
label={values.framedMetric}
onChange={handleChange}
name="framedHeight"
title="Height"
defaultValue={values.framedHeight || ""}
data-testid="height-input"
/>
</Column>

<Column span={[6, 6]}>
<LabeledInput
label={values.framedMetric}
onChange={handleChange}
name="framedDepth"
title="Depth"
defaultValue={values.framedDepth || ""}
data-testid="depth-input"
/>
</Column>
</GridColumns>

<GridColumns>
<Column span={[4, 3]}>
<RadioGroup
flexDirection="row"
onSelect={option => setFieldValue("isFramed", option)}
defaultValue={values.isFramed}
justifyContent="flex-start"
data-testid="signature-radio"
onSelect={option => setFieldValue("framedMetric", option)}
defaultValue={values.framedMetric}
justifyContent="space-between"
>
<Radio
value={true}
label="Yes"
data-testid="signature-radio-yes"
value="cm"
label="cm"
data-testid="dimensionsMetric-radio-cm"
/>

<Spacer x={2} />

<Radio
value={false}
label="No"
data-testid="signature-radio-no"
/>
<Radio value="in" label="in" />
</RadioGroup>
</Column>
</GridColumns>
</Join>

{values.isFramed && (
<>
<GridColumns>
<Column span={[6, 6]}>
<LabeledInput
label={values.framedMetric}
onChange={handleChange}
name="framedWidth"
title="Width"
defaultValue={values.framedWidth || ""}
data-testid="width-input"
/>
</Column>

<Column span={[6, 6]}>
<LabeledInput
label={values.framedMetric}
onChange={handleChange}
name="framedHeight"
title="Height"
defaultValue={values.framedHeight || ""}
data-testid="height-input"
/>
</Column>

<Column span={[6, 6]}>
<LabeledInput
label={values.framedMetric}
onChange={handleChange}
name="framedDepth"
title="Depth"
defaultValue={values.framedDepth || ""}
data-testid="depth-input"
/>
</Column>
</GridColumns>

<GridColumns>
<Column span={[4, 3]}>
<RadioGroup
flexDirection="row"
onSelect={option =>
setFieldValue("framedMetric", option)
}
defaultValue={values.framedMetric}
justifyContent="space-between"
>
<Radio
value="cm"
label="cm"
data-testid="dimensionsMetric-radio-cm"
/>
<Spacer x={2} />
<Radio value="in" label="in" />
</RadioGroup>
</Column>
</GridColumns>
</>
)}
</Join>
</>
)}
</Join>

<DevDebug />
</SubmissionLayout>
)
}}
<DevDebug />
</SubmissionLayout>
)}
</Formik>
)
}
4 changes: 3 additions & 1 deletion src/Apps/Sell/Routes/DetailsRoute.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,9 @@ interface DetailsRouteProps {
submission: DetailsRoute_submission$key
}

export const DetailsRoute: React.FC<React.PropsWithChildren<DetailsRouteProps>> = props => {
export const DetailsRoute: React.FC<React.PropsWithChildren<
DetailsRouteProps
>> = props => {
const { actions } = useSellFlowContext()
const submission = useFragment(FRAGMENT, props.submission)

Expand Down
104 changes: 54 additions & 50 deletions src/Apps/Sell/Routes/PhoneNumberRoute.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ import { SubmissionLayout } from "Apps/Sell/Components/SubmissionLayout"
import { SubmissionStepTitle } from "Apps/Sell/Components/SubmissionStepTitle"
import { useFocusInput } from "Apps/Sell/Hooks/useFocusInput"
import { useSellFlowContext } from "Apps/Sell/SellFlowContext"
import { useValidatePhoneNumber } from "Components/PhoneNumberInput"
import { validatePhoneNumber } from "Components/PhoneNumberInput"
import { COUNTRY_CODES, countries } from "Utils/countries"
import { PhoneNumberRoute_me$key } from "__generated__/PhoneNumberRoute_me.graphql"
import { PhoneNumberRoute_submission$key } from "__generated__/PhoneNumberRoute_submission.graphql"
import { Formik, useFormikContext } from "formik"
import { Formik } from "formik"
import * as React from "react"
import { graphql, useFragment } from "react-relay"
import * as Yup from "yup"
Expand All @@ -33,7 +33,21 @@ const FRAGMENT_ME = graphql`
`

const Schema = Yup.object().shape({
phoneNumber: Yup.string().trim(),
userPhone: Yup.string().test({
name: "phone-number-is-valid",
message: "The phone number does not seem to be valid.",
test: (national, context) => {
// by default phine number is not required
if (!national || !context.parent.userPhone) {
return true
}

return validatePhoneNumber({
national: national ? `${national}` : `${context.parent.userPhone}`,
regionCode: `${context.parent.phoneNumberRegionCode}`,
})
},
}),
})

interface FormValues {
Expand All @@ -46,12 +60,16 @@ interface PhoneNumberRouteProps {
me: PhoneNumberRoute_me$key
}

export const PhoneNumberRoute: React.FC<React.PropsWithChildren<PhoneNumberRouteProps>> = props => {
export const PhoneNumberRoute: React.FC<React.PropsWithChildren<
PhoneNumberRouteProps
>> = props => {
const submission = useFragment(FRAGMENT, props.submission)
const me = useFragment(FRAGMENT_ME, props.me)

const { actions } = useSellFlowContext()

const focusedInputRef = useFocusInput()

const initialValues: FormValues = {
userPhone:
submission.userPhoneNumber?.display ?? me?.phoneNumber?.display ?? "",
Expand Down Expand Up @@ -80,52 +98,38 @@ export const PhoneNumberRoute: React.FC<React.PropsWithChildren<PhoneNumberRoute
validateOnMount
validationSchema={Schema}
>
<SubmissionLayout>
<SubmissionStepTitle>Add phone number</SubmissionStepTitle>

<PhoneNumberRouteForm />

<DevDebug />
</SubmissionLayout>
{({ handleChange, setFieldValue, values, errors }) => {
return (
<SubmissionLayout>
<SubmissionStepTitle>Add phone number</SubmissionStepTitle>

<Join separator={<Spacer y={4} />}>
<Text variant={["xs", "sm"]} textColor={["black60", "black100"]}>
Add your number (optional) so an Artsy Advisor can contact you
directly by phone.
</Text>

<PhoneInput
ref={focusedInputRef}
options={countries}
onSelect={option => {
setFieldValue("phoneNumberRegionCode", option.value)
}}
name="userPhone"
onChange={handleChange}
dropdownValue={values.phoneNumberRegionCode}
defaultValue={values.userPhone}
placeholder="(000) 000 0000"
data-testid="phone-input"
type="tel"
error={errors.userPhone}
/>
</Join>

<DevDebug />
</SubmissionLayout>
)
}}
</Formik>
)
}

const PhoneNumberRouteForm: React.FC<React.PropsWithChildren<unknown>> = () => {
const focusedInputRef = useFocusInput()
const { values, handleChange, setFieldValue } = useFormikContext<FormValues>()

const isPhoneNumberValid = useValidatePhoneNumber({
national: values.userPhone,
regionCode: values.phoneNumberRegionCode,
})

return (
<Join separator={<Spacer y={4} />}>
<Text variant={["xs", "sm"]} textColor={["black60", "black100"]}>
Add your number (optional) so an Artsy Advisor can contact you directly
by phone.
</Text>

<PhoneInput
ref={focusedInputRef}
options={countries}
onSelect={option => {
setFieldValue("phoneNumberRegionCode", option.value)
}}
name="userPhone"
onChange={handleChange}
dropdownValue={values.phoneNumberRegionCode}
defaultValue={values.userPhone}
placeholder="(000) 000 0000"
data-testid="phone-input"
type="tel"
error={
!!values.userPhone &&
!isPhoneNumberValid &&
"The phone number does not seem to be valid."
}
/>
</Join>
)
}
Loading

0 comments on commit 3fe6c6f

Please sign in to comment.