Add successful booking redirect URL to booking page (#4871)

* Add redirect URL field and switch

* Remove and add new translation for description

Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>

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

@@ -40,6 +40,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
   const { t } = useLocale();
   const [showEventNameTip, setShowEventNameTip] = useState(false);
   const [hashedLinkVisible, setHashedLinkVisible] = useState(!!eventType.hashedLink);
+  const [redirectUrlVisible, setRedirectUrlVisible] = useState(!!eventType.successRedirectUrl);
   const [hashedUrl, setHashedUrl] = useState(eventType.hashedLink?.link);
   const [seatsInputVisible, setSeatsInputVisible] = useState(!!eventType.seatsPerTimeSlot);
   const [customInputs, setCustomInputs] = useState<EventTypeCustomInput[]>(
@@ -248,6 +249,48 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
         )}
       />
       <hr />
+
+      <Controller
+        name="successRedirectUrl"
+        control={formMethods.control}
+        defaultValue={hashedUrl}
+        render={({ field: { value, onChange } }) => (
+          <>
+            <div className="flex space-x-3 ">
+              <Switch
+                name="successRedirectUrlCheck"
+                fitToHeight={true}
+                defaultChecked={redirectUrlVisible}
+                onCheckedChange={(e) => {
+                  setRedirectUrlVisible(e);
+                  onChange(e ? value : "");
+                }}
+              />
+              <div className="flex flex-col">
+                <Skeleton as={Label} className="text-sm font-semibold leading-none text-black">
+                  {t("redirect_success_booking")}
+                </Skeleton>
+                <Skeleton as="p" className="-mt-2 text-sm leading-normal text-gray-600">
+                  {t("redirect_url_description")}
+                </Skeleton>
+              </div>
+            </div>
+            {redirectUrlVisible && (
+              <div className="">
+                <TextField
+                  label={t("redirect_success_booking")}
+                  placeholder={t("external_redirect_url")}
+                  required={redirectUrlVisible}
+                  type="text"
+                  defaultValue={eventType.successRedirectUrl || ""}
+                  {...formMethods.register("successRedirectUrl")}
+                />
+              </div>
+            )}
+          </>
+        )}
+      />
+      <hr />
       <Controller
         name="hashedLink"
         control={formMethods.control}

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

@@ -837,7 +837,7 @@
   "redirect_success_booking": "Redirect on booking ",
   "you_are_being_redirected": "You are being redirected to {{ url }} in $t(second, {\"count\": {{seconds}} }).",
   "external_redirect_url": "https://example.com/redirect-to-my-success-page",
-  "redirect_url_upgrade_description": "In order to use this feature, you need to upgrade to a Pro account.",
+  "redirect_url_description": "Redirect to a custom URL after a successful booking",
   "duplicate": "Duplicate",
   "offer_seats": "Offer seats",
   "offer_seats_description": "Offer seats for booking. This automatically disables guest & opt-in bookings.",