Add payment error message

apps/web/components/team/PurchaseNewTeam.tsx

@@ -1,18 +1,16 @@
 import { PaymentElement, useStripe, useElements } from "@stripe/react-stripe-js";
 import dynamic from "next/dynamic";
 import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 
 import { NewTeamData } from "@calcom/features/ee/teams/lib/types";
 import { CAL_URL } from "@calcom/lib/constants";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Switch, Button } from "@calcom/ui/v2";
+import { Button } from "@calcom/ui/v2";
 
 const PurchaseNewTeam = ({
-  paymentIntent,
-  clientSecret,
   total,
-  billingFrequency,
   newTeamData,
 }: {
   paymentIntent: string;
@@ -21,6 +19,7 @@ const PurchaseNewTeam = ({
   billingFrequency: string;
   newTeamData: NewTeamData;
 }) => {
+  const { t } = useLocale();
   const [errorMessage, setErrorMessage] = useState("");
   const [paymentProcessing, setPaymentProcessing] = useState(false);
   const stripe = useStripe();
@@ -47,7 +46,8 @@ const PurchaseNewTeam = ({
     });
 
     if (error) {
-      console.log("🚀 ~ file: PurchaseNewTeam.tsx ~ line 71 ~ handleSubmit ~ error", error);
+      setPaymentProcessing(false);
+      setErrorMessage(error.message || t("error_processing_payment"));
     } else {
       createTeamMutation.mutate(newTeamData);
     }
@@ -60,9 +60,9 @@ const PurchaseNewTeam = ({
         className="mt-4 w-full justify-center"
         loading={paymentProcessing}
         onClick={() => handleSubmit()}>
-        Pay ${total} / {billingFrequency}
+        Pay ${total} / {newTeamData.billingFrequency}
       </Button>
-      <p>Error processing payment: {errorMessage}</p>
+      {errorMessage && <p className="mt-2 text-red-900">Error processing payment: {errorMessage}</p>}
     </>
   );
 };

apps/web/pages/settings/teams/new/[[...step]].tsx

@@ -69,6 +69,10 @@ const CreateNewTeamPage = () => {
       title: `${t("add_team_members")}`,
       subtitle: [`${t("add_team_members_description")}`],
     },
+    {
+      title: `${t("purchase_team_subscription")}`,
+      subtitle: [`${t("purchase_team_subscription_description")}`],
+    },
   ];
 
   const goToIndex = (index: number) => {

apps/web/public/static/locales/en/common.json

@@ -1353,5 +1353,8 @@
   "number_sms_notifications": "Phone number (SMS\u00a0notifications)",
   "attendee_email_workflow": "Attendee email",
   "attendee_email_info": "The person booking's email",
-  "invalid_credential": "Oh no! Looks like permission expired or was revoked. Please reinstall again."
+  "invalid_credential": "Oh no! Looks like permission expired or was revoked. Please reinstall again.",
+  "purchase_team_subscription": "Purchase team subscription",
+  "purchase_team_subscription_description": "All payment details are handled by Stripe",
+  "error_processing_payment": "Error processing payment"
 }

packages/features/ee/teams/components/v2/AddNewTeamMembers.tsx

@@ -168,35 +168,39 @@ const AddNewTeamMembers = ({
                 members={formMethods.getValues("members")}
               />
 
-              <div className="mt-6 flex justify-between">
-                <p>Total</p>
-                <div>
-                  <p>
-                    {numberOfMembers} members x ${teamPrices[billingFrequency as keyof typeof teamPrices]} /{" "}
-                    {billingFrequency} ={" "}
-                    {numberOfMembers * teamPrices[billingFrequency as keyof typeof teamPrices]}
-                  </p>
-                </div>
-              </div>
-              <hr />
+              <hr className="mb-4 mt-6" />
+
               <Controller
                 control={formMethods.control}
                 name="billingFrequency"
                 defaultValue={"monthly"}
-                render={(field: { value }) => (
-                  <div className="mt-4 flex space-x-2">
+                render={() => (
+                  <div className="flex space-x-2">
                     <Switch
-                      onCheckedChange={(e) =>
-                        formMethods.setValue("billingFrequency", e ? "yearly" : "monthly")
-                      }
+                      onCheckedChange={(e) => {
+                        formMethods.setValue("billingFrequency", e ? "yearly" : "monthly");
+                        setBillingFrequency(e ? "yearly" : "monthly");
+                      }}
                     />
                     <p>
-                      Switch to yearly and save{" "}
+                      Switch to yearly and save $
                       {numberOfMembers * (teamPrices.monthly * 12 - teamPrices.yearly)}
                     </p>
                   </div>
                 )}
               />
+
+              <div className="mt-6 flex justify-between">
+                <p>Total</p>
+                <div>
+                  <p>
+                    {numberOfMembers} members × ${teamPrices[billingFrequency as keyof typeof teamPrices]} /{" "}
+                    {billingFrequency} = $
+                    {numberOfMembers * teamPrices[billingFrequency as keyof typeof teamPrices]}
+                  </p>
+                </div>
+              </div>
+
               <Button EndIcon={Icon.FiArrowRight} className="mt-6 w-full justify-center" type="submit">
                 {t("checkout")}
               </Button>