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,5 @@
-import { Trans } from "next-i18next";
 import { useState } from "react";
 import type { Dispatch, SetStateAction } from "react";
-import { IntlProvider, FormattedNumber } from "react-intl";

 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
@@ -40,6 +38,11 @@ export const ChargeCardDialog = (props: IRescheduleDialog) => {
    },
  });

+  const currencyStringParams = {
+    amount: props.paymentAmount / 100.0,
+    formatParams: { amount: { currency: props.paymentCurrency } },
+  };
+
  return (
    <Dialog open={isOpenDialog} onOpenChange={setIsOpenDialog}>
      <DialogContent>
@@ -49,19 +52,7 @@ export const ChargeCardDialog = (props: IRescheduleDialog) => {
          </div>
          <div className="pt-1">
            <DialogHeader title={t("charge_card")} />
-            <Trans i18nKey="charge_card_dialog_body">
-              <p className="text-sm text-gray-500">
-                You are about to charge the attendee{" "}
-                <IntlProvider locale="en">
-                  <FormattedNumber
-                    value={props.paymentAmount / 100.0}
-                    style="currency"
-                    currency={props.paymentCurrency?.toUpperCase()}
-                  />
-                </IntlProvider>
-                . Are you sure you want to continue?
-              </p>
-            </Trans>
+            <p>{t("charge_card_dialog_body", currencyStringParams)}</p>

            {chargeError && (
              <div className="mt-4 flex text-red-500">
@@ -80,16 +71,7 @@ export const ChargeCardDialog = (props: IRescheduleDialog) => {
                    bookingId,
                  })
                }>
-                <Trans i18nKey="charge_card_confirm">
-                  Charge attendee{" "}
-                  <IntlProvider locale="en">
-                    <FormattedNumber
-                      value={props.paymentAmount / 100.0}
-                      style="currency"
-                      currency={props.paymentCurrency?.toUpperCase()}
-                    />
-                  </IntlProvider>
-                </Trans>
+                {t("charge_attendee", currencyStringParams)}
              </Button>
            </DialogFooter>
          </div>