maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix missing phone data from location after booking (#1968)

This commit is contained in:
Syed Ali Shahbaz 2022-03-03 15:27:59 +05:30 committed by GitHub
parent b376ebae25
commit 0fb44887e3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
apps/web/components/booking/pages/BookingPage.tsx
View File

@ -251,7 +251,9 @@ const BookingPage = (props: BookingPageProps) => {
language: i18n.language,
rescheduleUid,
user: router.query.user,
location: getLocationValue(booking.locationType ? booking : { locationType: selectedLocation }),
location: getLocationValue(
booking.locationType ? booking : { ...booking, locationType: selectedLocation }
),
metadata,
customInputs: Object.keys(booking.customInputs || {}).map((inputId) => ({
label: props.eventType.customInputs.find((input) => input.id === parseInt(inputId))!.label,
@ -279,7 +281,7 @@ const BookingPage = (props: BookingPageProps) => {
<link rel="icon" href="/favicon.ico" />
</Head>
<CustomBranding val={props.profile.brandColor} />
<main className=" mx-auto my-0 max-w-3xl rounded-sm sm:my-24 sm:border sm:dark:border-gray-600">
<main className="mx-auto my-0 max-w-3xl rounded-sm sm:my-24 sm:border sm:dark:border-gray-600">
{isReady && (
<div className="overflow-hidden border border-gray-200 bg-white dark:border-0 dark:bg-neutral-900 sm:rounded-sm">
<div className="px-4 py-5 sm:flex sm:p-4">
@ -391,8 +393,14 @@ const BookingPage = (props: BookingPageProps) => {
{t("phone_number")}
</label>
<div className="mt-1">
{/* @ts-ignore */}
<PhoneInput name="phone" placeholder={t("enter_phone_number")} id="phone" required />
<PhoneInput
// @ts-expect-error
control={bookingForm.control}
name="phone"
placeholder={t("enter_phone_number")}
id="phone"
required
/>
</div>
</div>
)}

22
apps/web/components/ui/form/PhoneInput.tsx
View File

@ -1,18 +1,24 @@
import React from "react";
import BasePhoneInput, { Props as PhoneInputProps } from "react-phone-number-input";
import { Control } from "react-hook-form";
import BasePhoneInput, { Props } from "react-phone-number-input/react-hook-form";
import "react-phone-number-input/style.css";
import classNames from "@lib/classNames";
import { Optional } from "@lib/types/utils";
export const PhoneInput = (
props: Optional<PhoneInputProps<React.InputHTMLAttributes<HTMLInputElement>>, "onChange">
) => (
type PhoneInputProps = {
value: string;
id: string;
placeholder: string;
required: boolean;
};
export const PhoneInput = ({ control, name, ...rest }: Props<PhoneInputProps>) => (
<BasePhoneInput
{...props}
{...rest}
name={name}
control={control}
className={classNames(
"border-1 focus-within:border-brand block w-full rounded-sm border border-gray-300 py-px px-3 shadow-sm ring-black focus-within:ring-1 dark:border-black dark:bg-black dark:text-white",
props.className
"border-1 focus-within:border-brand block w-full rounded-sm border border-gray-300 py-px px-3 shadow-sm ring-black focus-within:ring-1 dark:border-black dark:bg-black dark:text-white"
)}
onChange={() => {
/* DO NOT REMOVE: Callback required by PhoneInput, comment added to satisfy eslint:no-empty-function */