separate phone input for web and platform (#19396)

packages/ui/form/PhoneInput.tsx

@@ -5,6 +5,7 @@ import { useState, useEffect } from "react";
 import PhoneInput from "react-phone-input-2";
 import "react-phone-input-2/lib/style.css";
 
+import { useIsPlatform } from "@calcom/atoms/monorepo";
 import { classNames } from "@calcom/lib";
 import { trpc } from "@calcom/trpc/react";
 
@@ -17,9 +18,71 @@ export type PhoneInputProps = {
   name?: string;
   disabled?: boolean;
   onChange: (value: string) => void;
+  defaultCountry?: string;
 };
 
-function BasePhoneInput({ name, className = "", onChange, value, ...rest }: PhoneInputProps) {
+function BasePhoneInput({
+  name,
+  className = "",
+  onChange,
+  value,
+  defaultCountry = "us",
+  ...rest
+}: PhoneInputProps) {
+  const isPlatform = useIsPlatform();
+
+  if (!isPlatform) {
+    return (
+      <BasePhoneInputWeb name={name} className={className} onChange={onChange} value={value} {...rest} />
+    );
+  }
+
+  return (
+    <PhoneInput
+      {...rest}
+      value={value ? value.trim().replace(/^\+?/, "+") : undefined}
+      enableSearch
+      disableSearchIcon
+      country={defaultCountry}
+      inputProps={{
+        name: name,
+        required: rest.required,
+        placeholder: rest.placeholder,
+      }}
+      onChange={(value) => {
+        onChange(`+${value}`);
+      }}
+      containerClass={classNames(
+        "hover:border-emphasis dark:focus:border-emphasis border-default !bg-default rounded-md border focus-within:outline-none focus-within:ring-2 focus-within:ring-brand-default disabled:cursor-not-allowed",
+        className
+      )}
+      inputClass="text-sm focus:ring-0 !bg-default text-default placeholder:text-muted"
+      buttonClass="text-emphasis !bg-default hover:!bg-emphasis"
+      searchClass="!text-default !bg-default hover:!bg-emphasis"
+      dropdownClass="!text-default !bg-default"
+      inputStyle={{ width: "inherit", border: 0 }}
+      searchStyle={{
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        padding: "6px 12px",
+        gap: "8px",
+        width: "296px",
+        height: "28px",
+        marginLeft: "-4px",
+      }}
+      dropdownStyle={{ width: "max-content" }}
+    />
+  );
+}
+
+function BasePhoneInputWeb({
+  name,
+  className = "",
+  onChange,
+  value,
+  ...rest
+}: Omit<PhoneInputProps, "defaultCountry">) {
   const defaultCountry = useDefaultCountry();
 
   return (