From 75d19e0e7d57c4106dc299119605cfbf6a7f3c60 Mon Sep 17 00:00:00 2001
From: Juan Esteban Nieto Cifuentes
 <89233604+Jenietoc@users.noreply.github.com>
Date: Fri, 18 Feb 2022 12:34:53 -0500
Subject: [PATCH] Add Web Share in mobile (#1810)

* Add navigator.share in mobile

* Validate navigator.share in useEffect

* Add new Button with navigator.share condition

* Add new Icons

* Solve check types
---
 apps/web/pages/event-types/index.tsx          | 41 ++++++++++++++++++-
 apps/web/public/static/locales/en/common.json |  3 ++
 2 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/apps/web/pages/event-types/index.tsx b/apps/web/pages/event-types/index.tsx
index 01bd6c4b..789d764e 100644
--- a/apps/web/pages/event-types/index.tsx
+++ b/apps/web/pages/event-types/index.tsx
@@ -7,6 +7,8 @@ import {
   ExternalLinkIcon,
   LinkIcon,
   UsersIcon,
+  UploadIcon,
+  ClipboardCopyIcon,
 } from "@heroicons/react/solid";
 import { Trans } from "next-i18next";
 import Head from "next/head";
@@ -92,6 +94,14 @@ const EventTypeList = ({ readOnly, types, profile }: EventTypeListProps): JSX.El
     });
   }
 
+  const [isNativeShare, setNativeShare] = useState(true);
+
+  useEffect(() => {
+    if (!navigator.share) {
+      setNativeShare(false);
+    }
+  }, []);
+
   return (
     <div className="-mx-4 mb-16 overflow-hidden rounded-sm border border-gray-200 bg-white sm:mx-0">
       <ul className="divide-y divide-neutral-200" data-testid="event-types">
@@ -228,16 +238,16 @@ const EventTypeList = ({ readOnly, types, profile }: EventTypeListProps): JSX.El
                               {({ active }) => (
                                 <button
                                   onClick={() => {
-                                    showToast("Link copied!", "success");
                                     navigator.clipboard.writeText(
                                       `${process.env.NEXT_PUBLIC_APP_URL}/${profile.slug}/${type.slug}`
                                     );
+                                    showToast(t("link_copied"), "success");
                                   }}
                                   className={classNames(
                                     active ? "bg-neutral-100 text-neutral-900" : "text-neutral-700",
                                     "group flex w-full items-center px-4 py-2 text-sm font-medium"
                                   )}>
-                                  <LinkIcon
+                                  <ClipboardCopyIcon
                                     className="mr-3 h-4 w-4 text-neutral-400 group-hover:text-neutral-500"
                                     aria-hidden="true"
                                   />
@@ -245,6 +255,33 @@ const EventTypeList = ({ readOnly, types, profile }: EventTypeListProps): JSX.El
                                 </button>
                               )}
                             </Menu.Item>
+                            {isNativeShare ? (
+                              <Menu.Item>
+                                {({ active }) => (
+                                  <button
+                                    onClick={() => {
+                                      navigator
+                                        .share({
+                                          title: t("share"),
+                                          text: t("share_event"),
+                                          url: `${process.env.NEXT_PUBLIC_APP_URL}/${profile.slug}/${type.slug}`,
+                                        })
+                                        .then(() => showToast(t("link_shared"), "success"))
+                                        .catch(() => showToast(t("failed"), "error"));
+                                    }}
+                                    className={classNames(
+                                      active ? "bg-neutral-100 text-neutral-900" : "text-neutral-700",
+                                      "group flex w-full items-center px-4 py-2 text-sm font-medium"
+                                    )}>
+                                    <UploadIcon
+                                      className="mr-3 h-4 w-4 text-neutral-400 group-hover:text-neutral-500"
+                                      aria-hidden="true"
+                                    />
+                                    {t("share")}
+                                  </button>
+                                )}
+                              </Menu.Item>
+                            ) : null}
                           </div>
                         </Menu.Items>
                       </Transition>
diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json
index a603c0eb..7885d25a 100644
--- a/apps/web/public/static/locales/en/common.json
+++ b/apps/web/public/static/locales/en/common.json
@@ -453,6 +453,8 @@
   "pending": "Pending",
   "open_options": "Open options",
   "copy_link": "Copy link to event",
+  "share": "Share",
+  "share_event": "Share event",
   "copy_link_team": "Copy link to team",
   "leave_team": "Leave team",
   "confirm_leave_team": "Yes, leave team",
@@ -460,6 +462,7 @@
   "user_from_team": "{{user}} from {{team}}",
   "preview": "Preview",
   "link_copied": "Link copied!",
+  "link_shared": "Link shared!",
   "title": "Title",
   "description": "Description",
   "quick_video_meeting": "A quick video meeting.",