From 687af03cc3938942f360fe7cd81c8265ddf2de4f Mon Sep 17 00:00:00 2001
From: Bailey Pumfleet <pumfleet@hey.com>
Date: Tue, 19 Oct 2021 11:35:52 +0100
Subject: [PATCH] Improve iframe embed UI (#990)

---
 pages/integrations/index.tsx  | 93 +++++++++++++++++++++++------------
 public/integrations/embed.svg | 15 ++++++
 2 files changed, 76 insertions(+), 32 deletions(-)
 create mode 100644 public/integrations/embed.svg

diff --git a/pages/integrations/index.tsx b/pages/integrations/index.tsx
index 6acccad424..e7fcd49fb8 100644
--- a/pages/integrations/index.tsx
+++ b/pages/integrations/index.tsx
@@ -1,4 +1,5 @@
 import { PencilAltIcon, TrashIcon } from "@heroicons/react/outline";
+import { ClipboardIcon } from "@heroicons/react/solid";
 import { WebhookTriggerEvents } from "@prisma/client";
 import Image from "next/image";
 import { getErrorFromUnknown } from "pages/_error";
@@ -52,8 +53,8 @@ function WebhookListItem(props: { webhook: TWebhook; onEditWebhook: () => void }
   });
 
   return (
-    <ListItem className="p-4 flex w-full">
-      <div className="flex w-full justify-between my-4">
+    <ListItem className="flex w-full p-4">
+      <div className="flex justify-between w-full my-4">
         <div className="flex pr-2 border-r border-gray-100">
           <span className="flex flex-col space-y-2 text-xs">
             {props.webhook.eventTriggers.map((eventTrigger, ind) => (
@@ -284,40 +285,68 @@ function WebhookEmbed(props: { webhooks: TWebhook[] }) {
         </div>
       </div>
 
-      <ShellSubHeading className="mt-10" title={t("iframe_embed")} subtitle={t("embed_calcom")} />
-      <div className="py-6 lg:pb-8 lg:col-span-9">
-        <div className="mb-6">
-          <h2 className="text-lg font-medium leading-6 text-gray-900 font-cal"></h2>
-          <p className="mt-1 text-sm text-gray-500"></p>
-        </div>
+      <ShellSubHeading title={t("iframe_embed")} subtitle={t("embed_calcom")} />
+      <div className="lg:pb-8 lg:col-span-9">
+        <List>
+          <ListItem className={classNames("flex-col")}>
+            <div className={classNames("flex flex-1 space-x-2 w-full p-3 items-center")}>
+              <Image width={40} height={40} src="/integrations/embed.svg" alt="Embed" />
+              <div className="flex-grow pl-2 truncate">
+                <ListItemTitle component="h3">{t("standard_iframe")}</ListItemTitle>
+                <ListItemText component="p">Embed your calendar within your webpage</ListItemText>
+              </div>
+              <div>
+                <input
+                  id="iframe"
+                  className="px-2 py-1 text-sm text-gray-500 focus:ring-black focus:border-black"
+                  placeholder={t("loading")}
+                  defaultValue={iframeTemplate}
+                  readOnly
+                />
+                <button
+                  onClick={() => {
+                    navigator.clipboard.writeText(iframeTemplate);
+                    showToast("Copied to clipboard", "success");
+                  }}>
+                  <ClipboardIcon className="w-4 h-4 -mb-0.5 mr-2 text-gray-800" />
+                </button>
+              </div>
+            </div>
+          </ListItem>
+          <ListItem className={classNames("flex-col")}>
+            <div className={classNames("flex flex-1 space-x-2 w-full p-3 items-center")}>
+              <Image width={40} height={40} src="/integrations/embed.svg" alt="Embed" />
+              <div className="flex-grow pl-2 truncate">
+                <ListItemTitle component="h3">{t("responsive_fullscreen_iframe")}</ListItemTitle>
+                <ListItemText component="p">A fullscreen scheduling experience on your website</ListItemText>
+              </div>
+              <div>
+                <input
+                  id="fullscreen"
+                  className="px-2 py-1 text-sm text-gray-500 focus:ring-black focus:border-black"
+                  placeholder={t("loading")}
+                  defaultValue={htmlTemplate}
+                  readOnly
+                />
+                <button
+                  onClick={() => {
+                    navigator.clipboard.writeText(htmlTemplate);
+                    showToast("Copied to clipboard", "success");
+                  }}>
+                  <ClipboardIcon className="w-4 h-4 -mb-0.5 mr-2 text-gray-800" />
+                </button>
+              </div>
+            </div>
+          </ListItem>
+        </List>
         <div className="grid grid-cols-2 space-x-4">
           <div>
-            <label htmlFor="iframe" className="block text-sm font-medium text-gray-700">
-              {t("standard_iframe")}
-            </label>
-            <div className="mt-1">
-              <textarea
-                id="iframe"
-                className="block w-full h-32 border-gray-300 rounded-sm shadow-sm focus:ring-black focus:border-black sm:text-sm"
-                placeholder={t("loading")}
-                defaultValue={iframeTemplate}
-                readOnly
-              />
-            </div>
+            <label htmlFor="iframe" className="block text-sm font-medium text-gray-700"></label>
+            <div className="mt-1"></div>
           </div>
           <div>
-            <label htmlFor="fullscreen" className="block text-sm font-medium text-gray-700">
-              {t("responsive_fullscreen_iframe")}
-            </label>
-            <div className="mt-1">
-              <textarea
-                id="fullscreen"
-                className="block w-full h-32 border-gray-300 rounded-sm shadow-sm focus:ring-black focus:border-black sm:text-sm"
-                placeholder={t("loading")}
-                defaultValue={htmlTemplate}
-                readOnly
-              />
-            </div>
+            <label htmlFor="fullscreen" className="block text-sm font-medium text-gray-700"></label>
+            <div className="mt-1"></div>
           </div>
         </div>
 
diff --git a/public/integrations/embed.svg b/public/integrations/embed.svg
new file mode 100644
index 0000000000..50ec8ec9ee
--- /dev/null
+++ b/public/integrations/embed.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 2500 2334" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(5.24539,0,0,5.24539,-1593.99,-1974.38)">
+        <g transform="matrix(288,0,0,288,283.235,692.769)">
+            <path d="M0.082,-0.21L0.611,0.001L0.611,-0.178L0.28,-0.292L0.28,-0.299L0.611,-0.413L0.611,-0.592L0.082,-0.381L0.082,-0.21Z" style="fill:rgb(41,41,41);fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(288,0,0,288,482.871,692.769)">
+            <path d="M0.406,-0.761L0.24,-0.761L0.006,0.109L0.172,0.109L0.406,-0.761Z" style="fill:rgb(41,41,41);fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(288,0,0,288,601.507,692.769)">
+            <path d="M0.611,-0.21L0.611,-0.381L0.082,-0.592L0.082,-0.413L0.413,-0.299L0.413,-0.292L0.082,-0.178L0.082,0.001L0.611,-0.21Z" style="fill:rgb(41,41,41);fill-rule:nonzero;"/>
+        </g>
+    </g>
+</svg>