From 116e6d09385433bd8eb3f22d8e7e54b8c700f9bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20L=C3=B3pez?= <zomars@me.com>
Date: Wed, 19 Jan 2022 09:24:01 -0700
Subject: [PATCH] Lazy loads phone input (#1566)

---
 components/booking/pages/BookingPage.tsx | 5 ++++-
 components/ui/form/PhoneInput.tsx        | 5 +++--
 lib/types/utils.ts                       | 4 ++++
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/components/booking/pages/BookingPage.tsx b/components/booking/pages/BookingPage.tsx
index 0ff34786..1980a6b2 100644
--- a/components/booking/pages/BookingPage.tsx
+++ b/components/booking/pages/BookingPage.tsx
@@ -7,6 +7,7 @@ import {
 } from "@heroicons/react/solid";
 import { EventTypeCustomInputType } from "@prisma/client";
 import dayjs from "dayjs";
+import dynamic from "next/dynamic";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import { useEffect, useMemo, useState } from "react";
@@ -32,11 +33,13 @@ import CustomBranding from "@components/CustomBranding";
 import { EmailInput, Form } from "@components/form/fields";
 import AvatarGroup from "@components/ui/AvatarGroup";
 import { Button } from "@components/ui/Button";
-import PhoneInput from "@components/ui/form/PhoneInput";
 
 import { BookPageProps } from "../../../pages/[user]/book";
 import { TeamBookingPageProps } from "../../../pages/team/[slug]/book";
 
+/** These are like 40kb that not every user needs */
+const PhoneInput = dynamic(() => import("@components/ui/form/PhoneInput"));
+
 type BookingPageProps = BookPageProps | TeamBookingPageProps;
 
 const BookingPage = (props: BookingPageProps) => {
diff --git a/components/ui/form/PhoneInput.tsx b/components/ui/form/PhoneInput.tsx
index dfe1c7df..29c9600a 100644
--- a/components/ui/form/PhoneInput.tsx
+++ b/components/ui/form/PhoneInput.tsx
@@ -1,10 +1,11 @@
 import React from "react";
-import { default as BasePhoneInput, PhoneInputProps } from "react-phone-number-input";
+import BasePhoneInput, { Props as PhoneInputProps } from "react-phone-number-input";
 import "react-phone-number-input/style.css";
 
 import classNames from "@lib/classNames";
+import { Optional } from "@lib/types/utils";
 
-export const PhoneInput = (props: PhoneInputProps) => (
+export const PhoneInput = (props: Optional<PhoneInputProps, "onChange">) => (
   <BasePhoneInput
     {...props}
     className={classNames(
diff --git a/lib/types/utils.ts b/lib/types/utils.ts
index 3b8a0544..a55cb60d 100644
--- a/lib/types/utils.ts
+++ b/lib/types/utils.ts
@@ -1,3 +1,7 @@
+/** Makes selected props from a record non optional  */
 export type Ensure<T, K extends keyof T> = Omit<T, K> & {
   [EK in K]-?: NonNullable<T[EK]>;
 };
+
+/** Makes selected props from a record optional  */
+export type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;