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
@@ -2,7 +2,6 @@ import classNames from "classnames";
 import Head from "next/head";
 import type { FC } from "react";
 import { useEffect, useState } from "react";
-import { FormattedNumber, IntlProvider } from "react-intl";

 import { getSuccessPageLocationMessage } from "@calcom/app-store/locations";
 import dayjs from "@calcom/dayjs";
@@ -19,7 +18,7 @@ import type { PaymentPageProps } from "../pages/payment";
 import PaymentComponent from "./Payment";

 const PaymentPage: FC<PaymentPageProps> = (props) => {
-  const { t } = useLocale();
+  const { t, i18n } = useLocale();
  const [is24h, setIs24h] = useState(isBrowserLocale24h());
  const [date, setDate] = useState(dayjs.utc(props.booking.startTime));
  const [timezone, setTimezone] = useState<string | null>(null);
@@ -107,13 +106,10 @@ const PaymentPage: FC<PaymentPageProps> = (props) => {
                        {props.payment.paymentOption === "HOLD" ? t("no_show_fee") : t("price")}
                      </div>
                      <div className="col-span-2 mb-6 font-semibold">
-                        <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.0)}
                      </div>
                    </div>
                  </div>