mythic-insight/calcom
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

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

Browse source
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

14
apps/web/components/booking/pages/BookingPage.tsx
View file

@ -251,7 +251,9 @@ const BookingPage = (props: BookingPageProps) => {
language: i18n.language, language: i18n.language,
rescheduleUid, rescheduleUid,
user: router.query.user, user: router.query.user,
location: getLocationValue(booking.locationType ? booking : { locationType: selectedLocation }), location: getLocationValue(
booking.locationType ? booking : { ...booking, locationType: selectedLocation }
),
metadata, metadata,
customInputs: Object.keys(booking.customInputs || {}).map((inputId) => ({ customInputs: Object.keys(booking.customInputs || {}).map((inputId) => ({
label: props.eventType.customInputs.find((input) => input.id === parseInt(inputId))!.label, label: props.eventType.customInputs.find((input) => input.id === parseInt(inputId))!.label,
@ -391,8 +393,14 @@ const BookingPage = (props: BookingPageProps) => {
{t("phone_number")} {t("phone_number")}
</label> </label>
<div className="mt-1"> <div className="mt-1">
{/* @ts-ignore */} <PhoneInput
<PhoneInput name="phone" placeholder={t("enter_phone_number")} id="phone" required /> // @ts-expect-error
control={bookingForm.control}
name="phone"
placeholder={t("enter_phone_number")}
id="phone"
required
/>
</div> </div>
</div> </div>
)} )}

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

@ -1,18 +1,24 @@
import React from "react"; 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 "react-phone-number-input/style.css";
import classNames from "@lib/classNames"; import classNames from "@lib/classNames";
import { Optional } from "@lib/types/utils";
export const PhoneInput = ( type PhoneInputProps = {
props: Optional<PhoneInputProps<React.InputHTMLAttributes<HTMLInputElement>>, "onChange"> value: string;
) => ( id: string;
placeholder: string;
required: boolean;
};
export const PhoneInput = ({ control, name, ...rest }: Props<PhoneInputProps>) => (
<BasePhoneInput <BasePhoneInput
{...props} {...rest}
name={name}
control={control}
className={classNames( 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", "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
)} )}
onChange={() => { onChange={() => {
/* DO NOT REMOVE: Callback required by PhoneInput, comment added to satisfy eslint:no-empty-function */ /* DO NOT REMOVE: Callback required by PhoneInput, comment added to satisfy eslint:no-empty-function */