mythic-insight/calcom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

Add Web Share in mobile (#1810)

Browse source 
* Add navigator.share in mobile

* Validate navigator.share in useEffect

* Add new Button with navigator.share condition

* Add new Icons

* Solve check types
This commit is contained in:
Juan Esteban Nieto Cifuentes 2022-02-18 12:34:53 -05:00 committed by GitHub
parent c8ae414ecf
commit 75d19e0e7d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 42 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
apps/web/pages/event-types/index.tsx
View file

@ -7,6 +7,8 @@ import {
ExternalLinkIcon, ExternalLinkIcon,
LinkIcon, LinkIcon,
UsersIcon, UsersIcon,
UploadIcon,
ClipboardCopyIcon,
} from "@heroicons/react/solid"; } from "@heroicons/react/solid";
import { Trans } from "next-i18next"; import { Trans } from "next-i18next";
import Head from "next/head"; 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 ( return (
<div className="-mx-4 mb-16 overflow-hidden rounded-sm border border-gray-200 bg-white sm:mx-0"> <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"> <ul className="divide-y divide-neutral-200" data-testid="event-types">
@ -228,16 +238,16 @@ const EventTypeList = ({ readOnly, types, profile }: EventTypeListProps): JSX.El
{({ active }) => ( {({ active }) => (
<button <button
onClick={() => { onClick={() => {
showToast("Link copied!", "success");
navigator.clipboard.writeText( navigator.clipboard.writeText(
`${process.env.NEXT_PUBLIC_APP_URL}/${profile.slug}/${type.slug}` `${process.env.NEXT_PUBLIC_APP_URL}/${profile.slug}/${type.slug}`
); );
showToast(t("link_copied"), "success");
}} }}
className={classNames( className={classNames(
active ? "bg-neutral-100 text-neutral-900" : "text-neutral-700", active ? "bg-neutral-100 text-neutral-900" : "text-neutral-700",
"group flex w-full items-center px-4 py-2 text-sm font-medium" "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" className="mr-3 h-4 w-4 text-neutral-400 group-hover:text-neutral-500"
aria-hidden="true" aria-hidden="true"
/> />
@ -245,6 +255,33 @@ const EventTypeList = ({ readOnly, types, profile }: EventTypeListProps): JSX.El
</button> </button>
)} )}
</Menu.Item> </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> </div>
</Menu.Items> </Menu.Items>
</Transition> </Transition>

3
apps/web/public/static/locales/en/common.json
View file

@ -453,6 +453,8 @@
"pending": "Pending", "pending": "Pending",
"open_options": "Open options", "open_options": "Open options",
"copy_link": "Copy link to event", "copy_link": "Copy link to event",
"share": "Share",
"share_event": "Share event",
"copy_link_team": "Copy link to team", "copy_link_team": "Copy link to team",
"leave_team": "Leave team", "leave_team": "Leave team",
"confirm_leave_team": "Yes, leave team", "confirm_leave_team": "Yes, leave team",
@ -460,6 +462,7 @@
"user_from_team": "{{user}} from {{team}}", "user_from_team": "{{user}} from {{team}}",
"preview": "Preview", "preview": "Preview",
"link_copied": "Link copied!", "link_copied": "Link copied!",
"link_shared": "Link shared!",
"title": "Title", "title": "Title",
"description": "Description", "description": "Description",
"quick_video_meeting": "A quick video meeting.", "quick_video_meeting": "A quick video meeting.",