feat: add "somewhere else" as a location option (#15108)

* feat: add somewhere else as a location

* update

* update

* Update BookingFields.tsx

* update

* update

* chore: changes

* fix

apps/web/components/dialog/EditLocationDialog.tsx

@@ -337,7 +337,9 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
                   });
                   if (booking) {
                     locationOptions.map((location) =>
-                      location.options.filter((l) => !["phone", "attendeeInPerson"].includes(l.value))
+                      location.options.filter(
+                        (l) => !["phone", "attendeeInPerson", "somewhereElse"].includes(l.value)
+                      )
                     );
                   }
                   return (

apps/web/public/message-pin.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9h8m-8 4h6m-1.993 5.596L8 21v-3H6a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v4.5m.121 8.621a3 3 0 1 0-4.242 0Q17.506 20.749 19 22q1.577-1.335 2.121-1.879M19 18v.01"/></svg>

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

@@ -589,6 +589,9 @@
   "address": "Address",
   "enter_address": "Enter address",
   "in_person_attendee_address": "In Person (Attendee Address)",
+  "somewhere_else": "Somewhere Else",
+  "custom_attendee_location":"Custom attendee location",
+  "any_location": "Any location",
   "yes": "Yes",
   "no": "No",
   "additional_notes": "Additional notes",

packages/app-store/locations.ts

@@ -26,7 +26,14 @@ export type DefaultEventLocationType = {
     | "locationPhoneNumber"
     | "phone"
     | "hostDefault";
-  defaultValueVariable: "address" | "attendeeAddress" | "link" | "hostPhoneNumber" | "hostDefault" | "phone";
+  defaultValueVariable:
+    | "address"
+    | "attendeeAddress"
+    | "link"
+    | "hostPhoneNumber"
+    | "hostDefault"
+    | "phone"
+    | "somewhereElse";
 } & (
   | {
       organizerInputType: "phone" | "text" | null;
@@ -35,7 +42,7 @@ export type DefaultEventLocationType = {
       attendeeInputPlaceholder?: null;
     }
   | {
-      attendeeInputType: "phone" | "attendeeAddress" | null;
+      attendeeInputType: "phone" | "attendeeAddress" | "somewhereElse" | null;
       attendeeInputPlaceholder: string;
       organizerInputType?: null;
       organizerInputPlaceholder?: null;
@@ -78,6 +85,7 @@ export enum DefaultEventLocationTypeEnum {
   Link = "link",
   // Same as `OrganizerDefaultConferencingAppType`
   Conferencing = "conferencing",
+  SomewhereElse = "somewhereElse",
 }
 
 export const defaultLocations: DefaultEventLocationType[] = [
@@ -94,6 +102,19 @@ export const defaultLocations: DefaultEventLocationType[] = [
     iconUrl: "/map-pin-dark.svg",
     category: "in person",
   },
+  {
+    default: true,
+    type: DefaultEventLocationTypeEnum.SomewhereElse,
+    label: "custom_attendee_location",
+    variable: "address",
+    organizerInputType: null,
+    messageForOrganizer: "Cal will ask your invitee to enter any location before scheduling.",
+    attendeeInputType: "somewhereElse",
+    attendeeInputPlaceholder: "any_location",
+    defaultValueVariable: "somewhereElse",
+    iconUrl: "/message-pin.svg",
+    category: "other",
+  },
   {
     default: true,
     type: DefaultEventLocationTypeEnum.InPerson,
@@ -163,6 +184,8 @@ const translateAbleKeys = [
   "link_meeting",
   "organizer_phone_number",
   "organizer_default_conferencing_app",
+  "somewhere_else",
+  "custom_attendee_location",
 ];
 
 export type LocationObject = {
@@ -171,7 +194,10 @@ export type LocationObject = {
   displayLocationPublicly?: boolean;
   credentialId?: number;
 } & Partial<
-  Record<"address" | "attendeeAddress" | "link" | "hostPhoneNumber" | "hostDefault" | "phone", string>
+  Record<
+    "address" | "attendeeAddress" | "link" | "hostPhoneNumber" | "hostDefault" | "phone" | "somewhereElse",
+    string
+  >
 >;
 
 // integrations:jitsi | 919999999999 | Delhi | https://manual.meeting.link | Around Video

packages/features/bookings/lib/getBookingFields.ts

@@ -176,6 +176,11 @@ export const ensureBookingInputsHaveSystemFields = ({
           required: true,
           placeholder: "",
         },
+        somewhereElse: {
+          type: "text",
+          required: true,
+          placeholder: "",
+        },
         phone: {
           type: "phone",
           required: true,

packages/features/eventtypes/lib/types.ts

@@ -60,6 +60,7 @@ export type FormValues = {
     type: EventLocationType["type"];
     address?: string;
     attendeeAddress?: string;
+    somewhereElse?: string;
     link?: string;
     hostPhoneNumber?: string;
     displayLocationPublicly?: boolean;

packages/features/form-builder/Components.tsx

@@ -454,7 +454,9 @@ export const Components: Record<FieldType, Component> = {
                         checked={value?.value === option.value}
                       />
                       <span className="text-emphasis me-2 ms-2 text-sm">
-                        {getCleanLabel(option.label) ?? ""}
+                        {option.value === "somewhereElse"
+                          ? t("somewhere_else")
+                          : getCleanLabel(option.label) ?? ""}
                       </span>
                       <span>
                         {option.value === "phone" && (
@@ -467,13 +469,15 @@ export const Components: Record<FieldType, Component> = {
               ) : (
                 // Use the only option itself to determine if the field is required or not.
                 <>
-                  <Label className="flex">
+                  <Label className="flex items-center">
                     {/* We still want to show the label of the field if it is changed by the user otherwise the best label would be the option label */}
-                    {getCleanLabel(
-                      didUserProvideLabel(label, translatedDefaultLabel) ? label : options[0].label
-                    )}
+                    {options[0].value === "somewhereElse"
+                      ? translatedDefaultLabel
+                      : getCleanLabel(
+                          didUserProvideLabel(label, translatedDefaultLabel) ? label : options[0].label
+                        )}
                     {!readOnly && optionsInputs[options[0].value]?.required ? (
-                      <span className="text-default mb-1 ml-1 text-sm font-medium">*</span>
+                      <span className="text-default -mb-2 ml-1 text-sm font-medium">*</span>
                     ) : null}
                     {options[0].value === "phone" && (
                       <InfoBadge content={t("number_in_international_format")} />