feat: show-utm-params (#20733)

* feat:utm

* locale

* yarn.lock

* fix-typecheck

* indentation

* edge-case

* Update apps/web/modules/bookings/views/bookings-single-view.tsx

* Update apps/web/modules/bookings/views/bookings-single-view.tsx

apps/web/modules/bookings/views/bookings-single-view.tsx

@@ -150,6 +150,10 @@ export default function Success(props: PageProps) {
   const { data: session } = useSession();
   const isHost = props.isLoggedInUserHost;
 
+  const [showUtmParams, setShowUtmParams] = useState(false);
+
+  const utmParams = bookingInfo.tracking;
+
   const [date, setDate] = useState(dayjs.utc(bookingInfo.startTime));
   const calendarLinks = getCalendarLinks({
     booking: bookingWithParsedMetadata,
@@ -681,6 +685,46 @@ export default function Success(props: PageProps) {
                             </div>
                           </>
                         )}
+                        {!!utmParams && isHost && (
+                          <>
+                            <div className="mt-9 pr-2 font-medium sm:pr-0">{t("utm_params")}</div>
+                            <div className="col-span-2 mb-2 ml-3 mt-9 sm:ml-0">
+                              <button
+                                data-testid="utm-dropdown"
+                                onClick={() => {
+                                  setShowUtmParams((prev) => !prev);
+                                }}
+                                className="font-medium transition hover:text-blue-500 focus:outline-none">
+                                <div className="flex items-center gap-1">
+                                  {showUtmParams ? t("hide") : t("show")}
+                                  <Icon
+                                    name={showUtmParams ? "chevron-up" : "chevron-down"}
+                                    className="size-4"
+                                  />
+                                </div>
+                              </button>
+
+                              {showUtmParams && (
+                                <div className="col-span-2 mb-2 mt-2">
+                                  {Object.entries(utmParams).filter(([_, value]) => Boolean(value)).length >
+                                  0 ? (
+                                    <ul className="list-disc space-y-1 p-1 pl-5 sm:w-80">
+                                      {Object.entries(utmParams)
+                                        .filter(([_, value]) => Boolean(value))
+                                        .map(([key, value]) => (
+                                          <li key={key} className="text-muted space-x-1 text-sm">
+                                            <span>{key}</span>: <span>{value}</span>
+                                          </li>
+                                        ))}
+                                    </ul>
+                                  ) : (
+                                    <p className="text-muted text-sm">{t("no_utm_params")}</p>
+                                  )}
+                                </div>
+                              )}
+                            </div>
+                          </>
+                        )}
                       </div>
                       <div className="text-bookingdark dark:border-darkgray-200 mt-8 text-left dark:text-gray-300">
                         {eventType.bookingFields.map((field) => {

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

@@ -3002,6 +3002,9 @@
   "authorize": "Authorize",
   "next": "Next",
   "hide": "Hide",
+  "show":"Show",
+  "utm_params":"UTM parameters",
+  "no_utm_params":"No UTM parameters available.",
   "asc": "Asc",
   "desc": "Desc",
   "verify_email_change": "Verify email change",

packages/features/bookings/lib/getUserBooking.ts

@@ -61,6 +61,15 @@ const getUserBooking = async (uid: string) => {
           referenceUid: true,
         },
       },
+      tracking: {
+        select: {
+          utm_source: true,
+          utm_medium: true,
+          utm_campaign: true,
+          utm_term: true,
+          utm_content: true,
+        },
+      },
     },
   });