Add/Edit location dialog: "can't find the right video app? visit our app store" (#4990)

Co-authored-by: Nitesh Singh <nitesh.singh@gitstart.dev>
Co-authored-by: Matheus Benini Ferreira <88898100+MatheusBeniniF@users.noreply.github.com>
Co-authored-by: gitstart <gitstart@users.noreply.github.com>
Co-authored-by: gitstart <gitstart@gitstart.com>
Co-authored-by: Rafael Toledo <87545086+Toledodev@users.noreply.github.com>
Co-authored-by: Matheus Benini <matheus_benini@hotmail.com>
Co-authored-by: Murilo Amaral <87545137+MuriloAmarals@users.noreply.github.com>
Co-authored-by: Rubens Rafael <70234898+RubensRafael@users.noreply.github.com>
Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>
Co-authored-by: Rafael <rafael.toledo@engenharia.ufjf.br>
Co-authored-by: Grace Nshokano <grace.devolop@gmail.com>
Co-authored-by: MuriloAmarals <muralha2000@gmail.com>
Co-authored-by: Matheus Muniz <matheusmuniz100@hotmail.com>
Co-authored-by: Júlio Piubello da Silva Cabral <julio.piubello@gitstart.dev>
Co-authored-by: Matheus Muniz <87545749+matheusmuniz03@users.noreply.github.com>
Co-authored-by: C000Ldude <coolmagnas@gmail.com>
Co-authored-by: Klinger Matheus <50892465+KlingerMatheus@users.noreply.github.com>
Co-authored-by: Eman <emmanuelgatwech@gmail.com>

apps/web/components/ui/LinkText.tsx

@@ -4,16 +4,19 @@ interface ILinkTextProps {
   href: string;
   children: React.ReactNode;
   classNameChildren?: string;
+  target?: string;
 }
 /**
  * This component had to be made in order to make i18n work with next/link
  * @see https://github.com/i18next/react-i18next/issues/1090#issuecomment-615426145
  **/
 export const LinkText = (props: ILinkTextProps) => {
-  const { href, children, classNameChildren, ...moreProps } = props;
+  const { target, href, children, classNameChildren, ...moreProps } = props;
   return (
     <Link href={href || ""} {...moreProps}>
-      <a className={classNameChildren}>{children}</a>
+      <a target={target || ""} className={classNameChildren}>
+        {children}
+      </a>
     </Link>
   );
 };

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

@@ -1,6 +1,7 @@
 import { ErrorMessage } from "@hookform/error-message";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { isValidPhoneNumber } from "libphonenumber-js";
+import { Trans } from "next-i18next";
 import { useEffect } from "react";
 import { Controller, useForm, useWatch } from "react-hook-form";
 import { z } from "zod";
@@ -24,6 +25,7 @@ import { Select } from "@calcom/ui/v2/";
 
 import { QueryCell } from "@lib/QueryCell";
 
+import { LinkText } from "@components/ui/LinkText";
 import CheckboxField from "@components/ui/form/CheckboxField";
 
 type BookingItem = inferQueryOutput<"viewer.bookings">["bookings"][number];
@@ -308,6 +310,17 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
             }}
           />
           {selectedLocation && LocationOptions}
+          <div className="mt-5">
+            <p className="text-sm text-gray-400">
+              <Trans i18nKey="cant_find_the_right_video_app_visit_our_app_store">
+                Can&apos;t find the right video app? Visit our
+                <LinkText href="/apps/categories/video" classNameChildren="text-blue-400" target="_blank">
+                  App Store
+                </LinkText>
+                .
+              </Trans>
+            </p>
+          </div>
           <div className="mt-4 flex justify-end space-x-2">
             <Button
               onClick={() => {

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

@@ -1303,6 +1303,7 @@
   "how_long_after": "How long after event ends?",
   "no_available_slots": "No Available slots",
   "time_available": "Time available",
+  "cant_find_the_right_video_app_visit_our_app_store": "Can't find the right video app? Visit our <1>App Store</1>.",
   "install_new_calendar_app": "Install new calendar app",
   "make_phone_number_required": "Make phone number required for booking event",
   "dont_have_permission": "You don't have permission to access this resource.",