fix: [CAL-3374] Says Number is not Verified, but it is Verified (#14531)

* fix: [CAL-3374] Says Number is not Verified, but it is Verified * clearing error only when verified * type-checks fixed * chore: improvement --------- Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com> Co-authored-by: Udit Takkar <udit222001@gmail.com>
2024-04-12 11:33:24 -04:00
parent f58f5e4e02
commit ac858c9bee
88 changed files with 109 additions and 126 deletions
@@ -33,7 +33,7 @@ interface AppListProps {

 export const AppList = ({ data, handleDisconnect, variant, listClassName }: AppListProps) => {
  const { data: defaultConferencingApp } = trpc.viewer.getUsersDefaultConferencingApp.useQuery();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const [bulkUpdateModal, setBulkUpdateModal] = useState(false);
  const [locationType, setLocationType] = useState<(EventLocationType & { slug: string }) | undefined>(
    undefined
@@ -201,7 +201,7 @@ function ConnectOrDisconnectIntegrationMenuItem(props: {
  const { type, credentialId, isGlobal, installed, handleDisconnect, teamId } = props;
  const { t } = useLocale();

-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const handleOpenChange = () => {
    utils.viewer.integrations.invalidate();
  };
@@ -192,7 +192,7 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const onChanged = () =>
    Promise.allSettled([
      utils.viewer.integrations.invalidate(
@@ -64,7 +64,7 @@ function BookingListItem(booking: BookingItemProps) {
    t,
    i18n: { language },
  } = useLocale();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const [rejectionReason, setRejectionReason] = useState<string>("");
  const [rejectionDialogIsOpen, setRejectionDialogIsOpen] = useState(false);
  const [chargeCardDialogIsOpen, setChargeCardDialogIsOpen] = useState(false);
@@ -24,7 +24,7 @@ interface IRescheduleDialog {

 export const ChargeCardDialog = (props: IRescheduleDialog) => {
  const { t } = useLocale();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const { isOpenDialog, setIsOpenDialog, bookingId } = props;
  const [chargeError, setChargeError] = useState(false);
  const chargeCardMutation = trpc.viewer.payments.chargeCard.useMutation({
@@ -23,7 +23,7 @@ interface IRescheduleDialog {

 export const RescheduleDialog = (props: IRescheduleDialog) => {
  const { t } = useLocale();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const { isOpenDialog, setIsOpenDialog, bookingUId: bookingId } = props;
  const [rescheduleReason, setRescheduleReason] = useState("");

@@ -123,7 +123,7 @@ function DeleteDialog({
  open,
  onOpenChange,
 }: { isManagedEvent: string; eventTypeId: number } & Pick<DialogProps, "open" | "onOpenChange">) {
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const { t } = useLocale();
  const router = useRouter();
  const deleteMutation = trpc.viewer.eventTypes.delete.useMutation({
@@ -19,7 +19,7 @@ import { Alert, Button, Dialog, DialogContent, EmptyScreen, showToast } from "@c
 export const EventWebhooksTab = ({ eventType }: Pick<EventTypeSetupProps, "eventType">) => {
  const { t } = useLocale();

-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const formMethods = useFormContext<FormValues>();

  const { data: webhooks } = trpc.viewer.webhook.list.useQuery({ eventTypeId: eventType.id });
@@ -99,7 +99,7 @@ export default function InstantEventController({

 const InstantMeetingWebhooks = ({ eventType }: { eventType: EventTypeSetup }) => {
  const { t } = useLocale();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const formMethods = useFormContext<FormValues>();

  const { data: webhooks } = trpc.viewer.webhook.list.useQuery({
@@ -25,7 +25,7 @@ const UserProfile = () => {

  const { data: eventTypes } = trpc.viewer.eventTypes.list.useQuery();
  const [imageSrc, setImageSrc] = useState<string>(user?.avatar || "");
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const router = useRouter();
  const createEventType = trpc.viewer.eventTypes.create.useMutation();
  const telemetry = useTelemetry();
@@ -48,7 +48,7 @@ const UserSettings = (props: IUserSettingsProps) => {
    telemetry.event(telemetryEventTypes.onboardingStarted);
  }, [telemetry]);

-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const onSuccess = async () => {
    await utils.viewer.me.invalidate();
    nextStep();
@@ -3,7 +3,7 @@ import { trpc } from "@calcom/trpc/react";
 import { Badge, Button, showToast } from "@calcom/ui";

 const DisableUserImpersonation = ({ disableImpersonation }: { disableImpersonation: boolean }) => {
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();

  const { t } = useLocale();

@@ -230,7 +230,7 @@ export const EventTypeList = ({
  const [deleteDialogTypeSchedulingType, setDeleteDialogSchedulingType] = useState<SchedulingType | null>(
    null
  );
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const mutation = trpc.viewer.eventTypeOrder.useMutation({
    onError: async (err) => {
      console.error(err.message);
@@ -896,7 +896,7 @@ const Main = ({
                  className="mt-4 flex flex-col"
                  data-testid={`slug-${group.profile.slug}`}
                  key={group.profile.slug}>
-                  {/* If the group is readonly and empty don't leave a floating header when the user cant see the create box due 
+                  {/* If the group is readonly and empty don't leave a floating header when the user cant see the create box due
                    to it being readonly for that user */}
                  {group.eventTypes.length === 0 && group.metadata.readOnly ? null : (
                    <EventTypeListHeading
@@ -141,7 +141,7 @@ export type EventTypeSetup = RouterOutputs["viewer"]["eventTypes"]["get"]["event

 const EventTypePage = (props: EventTypeSetupProps) => {
  const { t } = useLocale();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const telemetry = useTelemetry();
  const {
    data: { tabName },
@@ -24,7 +24,7 @@ import SkeletonLoader from "@components/availability/SkeletonLoader";
 export function AvailabilityList({ schedules }: RouterOutputs["viewer"]["availability"]["list"]) {
  const { t } = useLocale();
  const [bulkUpdateModal, setBulkUpdateModal] = useState(false);
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();

  const meQuery = trpc.viewer.me.useQuery();

@@ -93,7 +93,7 @@ const AppearanceView = ({
  hasPaidPlan: boolean;
 }) => {
  const { t } = useLocale();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const [darkModeError, setDarkModeError] = useState(false);
  const [lightModeError, setLightModeError] = useState(false);
  const [isCustomBrandColorChecked, setIsCustomBranColorChecked] = useState(
@@ -60,7 +60,7 @@ const GeneralQueryView = () => {
 };

 const GeneralView = ({ localeProp, user }: GeneralViewProps) => {
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const { t } = useLocale();
  const { update } = useSession();
  const [isUpdateBtnLoading, setIsUpdateBtnLoading] = useState<boolean>(false);
@@ -94,7 +94,7 @@ export type FormValues = {

 const ProfileView = () => {
  const { t } = useLocale();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const { update } = useSession();
  const { data: user, isPending } = trpc.viewer.me.useQuery({ includePasswordAdded: true });

@@ -23,7 +23,7 @@ const SkeletonLoader = ({ title, description }: { title: string; description: st

 const ProfileImpersonationView = ({ user }: { user: RouterOutputs["viewer"]["me"] }) => {
  const { t } = useLocale();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const [disableImpersonation, setDisableImpersonation] = useState<boolean | undefined>(
    user?.disableImpersonation
  );
@@ -61,7 +61,7 @@ const SkeletonLoader = ({ title, description }: { title: string; description: st
 const PasswordView = ({ user }: PasswordViewProps) => {
  const { data } = useSession();
  const { t } = useLocale();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const metadata = userMetadataSchema.safeParse(user?.metadata);
  const initialSessionTimeout = metadata.success ? metadata.data?.sessionTimeout : undefined;

@@ -34,7 +34,7 @@ const SkeletonLoader = ({ title, description }: { title: string; description: st
 };

 const TwoFactorAuthView = () => {
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();

  const { t } = useLocale();
  const { data: user, isPending } = trpc.viewer.me.useQuery({ includePasswordAdded: true });
@@ -24,7 +24,7 @@ export default function OmniInstallAppButton({
 }) {
  const { t } = useLocale();
  const { data: app } = useApp(appId);
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();

  const mutation = useAddAppMutation(null, {
    returnTo,
@@ -130,7 +130,7 @@ function PaymentChecker(props: PaymentCheckerProps) {
  // TODO: subscribe rather than polling
  const searchParams = useCompatSearchParams();
  const bookingSuccessRedirect = useBookingSuccessRedirect();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const { t } = useLocale();

  useEffect(() => {
@@ -16,7 +16,7 @@ export default function MakeSetup({ inviteLink }: InferGetServerSidePropsType<ty
  const [newApiKeys, setNewApiKeys] = useState<Record<string, string>>({});

  const { t } = useLocale();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const integrations = trpc.viewer.integrations.useQuery({ variant: "automation" });
  const oldApiKey = trpc.viewer.apiKeys.findKeyOfType.useQuery({ appId: MAKE });
  const teamsList = trpc.viewer.teams.listOwnedTeams.useQuery(undefined, {
@@ -63,7 +63,7 @@ function NewFormDialog({ appUrl }: { appUrl: string }) {
  const routerQuery = useRouterQuery();
  const { t } = useLocale();
  const router = useRouter();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();

  const mutation = trpc.viewer.appRoutingForms.formMutation.useMutation({
    onSuccess: (_data, variables) => {
@@ -193,7 +193,7 @@ function Dialogs({
  setDeleteDialogOpen: (open: boolean) => void;
  deleteDialogFormId: string | null;
 }) {
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const router = useRouter();
  const { t } = useLocale();
  const deleteMutation = trpc.viewer.appRoutingForms.deleteForm.useMutation({
@@ -276,7 +276,7 @@ export function FormActionsProvider({ appUrl, children }: { appUrl: string; chil
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [deleteDialogFormId, setDeleteDialogFormId] = useState<string | null>(null);
  const { t } = useLocale();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();

  const toggleMutation = trpc.viewer.appRoutingForms.formMutation.useMutation({
    onMutate: async ({ id: formId, disabled }) => {
@@ -234,7 +234,7 @@ type SingleFormComponentProps = {
 };

 function SingleForm({ form, appUrl, Page, enrichedWithUserProfileForm }: SingleFormComponentProps) {
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const { t } = useLocale();

  const [isTestPreviewOpen, setIsTestPreviewOpen] = useState(false);
@@ -66,7 +66,7 @@ export default function RoutingForms({
  const { hasPaidPlan } = useHasPaidPlan();
  const routerQuery = useRouterQuery();
  const hookForm = useFormContext<RoutingFormWithResponseCount>();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const [parent] = useAutoAnimate<HTMLUListElement>();

  const mutation = trpc.viewer.routingFormOrder.useMutation({
@@ -49,7 +49,7 @@ export const ConfirmDialog = (props: IConfirmDialogWipe) => {
  const endDate = today.endOf("day");
  const dateFormat = "ddd, MMM D, YYYY h:mm A";

-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();

  const rescheduleApi = useMutation({
    mutationFn: async () => {
@@ -16,7 +16,7 @@ const ZAPIER = "zapier";
 export default function ZapierSetup(props: IZapierSetupProps) {
  const [newApiKeys, setNewApiKeys] = useState<Record<string, string>>({});
  const { t } = useLocale();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const integrations = trpc.viewer.integrations.useQuery({ variant: "automation" });
  const oldApiKey = trpc.viewer.apiKeys.findKeyOfType.useQuery({ appId: ZAPIER });
  const teamsList = trpc.viewer.teams.listOwnedTeams.useQuery(undefined, {
@@ -47,7 +47,7 @@ const IntegrationContainer = ({
  handleModelOpen: (data: EditModalState) => void;
 }) => {
  const { t } = useLocale();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const [disableDialog, setDisableDialog] = useState(false);

  const showKeyModal = (fromEnabled?: boolean) => {
@@ -187,7 +187,7 @@ const EditKeysModal: FC<{
  fromEnabled?: boolean;
  appName?: string;
 }> = (props) => {
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const { t } = useLocale();
  const { dirName, slug, type, isOpen, keys, handleModelClose, fromEnabled, appName } = props;
  const appKeySchema = appKeysSchemas[dirName as keyof typeof appKeysSchemas];
@@ -22,7 +22,7 @@ export default function DisconnectIntegration({
 }) {
  const { t } = useLocale();
  const [modalOpen, setModalOpen] = useState(false);
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();

  const mutation = trpc.viewer.deleteCredential.useMutation({
    onSuccess: () => {
@@ -16,7 +16,7 @@ export default function DisconnectIntegrationModal({
  teamId,
 }: DisconnectIntegrationModalProps) {
  const { t } = useLocale();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();

  const mutation = trpc.viewer.deleteCredential.useMutation({
    onSuccess: () => {
@@ -25,7 +25,7 @@ export const useCalendars = ({ hasSession }: UseCalendarsProps) => {
    credentialId: number;
    externalId: string;
  }>("toggledConnectedCalendars", []);
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();

  const [calendarSettingsOverlay] = useOverlayCalendarStore(
    (state) => [state.calendarSettingsOverlayModal, state.setCalendarSettingsOverlayModal],
@@ -19,7 +19,7 @@ interface ICalendarSwitchProps {
 const CalendarSwitch = (props: ICalendarSwitchProps) => {
  const { title, externalId, type, isChecked, name, isLastItemInList = false, credentialId } = props;
  const [checkedInternal, setCheckedInternal] = useState(isChecked);
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const { t } = useLocale();
  const mutation = useMutation({
    mutationFn: async ({ isOn }: { isOn: boolean }) => {
@@ -6,17 +6,7 @@ import type { TApiKeys } from "@calcom/ee/api-keys/components/ApiKeyListItem";
 import LicenseRequired from "@calcom/ee/common/components/LicenseRequired";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import {
-  Button,
-  DialogFooter,
-  Form,
-  Icon,
-  SelectField,
-  showToast,
-  Switch,
-  TextField,
-  Tooltip,
-} from "@calcom/ui";
+import { Button, DialogFooter, Form, SelectField, showToast, Switch, TextField, Tooltip } from "@calcom/ui";

 export default function ApiKeyDialogForm({
  defaultValues,
@@ -26,7 +16,7 @@ export default function ApiKeyDialogForm({
  handleClose: () => void;
 }) {
  const { t } = useLocale();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();

  const updateApiKeyMutation = trpc.viewer.apiKeys.edit.useMutation({
    onSuccess() {
@@ -26,7 +26,7 @@ const ApiKeyListItem = ({
  onEditClick: () => void;
 }) => {
  const { t } = useLocale();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();

  const isExpired = apiKey?.expiresAt ? apiKey.expiresAt < new Date() : null;
  const neverExpires = apiKey?.expiresAt === null;
@@ -21,7 +21,7 @@ import GroupTeamMappingTable from "./GroupTeamMappingTable";

 const ConfigureDirectorySync = ({ organizationId }: { organizationId: number | null }) => {
  const { t } = useLocale();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const [deleteDirectoryOpen, setDeleteDirectoryOpen] = useState(false);

  const { data, isLoading, isError, error } = trpc.viewer.dsync.get.useQuery({ organizationId });
@@ -23,7 +23,7 @@ const defaultValues = {

 const CreateDirectory = ({ orgId }: { orgId: number | null }) => {
  const { t } = useLocale();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const form = useForm({ defaultValues });
  const [openModal, setOpenModal] = useState(false);

@@ -12,7 +12,7 @@ const CreateTeamDialog = (props: CreateTeamDialogProps) => {
  const { open, onOpenChange } = props;
  const { t } = useLocale();

-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent type="creation" title={t("create_new_team")} description={t("team_will_be_under_org")}>
@@ -15,7 +15,7 @@ const GroupNameCell = ({ groupNames, teamId, directoryId }: GroupNameCellProps)
  const [showTextInput, setShowTextInput] = useState(false);
  const [newGroupName, setNewGroupName] = useState("");
  const { t } = useLocale();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();

  const createMutation = trpc.viewer.dsync.teamGroupMapping.create.useMutation({
    onSuccess: (data) => {
@@ -13,7 +13,7 @@ interface Props {
 }

 export default function OtherTeamList(props: Props) {
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();

  const [hideDropdown, setHideDropdown] = useState(false);

@@ -55,7 +55,7 @@ const OrgForm = ({
 }) => {
  const { t } = useLocale();
  const router = useRouter();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const mutation = trpc.viewer.organizations.adminUpdate.useMutation({
    onSuccess: async () => {
      await Promise.all([
@@ -24,7 +24,7 @@ const { Body, Cell, ColumnTitle, Header, Row } = Table;

 function AdminOrgTable() {
  const { t } = useLocale();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const [data] = trpc.viewer.organizations.adminGetAll.useSuspenseQuery();
  const verifyMutation = trpc.viewer.organizations.adminVerify.useMutation({
    onSuccess: async (_data, variables) => {
@@ -277,7 +277,7 @@ const DeleteOrgDialog = ({
  );
 };

-async function invalidateQueries(utils: ReturnType<typeof trpc.useContext>, data: { orgId: number }) {
+async function invalidateQueries(utils: ReturnType<typeof trpc.useUtils>, data: { orgId: number }) {
  await utils.viewer.organizations.adminGetAll.invalidate();
  await utils.viewer.organizations.adminGet.invalidate({
    id: data.orgId,
@@ -32,7 +32,7 @@ const OrgAppearanceView = ({
  isAdminOrOwner: boolean;
 }) => {
  const { t } = useLocale();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();

  const themeForm = useForm<{ theme: string | null | undefined }>({
    defaultValues: {
@@ -13,7 +13,6 @@ import { MembershipRole } from "@calcom/prisma/enums";
 import { trpc } from "@calcom/trpc/react";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { Meta, showToast, Button } from "@calcom/ui";
-import { Icon } from "@calcom/ui";

 import { getLayout } from "../../../../settings/layouts/SettingsLayout";
 import MakeTeamPrivateSwitch from "../../../teams/components/MakeTeamPrivateSwitch";
@@ -67,7 +66,7 @@ const MembersView = () => {
  const params = useParamsWithFallback();
  const teamId = Number(params.id);
  const session = useSession();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  // const [query, setQuery] = useState<string | undefined>("");
  // const [queryToFetch, setQueryToFetch] = useState<string | undefined>("");
  const limit = 20;
@@ -28,7 +28,6 @@ import {
  DialogTrigger,
  Editor,
  Form,
-  Icon,
  ImageUploader,
  Label,
  LinkIconButton,
@@ -59,7 +58,7 @@ const teamProfileFormSchema = z.object({
 const OtherTeamProfileView = () => {
  const { t } = useLocale();
  const router = useRouter();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const session = useSession();
  const [firstRender, setFirstRender] = useState(true);

@@ -300,9 +299,7 @@ const OtherTeamProfileView = () => {
              </div>
              <div className="">
                <Link href={permalink} passHref={true} target="_blank">
-                  <LinkIconButton Icon="external-link">
-                    {t("preview")}
-                  </LinkIconButton>
+                  <LinkIconButton Icon="external-link">{t("preview")}</LinkIconButton>
                </Link>
                <LinkIconButton
                  Icon="link"
@@ -321,10 +318,7 @@ const OtherTeamProfileView = () => {

          <Dialog>
            <DialogTrigger asChild>
-              <Button
-                color="destructive"
-                className="border"
-                StartIcon="trash-2">
+              <Button color="destructive" className="border" StartIcon="trash-2">
                {t("disband_team")}
              </Button>
            </DialogTrigger>
@@ -22,7 +22,6 @@ import {
  Button,
  Editor,
  Form,
-  Icon,
  ImageUploader,
  Label,
  LinkIconButton,
@@ -163,7 +162,7 @@ const OrgProfileView = () => {
 };

 const OrgProfileForm = ({ defaultValues }: { defaultValues: FormValues }) => {
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const { t } = useLocale();
  const [firstRender, setFirstRender] = useState(true);

@@ -21,7 +21,7 @@ export default function ConnectionInfo({
  connection: SSOConnection;
 }) {
  const { t } = useLocale();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();

  const connectionType = connection.type.toUpperCase();

@@ -54,7 +54,7 @@ const CreateConnectionDialog = ({
  setOpenModal: (open: boolean) => void;
 }) => {
  const { t } = useLocale();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const form = useForm<FormValues>();

  const mutation = trpc.viewer.saml.updateOIDC.useMutation({
@@ -52,7 +52,7 @@ const CreateConnectionDialog = ({
  setOpenModal: (open: boolean) => void;
 }) => {
  const { t } = useLocale();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const form = useForm<FormValues>();

  const mutation = trpc.viewer.saml.update.useMutation({
@@ -16,7 +16,6 @@ import { trpc } from "@calcom/trpc/react";
 import {
  Badge,
  Button,
-  Icon,
  showToast,
  SkeletonButton,
  SkeletonContainer,
@@ -72,7 +71,7 @@ export const AddNewTeamMembersForm = ({
  const { t, i18n } = useLocale();

  const router = useRouter();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const orgBranding = useOrgBranding();

  const showDialog = searchParams?.get("inviteModal") === "true";
@@ -235,7 +234,7 @@ const AddNewTeamMemberSkeleton = () => {
 const PendingMemberItem = (props: { member: TeamMember; index: number; teamId: number; isOrg?: boolean }) => {
  const { member, index, teamId } = props;
  const { t } = useLocale();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const session = useSession();
  const bookerUrl = member.bookerUrl;
  const { data: currentOrg } = trpc.viewer.organizations.listCurrent.useQuery(undefined, {
@@ -15,7 +15,7 @@ const DisableTeamImpersonation = ({
 }) => {
  const { t } = useLocale();

-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();

  const query = trpc.viewer.teams.getMembershipbyUser.useQuery({ teamId, memberId });

@@ -35,7 +35,7 @@ export function GoogleWorkspaceInviteButton(
  props: PropsWithChildren<{ onSuccess: (data: string[]) => void }>
 ) {
  const featureFlags = useFlagMap();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const { t } = useLocale();
  const params = useParamsWithFallback();
  const teamId = Number(params.id);
@@ -19,7 +19,7 @@ export interface LinkSettingsForm {

 export default function InviteLinkSettingsModal(props: InvitationLinkSettingsModalProps) {
  const { t } = useLocale();
-  const trpcContext = trpc.useContext();
+  const trpcContext = trpc.useUtils();

  const deleteInviteMutation = trpc.viewer.teams.deleteInvite.useMutation({
    onSuccess: () => {
@@ -17,7 +17,7 @@ const MakeTeamPrivateSwitch = ({
 }) => {
  const { t } = useLocale();

-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();

  const mutation = trpc.viewer.teams.update.useMutation({
    onError: (err) => {
@@ -45,7 +45,7 @@ export default function MemberChangeRoleModal(props: {
    }
  );
  const [errorMessage, setErrorMessage] = useState("");
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();

  const changeRoleMutation = trpc.viewer.teams.changeMemberRole.useMutation({
    async onSuccess() {
@@ -69,7 +69,7 @@ function toggleElementInArray(value: string[] | string | undefined, element: str
 export default function MemberInvitationModal(props: MemberInvitationModalProps) {
  const { t } = useLocale();
  const { disableCopyLink = false, isOrg = false } = props;
-  const trpcContext = trpc.useContext();
+  const trpcContext = trpc.useUtils();
  const session = useSession();
  const { data: currentOrg } = trpc.viewer.organizations.listCurrent.useQuery(undefined, {
    enabled: !!session.data?.user?.org,
@@ -50,7 +50,7 @@ const checkIsOrg = (team: Props["team"]) => {
 export default function MemberListItem(props: Props) {
  const { t, i18n } = useLocale();

-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const [showChangeMemberRoleModal, setShowChangeMemberRoleModal] = useState(false);
  const [showTeamAvailabilityModal, setShowTeamAvailabilityModal] = useState(false);
  const [showImpersonateModal, setShowImpersonateModal] = useState(false);
@@ -17,7 +17,7 @@ interface Props {
 }

 export default function TeamAvailabilityModal(props: Props) {
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const [selectedDate, setSelectedDate] = useState(dayjs());
  const [selectedTimeZone, setSelectedTimeZone] = useState<ITimezone>(
    localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess() || "Europe/London"
@@ -20,7 +20,7 @@ interface Props {
 }

 export default function TeamInviteList(props: Props) {
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();

  const [hideDropdown, setHideDropdown] = useState(false);

@@ -33,7 +33,7 @@ interface Props {

 export default function TeamInviteListItem(props: Props) {
  const { t } = useLocale();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const team = props.team;

  const acceptOrLeaveMutation = trpc.viewer.teams.acceptOrLeave.useMutation({
@@ -44,7 +44,7 @@ interface Props {
 export default function TeamListItem(props: Props) {
  const searchParams = useCompatSearchParams();
  const { t, i18n } = useLocale();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const user = trpc.viewer.me.useQuery().data;
  const team = props.team;

@@ -15,7 +15,7 @@ export function TeamsListing() {
  const searchParams = useCompatSearchParams();
  const token = searchParams?.get("token");
  const { t } = useLocale();
-  const trpcContext = trpc.useContext();
+  const trpcContext = trpc.useUtils();
  const router = useRouter();

  const [inviteTokenChecked, setInviteTokenChecked] = useState(false);
@@ -28,7 +28,7 @@ type ProfileViewProps = { team: RouterOutputs["viewer"]["teams"]["get"] };

 const ProfileView = ({ team }: ProfileViewProps) => {
  const { t } = useLocale();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();

  const [hideBrandingValue, setHideBrandingValue] = useState(team?.hideBranding ?? false);
  const [hideBookATeamMember, setHideBookATeamMember] = useState(team?.hideBookATeamMember ?? false);
@@ -11,7 +11,6 @@ import { MembershipRole } from "@calcom/prisma/enums";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import { Button, Meta, showToast, TextField } from "@calcom/ui";
-import { Icon } from "@calcom/ui";

 import { getLayout } from "../../../settings/layouts/SettingsLayout";
 import DisableTeamImpersonation from "../components/DisableTeamImpersonation";
@@ -82,7 +81,7 @@ const MembersView = () => {
  const router = useRouter();
  const session = useSession();

-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const params = useParamsWithFallback();

  const teamId = Number(params.id);
@@ -86,7 +86,7 @@ const ProfileView = () => {
  const teamId = Number(params.id);
  const { t } = useLocale();
  const router = useRouter();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const session = useSession();

  useLayoutEffect(() => {
@@ -249,7 +249,7 @@ const ProfileView = () => {
 export type TeamProfileFormProps = { team: RouterOutputs["viewer"]["teams"]["get"] };

 const TeamProfileForm = ({ team }: TeamProfileFormProps) => {
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const { t } = useLocale();
  const router = useRouter();

@@ -32,7 +32,7 @@ const FETCH_LIMIT = 25;
 function UsersTableBare() {
  const { t } = useLocale();
  const tableContainerRef = useRef<HTMLDivElement>(null);
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const [searchTerm, setSearchTerm] = useState<string>("");
  const [showImpersonateModal, setShowImpersonateModal] = useState(false);
  const [selectedUser, setSelectedUser] = useState<string | null>(null);
@@ -14,7 +14,7 @@ import { userBodySchema } from "../schemas/userBodySchema";
 const UsersAddView = () => {
  const pathname = usePathname();
  const router = useRouter();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const mutation = trpc.viewer.users.add.useMutation({
    onSuccess: async () => {
      showToast("User added successfully", "success");
@@ -30,7 +30,7 @@ const UsersEditView = ({ userId }: { userId: number }) => {
  const router = useRouter();
  const [data] = trpc.viewer.users.get.useSuspenseQuery({ userId });
  const { user } = data;
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const mutation = trpc.viewer.users.update.useMutation({
    onSuccess: async () => {
      Promise.all([utils.viewer.users.list.invalidate(), utils.viewer.users.get.invalidate()]);
@@ -15,7 +15,7 @@ interface IDeleteDialog {
 export const DeleteDialog = (props: IDeleteDialog) => {
  const { t } = useLocale();
  const { isOpenDialog, setIsOpenDialog, workflowId, additionalFunction } = props;
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();

  const deleteMutation = trpc.viewer.workflows.delete.useMutation({
    onSuccess: async () => {
@@ -43,7 +43,7 @@ const WorkflowListItem = (props: ItemProps) => {
  );

  const isActive = activeEventTypeIds.includes(eventType.id);
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();

  const activateEventTypeMutation = trpc.viewer.workflows.activateEventType.useMutation({
    onSuccess: async () => {
@@ -52,7 +52,7 @@ interface Props {
 }
 export default function WorkflowListPage({ workflows }: Props) {
  const { t } = useLocale();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [workflowToDeleteId, setwWorkflowToDeleteId] = useState(0);
  const [parent] = useAutoAnimate<HTMLUListElement>();
@@ -252,12 +252,7 @@ export default function WorkflowListPage({ workflows }: Props) {
                        <div className="block sm:hidden">
                          <Dropdown>
                            <DropdownMenuTrigger asChild>
-                              <Button
-                                type="button"
-                                color="minimal"
-                                variant="icon"
-                                StartIcon="ellipsis"
-                              />
+                              <Button type="button" color="minimal" variant="icon" StartIcon="ellipsis" />
                            </DropdownMenuTrigger>
                            <DropdownMenuContent>
                              <DropdownMenuItem>
@@ -71,7 +71,7 @@ type WorkflowStepProps = {

 export default function WorkflowStepContainer(props: WorkflowStepProps) {
  const { t } = useLocale();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();

  const { step, form, reload, setReload, teamId } = props;
  const { data: _verifiedNumbers } = trpc.viewer.workflows.getVerifiedNumbers.useQuery(
@@ -216,6 +216,15 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
    onSuccess: async (isVerified) => {
      showToast(isVerified ? t("verified_successfully") : t("wrong_code"), "success");
      setNumberVerified(isVerified);
+      if (
+        step &&
+        form?.formState?.errors?.steps &&
+        form.formState.errors.steps[step.stepNumber - 1]?.sendTo &&
+        isVerified
+      ) {
+        form.clearErrors(`steps.${step.stepNumber - 1}.sendTo`);
+      }
+
      utils.viewer.workflows.getVerifiedNumbers.invalidate();
    },
    onError: (err) => {
@@ -100,7 +100,7 @@ function WorkflowPage() {
  });

  const { workflow: workflowId } = params ? querySchema.parse(params) : { workflow: -1 };
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();

  const userQuery = useMeQuery();
  const user = userQuery.data;
@@ -17,7 +17,7 @@ export function BulkEditDefaultForEventsModal(props: {
  isPending: boolean;
 }) {
  const { t } = useLocale();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const { data, isFetching } = trpc.viewer.eventTypes.bulkEventFetch.useQuery();
  const form = useForm({
    resolver: zodResolver(BulkUpdateEventSchema),
@@ -79,7 +79,7 @@ export default function CreateEventTypeDialog({
  }[];
  isOrganization: boolean;
 }) {
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const { t } = useLocale();
  const router = useRouter();
  const [firstRender, setFirstRender] = useState(true);
@@ -31,7 +31,7 @@ const FlagToggle = (props: { flag: Flag }) => {
  const {
    flag: { slug, enabled },
  } = props;
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const mutation = trpc.viewer.admin.toggleFeatureFlag.useMutation({
    onSuccess: () => {
      showToast("Flags successfully updated", "success");
@@ -21,7 +21,7 @@ const querySchema = z.object({

 export function FiltersProvider({ children }: { children: React.ReactNode }) {
  // searchParams to get initial values from query params
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const searchParams = useCompatSearchParams();
  const router = useRouter();
  const pathname = usePathname();
@@ -12,7 +12,6 @@ import {
  DialogFooter,
  DialogTrigger,
  Form,
-  Icon,
  InputField,
  showToast,
 } from "@calcom/ui";
@@ -31,7 +30,7 @@ export function NewScheduleButton({
    name: string;
  }>();
  const { register } = form;
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();

  const createMutation = trpc.viewer.availability.schedule.create.useMutation({
    onSuccess: async ({ schedule }) => {
@@ -10,7 +10,7 @@ import { Dialog, DialogClose, DialogContent, DialogFooter, showToast } from "@ca
 export default function TimezoneChangeDialog() {
  const { t } = useLocale();
  const { data: user, isPending } = trpc.viewer.me.useQuery();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const userTz = user?.timeZone;
  const currentTz = dayjs.tz.guess() || "Europe/London";
  const formattedCurrentTz = currentTz?.replace("_", " ");
@@ -381,7 +381,7 @@ interface UserDropdownProps {
 function UserDropdown({ small }: UserDropdownProps) {
  const { t } = useLocale();
  const { data: user } = useMeQuery();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const bookerUrl = useBookerUrl();

  useEffect(() => {
@@ -12,7 +12,7 @@ interface Props {
 export function DeleteBulkUsers({ users, onRemove }: Props) {
  const { t } = useLocale();
  const selectedRows = users; // Get selected rows from table
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const deleteMutation = trpc.viewer.organizations.bulkDeleteUsers.useMutation({
    onSuccess: () => {
      utils.viewer.organizations.listMembers.invalidate();
@@ -28,7 +28,7 @@ interface Props {
 export function TeamListBulkAction({ table }: Props) {
  const { data: teams } = trpc.viewer.organizations.getTeams.useQuery();
  const [selectedValues, setSelectedValues] = useState<Set<number>>(new Set());
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const mutation = trpc.viewer.organizations.bulkAddToTeams.useMutation({
    onError: (error) => {
      showToast(error.message, "error");
@@ -10,7 +10,7 @@ import type { State, Action } from "./UserListTable";
 export function DeleteMemberModal({ state, dispatch }: { state: State; dispatch: Dispatch<Action> }) {
  const { t } = useLocale();
  const { data: session } = useSession();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const removeMemberMutation = trpc.viewer.teams.removeMember.useMutation({
    onSuccess() {
      // We don't need to wait for invalidate to finish
@@ -55,7 +55,7 @@ export function EditForm({
 }) {
  const [setMutationLoading] = useEditMode((state) => [state.setMutationloading], shallow);
  const { t } = useLocale();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const form = useForm({
    resolver: zodResolver(editSchema),
    defaultValues: {
@@ -14,7 +14,7 @@ interface Props {

 export function InviteMemberModal(props: Props) {
  const { data: session } = useSession();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const { t, i18n } = useLocale();
  const inviteMemberMutation = trpc.viewer.teams.inviteMember.useMutation({
    async onSuccess(data) {
@@ -35,7 +35,7 @@ export default function WebhookListItem(props: {
  readOnly?: boolean;
 }) {
  const { t } = useLocale();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const { webhook } = props;
  const canEditWebhook = props.canEditWebhook ?? true;

@@ -23,7 +23,7 @@ const EditWebhook = () => {

 function Component({ webhookId }: { webhookId: string }) {
  const { t } = useLocale();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const router = useRouter();
  const { data: installedApps, isPending } = trpc.viewer.integrations.useQuery(
    { variant: "other", onlyInstalled: true },
@@ -26,7 +26,7 @@ const SkeletonLoader = ({ title, description }: { title: string; description: st
 const NewWebhookView = () => {
  const searchParams = useCompatSearchParams();
  const { t } = useLocale();
-  const utils = trpc.useContext();
+  const utils = trpc.useUtils();
  const router = useRouter();
  const session = useSession();