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
1 parent f58f5e4e02
commit ac858c9bee
@@ -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 });