Remove Intl.Provider (#8208)

* Add payment option to schema * Add payment option to Stripe zod * Set payment option on event type * Create manual payment intent in Stripe * Set payment option from Stripe app * Add payment option to DB * Pass React.ReactNode to checkbox * Create uncaptured payment intent * WIP * Capture card in setup intent * Show charge card option * Charge card from booking page * Bug fixes * Clean up * Clean up app card * Add no-show fee messaging on booking page * Send payment email on payment & add price * Fix messaging * Create no show fee charged email * Send charge fee collected email * Disable submit on card failure * Clean up * Serverside prevent charging card again if already charged * Only confirm booking if paid for * Type fixes * More type fixes * More type fixes * Type fix * Type fixes * UI changes * Payment component rework * Update apps/web/public/static/locales/en/common.json Co-authored-by: Alex van Andel <me@alexvanandel.com> * Update apps/web/public/static/locales/en/common.json Co-authored-by: Alex van Andel <me@alexvanandel.com> * Update apps/web/components/dialog/ChargeCardDialog.tsx Co-authored-by: Alex van Andel <me@alexvanandel.com> * Update packages/trpc/server/routers/viewer/payments.tsx Co-authored-by: Alex van Andel <me@alexvanandel.com> * Revert GTM config * Adjust payment option dropdown * Show alert when seats are set * Small bug fixes * Create collect card method * clean up * Prevent seats & charge no-show fee to be enabled together * Do not charge no-show fee on unconfirmed bookings * Add check to collect card method * Webhook send request emails * Fix some dark mode colours * Change awaiting payment language * Type fixes * Set height of Select and TextField both to 38px to fix alignment * Fix message seats & payment error message * Type fix * Remove Intl.Provider * Add percentFeePercentage * WIP * Use i18n language * Type fix --------- Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: Omar López <zomars@me.com>
2023-04-19 21:38:06 +00:00
parent b1ff829745
commit b0530d59af
9 changed files with 53 additions and 89 deletions
@@ -1,7 +1,6 @@
 import dynamic from "next/dynamic";
 import { useRouter } from "next/router";
 import { useEffect, useMemo, useReducer, useState } from "react";
-import { FormattedNumber, IntlProvider } from "react-intl";
 import { z } from "zod";

 import BookingPageTagManager from "@calcom/app-store/BookingPageTagManager";
@@ -75,7 +74,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
    brandColor: profile.brandColor,
    darkBrandColor: profile.darkBrandColor,
  });
-  const { t } = useLocale();
+  const { t, i18n } = useLocale();
  const availabilityDatePickerEmbedStyles = useEmbedStyles("availabilityDatePicker");
  //TODO: Plan to remove shouldAlignCentrallyInEmbed config
  const shouldAlignCentrallyInEmbed = useEmbedNonStylesConfig("align") !== "left";
@@ -124,16 +123,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
    [timeZone]
  );
  const paymentAppData = getPaymentAppData(eventType);
-  const paymentAmount = () => {
-    return;
-    <IntlProvider locale="en">
-      <FormattedNumber
-        value={paymentAppData.price / 100.0}
-        style="currency"
-        currency={paymentAppData.currency?.toUpperCase()}
-      />
-    </IntlProvider>;
-  };
+
  const rainbowAppData = getEventTypeAppData(eventType, "rainbow") || {};
  const rawSlug = profile.slug ? profile.slug.split("/") : [];
  if (rawSlug.length > 1) rawSlug.pop(); //team events have team name as slug, but user events have [user]/[type] as slug.
@@ -257,13 +247,12 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
                              })}
                            </>
                          ) : (
-                            <IntlProvider locale="en">
-                              <FormattedNumber
-                                value={paymentAppData.price / 100.0}
-                                style="currency"
-                                currency={paymentAppData.currency?.toUpperCase()}
-                              />
-                            </IntlProvider>
+                            <>
+                              {new Intl.NumberFormat(i18n.language, {
+                                style: "currency",
+                                currency: paymentAppData.currency,
+                              }).format(paymentAppData.price / 100)}
+                            </>
                          )}
                        </p>
                      )}
@@ -554,7 +554,7 @@ const BookingPage = ({
            {showEventTypeDetails && (
              <div className="sm:border-subtle  text-default flex flex-col px-6 pt-6 pb-0 sm:w-1/2 sm:border-r sm:pb-6">
                <BookingDescription isBookingPage profile={profile} eventType={eventType}>
-                  <BookingDescriptionPayment eventType={eventType} t={t} />
+                  <BookingDescriptionPayment eventType={eventType} t={t} i18n={i18n} />
                  {!rescheduleUid && eventType.recurringEvent?.freq && recurringEventCount && (
                    <div className="dark:text-inverted text-default items-start text-sm font-medium">
                      <RefreshCw className="ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />