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,5 +1,5 @@
+import { i18n } from "next-i18next";
 import type { TFunction } from "next-i18next";
-import { FormattedNumber, IntlProvider } from "react-intl";

 import getPaymentAppData from "@calcom/lib/getPaymentAppData";
 import { CreditCard } from "@calcom/ui/components/icon";
@@ -7,28 +7,29 @@ import { CreditCard } from "@calcom/ui/components/icon";
 const BookingDescriptionPayment = (props: {
  eventType: Parameters<typeof getPaymentAppData>[0];
  t: TFunction;
+  i18n: typeof i18n;
 }) => {
  const paymentAppData = getPaymentAppData(props.eventType);
  if (!paymentAppData || paymentAppData.price <= 0) return null;

+  const params = {
+    amount: paymentAppData.price / 100.0,
+    formatParams: { amount: { currency: paymentAppData.currency } },
+  };
+
  return (
    <p className="text-bookinglight -ml-2 px-2 text-sm ">
      <CreditCard className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
      {paymentAppData.paymentOption === "HOLD" ? (
-        <>
-          {props.t("no_show_fee_amount", {
-            amount: paymentAppData.price / 100.0,
-            formatParams: { amount: { currency: paymentAppData.currency } },
-          })}
-        </>
+        <>{props.t("no_show_fee_amount", params)}</>
      ) : (
-        <IntlProvider locale="en">
-          <FormattedNumber
-            value={paymentAppData.price / 100.0}
-            style="currency"
-            currency={paymentAppData.currency?.toUpperCase()}
-          />
-        </IntlProvider>
+        <>
+          {/* If undefined this will default to the browser locale */}
+          {new Intl.NumberFormat(i18n?.language, {
+            style: "currency",
+            currency: paymentAppData.currency,
+          }).format(paymentAppData.price / 100)}
+        </>
      )}
    </p>
  );