add rainbowkit form to v2 event-types (#4349)

Co-authored-by: Omar López <zomars@me.com>

apps/web/components/v2/eventtype/EventAppsTab.tsx

@@ -5,6 +5,7 @@ import { Controller } from "react-hook-form";
 import { FormattedNumber, IntlProvider } from "react-intl";
 
 import { SelectGifInput } from "@calcom/app-store/giphy/components";
+import RainbowInstallForm from "@calcom/app-store/rainbow/components/RainbowInstallForm";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Icon } from "@calcom/ui";
 import { Alert, Button, EmptyScreen, Select, Switch, TextField } from "@calcom/ui/v2";
@@ -46,14 +47,20 @@ export const EventAppsTab = ({
   currency,
   eventType,
   hasGiphyIntegration,
+  hasRainbowIntegration,
 }: Pick<
   EventTypeSetupInfered,
-  "eventType" | "hasPaymentIntegration" | "hasGiphyIntegration" | "currency"
+  "eventType" | "hasPaymentIntegration" | "hasGiphyIntegration" | "hasRainbowIntegration" | "currency"
 >) => {
   const formMethods = useFormContext<FormValues>();
   const [showGifSelection, setShowGifSelection] = useState(
     hasGiphyIntegration && !!eventType.metadata["giphyThankYouPage"]
   );
+  const [showRainbowSection, setShowRainbowSection] = useState(
+    hasRainbowIntegration &&
+      !!eventType.metadata["blockchainId"] &&
+      !!eventType.metadata["smartContractAddress"]
+  );
   const [requirePayment, setRequirePayment] = useState(eventType.price > 0);
   const recurringEventDefined = eventType.recurringEvent?.count !== undefined;
 
@@ -173,6 +180,29 @@ export const EventAppsTab = ({
           )}
         </AppCard>
       )}
+      {hasRainbowIntegration && (
+        <AppCard
+          name="Rainbow"
+          description={t("confirmation_page_rainbow")}
+          logo="/api/app-store/rainbow/icon.svg"
+          switchOnClick={(e) => {
+            if (!e) {
+              formMethods.setValue("blockchainId", 1);
+              formMethods.setValue("smartContractAddress", "");
+            }
+
+            setShowRainbowSection(e);
+          }}
+          switchChecked={showRainbowSection}>
+          {showRainbowSection && (
+            <RainbowInstallForm
+              formMethods={formMethods}
+              blockchainId={(eventType.metadata.blockchainId as number) || 1}
+              smartContractAddress={(eventType.metadata.smartContractAddress as string) || ""}
+            />
+          )}
+        </AppCard>
+      )}
     </div>
   );
 };

apps/web/pages/v2/event-types/[type]/index.tsx

@@ -81,6 +81,8 @@ export type FormValues = {
   };
   successRedirectUrl: string;
   giphyThankYouPage: string;
+  blockchainId: number;
+  smartContractAddress: string;
 };
 
 const querySchema = z.object({
@@ -184,6 +186,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
         eventType={eventType}
         hasPaymentIntegration={props.hasPaymentIntegration}
         hasGiphyIntegration={props.hasGiphyIntegration}
+        hasRainbowIntegration={props.hasRainbowIntegration}
       />
     ),
     workflows: (
@@ -216,6 +219,8 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
             seatsPerTimeSlot,
             recurringEvent,
             locations,
+            blockchainId,
+            smartContractAddress,
             ...input
           } = values;
 
@@ -232,6 +237,8 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
             seatsPerTimeSlot,
             metadata: {
               ...(giphyThankYouPage ? { giphyThankYouPage } : {}),
+              ...(smartContractAddress ? { smartContractAddress } : {}),
+              ...(blockchainId ? { blockchainId } : { blockchainId: 1 }),
             },
           });
         }}>
@@ -425,6 +432,8 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
 
   const hasGiphyIntegration = !!credentials.find((credential) => credential.type === "giphy_other");
 
+  const hasRainbowIntegration = !!credentials.find((credential) => credential.type === "rainbow_web3");
+
   // backwards compat
   if (eventType.users.length === 0 && !eventType.team) {
     const fallbackUser = await prisma.user.findUnique({
@@ -472,6 +481,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
       teamMembers,
       hasPaymentIntegration,
       hasGiphyIntegration,
+      hasRainbowIntegration,
       currency,
       currentUserMembership,
     },

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

@@ -1224,5 +1224,6 @@
   "password_reset_email":"An email is on it’s way to {{email}} with instructions to reset your password.",
   "password_reset_leading":"If you did not receive the email soon, check that the email address you entered is correct, check your spam folder or reach out to support if the issue persists.",
   "password_updated":"Password updated!",
-  "pending_payment": "Pending payment"
+  "pending_payment": "Pending payment",
+  "confirmation_page_rainbow": "Token gate your event with tokens or NFTs on Ethereum, Polygon, and more."
 }