From 2799501fa5a3f3765c2af3a4dfee12cbf7821c53 Mon Sep 17 00:00:00 2001
From: Jason Dicker <dickerjason@gmail.com>
Date: Wed, 24 Apr 2024 14:32:22 +0200
Subject: [PATCH 1/4] initial opportunity sharing popup with preview, copy
 link, generate QR Code & more options. api changes pending...

---
 src/web/src/components/Opportunity/Badges.tsx | 102 ++++++
 .../opportunities/[opportunityId]/index.tsx   | 290 ++++++++++++------
 2 files changed, 290 insertions(+), 102 deletions(-)
 create mode 100644 src/web/src/components/Opportunity/Badges.tsx

diff --git a/src/web/src/components/Opportunity/Badges.tsx b/src/web/src/components/Opportunity/Badges.tsx
new file mode 100644
index 000000000..a9a09d95f
--- /dev/null
+++ b/src/web/src/components/Opportunity/Badges.tsx
@@ -0,0 +1,102 @@
+import Image from "next/image";
+import {
+  IoMdPerson,
+  IoIosBook,
+  IoMdPause,
+  IoMdPlay,
+  IoMdClose,
+} from "react-icons/io";
+import iconClock from "public/images/icon-clock.svg";
+import iconZlto from "public/images/icon-zlto.svg";
+import { useMemo } from "react";
+import { OpportunityInfo } from "~/api/models/opportunity";
+
+interface BadgesProps {
+  opportunity: OpportunityInfo | undefined; // replace 'any' with the actual type
+}
+
+const Badges: React.FC<BadgesProps> = ({ opportunity }) => {
+  // memo for spots left i.e participantLimit - participantCountTotal
+  const spotsLeft = useMemo(() => {
+    const participantLimit = opportunity?.participantLimit ?? 0;
+    const participantCountTotal = opportunity?.participantCountTotal ?? 0;
+    return Math.max(participantLimit - participantCountTotal, 0);
+  }, [opportunity]);
+
+  return (
+    <div className="mb-2 mt-4 flex flex-row flex-wrap gap-1 text-xs font-bold text-green-dark md:my-2">
+      {opportunity?.commitmentIntervalCount && (
+        <div className="badge bg-green-light text-green">
+          <Image
+            src={iconClock}
+            alt="Icon Clock"
+            width={20}
+            height={20}
+            sizes="100vw"
+            priority={true}
+            style={{ width: "20px", height: "20px" }}
+          />
+
+          <span className="ml-1 text-xs">{`${
+            opportunity.commitmentIntervalCount
+          } ${opportunity.commitmentInterval}${
+            opportunity.commitmentIntervalCount > 1 ? "s" : ""
+          }`}</span>
+        </div>
+      )}
+      {spotsLeft > 0 && (
+        <div className="badge bg-blue-light text-blue">
+          <IoMdPerson />
+
+          <span className="ml-1 text-xs">{spotsLeft} Spots left</span>
+        </div>
+      )}
+      {opportunity?.type && (
+        <div className="badge bg-[#E7E8F5] text-[#5F65B9]">
+          <IoIosBook />
+          <span className="ml-1 text-xs">{opportunity.type}</span>
+        </div>
+      )}
+      {(opportunity?.zltoReward ?? 0) > 0 && (
+        <div className="badge bg-orange-light text-orange">
+          <Image
+            src={iconZlto}
+            alt="Icon Zlto"
+            width={16}
+            height={16}
+            sizes="100vw"
+            priority={true}
+            style={{ width: "16px", height: "16px" }}
+          />
+          <span className="ml-1 text-xs">{opportunity?.zltoReward}</span>
+        </div>
+      )}
+
+      {/* STATUS BADGES */}
+      {opportunity?.status == "Active" && (
+        <>
+          {new Date(opportunity.dateStart) > new Date() && (
+            <div className="badge bg-yellow-tint text-yellow">
+              <IoMdPause />
+              <p className="ml-1">Not started</p>
+            </div>
+          )}
+          {new Date(opportunity.dateStart) < new Date() && (
+            <div className="badge bg-purple-tint text-purple-shade">
+              <IoMdPlay />
+              <span className="ml-1">Started</span>
+            </div>
+          )}
+        </>
+      )}
+      {opportunity?.status == "Expired" && (
+        <div className="badge bg-red-100 text-error">
+          <IoMdClose className="h-4 w-4" />
+          <span className="ml-1">Expired</span>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Badges;
diff --git a/src/web/src/pages/opportunities/[opportunityId]/index.tsx b/src/web/src/pages/opportunities/[opportunityId]/index.tsx
index b27fc71ee..ef89ca886 100644
--- a/src/web/src/pages/opportunities/[opportunityId]/index.tsx
+++ b/src/web/src/pages/opportunities/[opportunityId]/index.tsx
@@ -32,6 +32,7 @@ import {
   IoMdCalendar,
   IoMdCloudUpload,
 } from "react-icons/io";
+import { IoCopy, IoQrCode, IoEllipsisHorizontalOutline } from "react-icons/io5";
 import type { NextPageWithLayout } from "~/pages/_app";
 import ReactModal from "react-modal";
 import iconUpload from "public/images/icon-upload.svg";
@@ -39,7 +40,7 @@ import iconOpen from "public/images/icon-open.svg";
 import iconClock from "public/images/icon-clock.svg";
 import iconZlto from "public/images/icon-zlto.svg";
 import iconBookmark from "public/images/icon-bookmark.svg";
-// import iconShare from "public/images/icon-share.svg";
+import iconShare from "public/images/icon-share.svg";
 import iconDifficulty from "public/images/icon-difficulty.svg";
 import iconLanguage from "public/images/icon-language.svg";
 import iconTopics from "public/images/icon-topics.svg";
@@ -84,6 +85,8 @@ import { AvatarImage } from "~/components/AvatarImage";
 import { useRouter } from "next/router";
 import { Unauthenticated } from "~/components/Status/Unauthenticated";
 import { Unauthorized } from "~/components/Status/Unauthorized";
+import { set } from "nprogress";
+import Badges from "~/components/Opportunity/Badges";
 
 interface IParams extends ParsedUrlQuery {
   id: string;
@@ -162,7 +165,9 @@ const OpportunityDetails: NextPageWithLayout<{
   user: User;
   error?: number;
 }> = ({ opportunityId, user, error }) => {
+  const router = useRouter();
   const queryClient = useQueryClient();
+
   const [loginDialogVisible, setLoginDialogVisible] = useState(false);
   const [gotoOpportunityDialogVisible, setGotoOpportunityDialogVisible] =
     useState(false);
@@ -176,8 +181,9 @@ const OpportunityDetails: NextPageWithLayout<{
   ] = useState(false);
   const [cancelOpportunityDialogVisible, setCancelOpportunityDialogVisible] =
     useState(false);
+  const [shareOpportunityDialogVisible, setShareOpportunityDialogVisible] =
+    useState(false);
   const [isOppSaved, setIsOppSaved] = useState(false);
-  const router = useRouter();
 
   const {
     data: opportunity,
@@ -212,13 +218,6 @@ const OpportunityDetails: NextPageWithLayout<{
       },
     });
 
-  // memo for spots left i.e participantLimit - participantCountTotal
-  const spotsLeft = useMemo(() => {
-    const participantLimit = opportunity?.participantLimit ?? 0;
-    const participantCountTotal = opportunity?.participantCountTotal ?? 0;
-    return Math.max(participantLimit - participantCountTotal, 0);
-  }, [opportunity]);
-
   useEffect(() => {
     if (!user) return;
 
@@ -329,6 +328,26 @@ const OpportunityDetails: NextPageWithLayout<{
     setCancelOpportunityDialogVisible(false);
   }, [opportunityId, queryClient]);
 
+  const onShareOpportunity = useCallback(() => {
+    if (!user) {
+      toast.warning("You need to be logged in to save an opportunity");
+      return;
+    }
+    setShareOpportunityDialogVisible(true);
+  }, [user, setShareOpportunityDialogVisible]);
+
+  const [showQRCode, setShowQRCode] = useState(false);
+
+  const copyToClipboard = () => {
+    navigator.clipboard.writeText(
+      "Lorem ipsum dolor sit amet, consectetuer adipiscing elit.",
+    );
+    alert("URL copied to clipboard!");
+  };
+  const generateQRCode = () => {
+    setShowQRCode(true);
+  };
+
   if (error) {
     if (error === 401) return <Unauthenticated />;
     else if (error === 403) return <Unauthorized />;
@@ -696,6 +715,155 @@ const OpportunityDetails: NextPageWithLayout<{
                 </div>
               </ReactModal>
 
+              {/* SHARE OPPORTUNITY DIALOG */}
+              <ReactModal
+                isOpen={shareOpportunityDialogVisible}
+                shouldCloseOnOverlayClick={false}
+                onRequestClose={() => {
+                  setShareOpportunityDialogVisible(false);
+                }}
+                className={`fixed bottom-0 left-0 right-0 top-0 flex-grow overflow-hidden bg-white animate-in fade-in md:m-auto md:max-h-[650px] md:w-[600px] md:rounded-3xl`}
+                portalClassName={"fixed z-40"}
+                overlayClassName="fixed inset-0 bg-overlay"
+              >
+                {/* <div className="flex flex-col gap-2"> */}
+                <div className="flex h-full flex-col gap-2 overflow-y-auto">
+                  <div className="flex flex-row bg-green p-4 shadow-lg">
+                    <h1 className="flex-grow"></h1>
+                    <button
+                      type="button"
+                      className="btn rounded-full border-green-dark bg-green-dark p-3 text-white"
+                      onClick={() => {
+                        setShareOpportunityDialogVisible(false);
+                      }}
+                    >
+                      <IoMdClose className="h-6 w-6"></IoMdClose>
+                    </button>
+                  </div>
+
+                  <div className="flex flex-col items-center justify-center gap-4 p-8">
+                    <div className="-mt-16 flex h-12 w-12 items-center justify-center rounded-full border-green-dark bg-white shadow-lg">
+                      <Image
+                        src={iconBell}
+                        alt="Icon Bell"
+                        width={28}
+                        height={28}
+                        sizes="100vw"
+                        priority={true}
+                        style={{ width: "28px", height: "28px" }}
+                      />
+                    </div>
+
+                    <h3>Share this opportunity!</h3>
+
+                    {/* OPPORTUNITY DETAILS (smaller) */}
+                    <div className="flex w-full flex-col rounded-lg border-2 border-dotted border-gray p-4">
+                      <div className="flex gap-4">
+                        <div className="">
+                          <AvatarImage
+                            icon={opportunity?.organizationLogoURL ?? null}
+                            alt="Company Logo"
+                            size={60}
+                            // sizeMobile={42}
+                          />
+                        </div>
+                        <div className="flex max-w-xs flex-col gap-1">
+                          <h4 className="text-lgx overflow-hidden   text-ellipsis whitespace-nowrap font-semibold leading-7 text-black md:text-xl md:leading-8">
+                            {opportunity?.title}
+                          </h4>
+                          <h6 className=" overflow-hidden text-ellipsis whitespace-nowrap text-xs text-gray-dark">
+                            By {opportunity?.organizationName}
+                          </h6>
+                        </div>
+                      </div>
+
+                      {/* BADGES */}
+                      <Badges opportunity={opportunity} />
+
+                      {/* DATES */}
+                      {/* {opportunity?.status == "Active" && (
+                        <div className="flex flex-col text-sm text-gray-dark">
+                          <div>
+                            {opportunity.dateStart && (
+                              <>
+                                <span className="mr-2 font-bold">Starts:</span>
+                                <span className="text-xs tracking-widest text-black">
+                                  <Moment format={DATE_FORMAT_HUMAN} utc={true}>
+                                    {opportunity.dateStart}
+                                  </Moment>
+                                </span>
+                              </>
+                            )}
+                          </div>
+                          <div>
+                            {opportunity.dateEnd && (
+                              <>
+                                <span className="mr-2 font-bold">Ends:</span>
+                                <span className="text-xs tracking-widest text-black">
+                                  <Moment format={DATE_FORMAT_HUMAN} utc={true}>
+                                    {opportunity.dateEnd}
+                                  </Moment>
+                                </span>
+                              </>
+                            )}
+                          </div>
+                        </div>
+                      )} */}
+                    </div>
+
+                    {/* BUTTONS */}
+                    <div className="grid w-full grid-cols-2 gap-4">
+                      <button
+                        onClick={copyToClipboard}
+                        className="flex w-full items-center gap-2 rounded-xl border-[1px] border-gray px-4 py-3 text-lg font-semibold text-black"
+                      >
+                        <IoCopy className="mr-2 h-6 w-6" />
+                        Copy Link
+                      </button>
+                      <button
+                        onClick={generateQRCode}
+                        className="flex w-full items-center gap-2 rounded-xl border-[1px] border-gray px-4 py-3 text-lg font-semibold text-black"
+                      >
+                        <IoQrCode className="mr-2 h-6 w-6" />
+                        Generate QR Code
+                      </button>
+                      <button
+                        onClick={() => {
+                          if (navigator.share) {
+                            navigator
+                              .share({
+                                title: "Page Title",
+                                text: "Page description",
+                                url: "https://example.com", // replace with your URL
+                              })
+                              .then(() => console.log("Successful share"))
+                              .catch((error) =>
+                                console.log("Error sharing", error),
+                              );
+                          } else {
+                            console.log("Share not supported on this browser");
+                          }
+                        }}
+                        className="text-black-100 flex w-60 items-center gap-2 rounded-xl border-[1px] border-gray px-4 py-3 text-lg font-semibold"
+                      >
+                        <IoEllipsisHorizontalOutline className="mr-2 h-6 w-6 text-black" />
+                        More options
+                      </button>
+                    </div>
+
+                    {showQRCode && (
+                      // <img
+                      //   src={`https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(
+                      //     url,
+                      //   )}`}
+                      //   alt="QR Code"
+                      // />
+                      <>TODO:</>
+                    )}
+                  </div>
+                </div>
+              </ReactModal>
+
               {opportunity && (
                 <div className="flex flex-col gap-4">
                   <div className="relative flex flex-grow flex-row gap-1 rounded-lg bg-white p-4 shadow-lg md:p-6">
@@ -720,88 +888,7 @@ const OpportunityDetails: NextPageWithLayout<{
                         </h6>
 
                         {/* BADGES */}
-                        <div className="mb-2 mt-4 flex flex-row flex-wrap gap-1 text-xs font-bold text-green-dark md:my-2">
-                          <div className="badge bg-green-light text-green">
-                            <Image
-                              src={iconClock}
-                              alt="Icon Clock"
-                              width={20}
-                              height={20}
-                              sizes="100vw"
-                              priority={true}
-                              style={{ width: "20px", height: "20px" }}
-                            />
-
-                            <span className="ml-1 text-xs">{`${
-                              opportunity.commitmentIntervalCount
-                            } ${opportunity.commitmentInterval}${
-                              opportunity.commitmentIntervalCount > 1 ? "s" : ""
-                            }`}</span>
-                          </div>
-                          {spotsLeft > 0 && (
-                            <div className="badge bg-blue-light text-blue">
-                              <IoMdPerson />
-
-                              <span className="ml-1 text-xs">
-                                {spotsLeft} Spots left
-                              </span>
-                            </div>
-                          )}
-                          {opportunity?.type && (
-                            <div className="badge bg-[#E7E8F5] text-[#5F65B9]">
-                              <IoIosBook />
-                              <span className="ml-1 text-xs">
-                                {opportunity.type}
-                              </span>
-                            </div>
-                          )}
-                          {(opportunity.zltoReward ?? 0) > 0 && (
-                            <div className="badge bg-orange-light text-orange">
-                              <Image
-                                src={iconZlto}
-                                alt="Icon Zlto"
-                                width={16}
-                                height={16}
-                                sizes="100vw"
-                                priority={true}
-                                style={{ width: "16px", height: "16px" }}
-                              />
-                              <span className="ml-1 text-xs">
-                                {opportunity.zltoReward}
-                              </span>
-                            </div>
-                          )}
-
-                          {/* STATUS BADGES */}
-                          {opportunity?.status == "Active" && (
-                            <>
-                              {new Date(opportunity.dateStart) > new Date() && (
-                                <div className="badge bg-yellow-tint text-yellow">
-                                  <IoMdCalendar className="h-4 w-4" />
-                                  <Moment
-                                    format={DATE_FORMAT_HUMAN}
-                                    utc={true}
-                                    className="ml-1"
-                                  >
-                                    {opportunity.dateStart}
-                                  </Moment>
-                                </div>
-                              )}
-                              {new Date(opportunity.dateStart) < new Date() && (
-                                <div className="badge bg-purple-tint text-purple-shade">
-                                  <IoMdPlay />
-                                  <span className="ml-1">Ongoing</span>
-                                </div>
-                              )}
-                            </>
-                          )}
-                          {opportunity?.status == "Expired" && (
-                            <div className="badge bg-red-100 text-error">
-                              <IoMdCloudUpload className="h-4 w-4" />
-                              <span className="ml-1">Upload Only</span>
-                            </div>
-                          )}
-                        </div>
+                        <Badges opportunity={opportunity} />
 
                         {/* DATES */}
                         {opportunity.status == "Active" && (
@@ -973,18 +1060,17 @@ const OpportunityDetails: NextPageWithLayout<{
                               </span>
                             </button>
 
-                            {/* <button
+                            <button
                               type="button"
                               className="btn btn-sm h-10 w-1/2 flex-shrink rounded-full border-gray-dark bg-white normal-case text-gray-dark hover:bg-green-dark hover:text-white md:w-[120px]"
-                              // ensure user is logged in and opportunity is published and active
-                              // disabled={
-                              //   !user ||
-                              //   !(
-                              //     opportunity?.published &&
-                              //     opportunity?.status != "Inactive" &&
-                              //     new Date(opportunity?.dateStart) > new Date()
-                              //   )
-                              // }
+                              onClick={onShareOpportunity}
+                              // ensure opportunity is published and active (user logged in check is done in function)
+                              disabled={
+                                !(
+                                  opportunity?.published &&
+                                  opportunity?.status == "Active"
+                                )
+                              }
                             >
                               <Image
                                 src={iconShare}
@@ -997,7 +1083,7 @@ const OpportunityDetails: NextPageWithLayout<{
                               />
 
                               <span className="ml-1">Share</span>
-                            </button> */}
+                            </button>
                           </div>
                         </div>
                       </div>

From f2ba174f7ad1d89220a2dd2b415c0f3b328edf99 Mon Sep 17 00:00:00 2001
From: Jason Dicker <dickerjason@gmail.com>
Date: Thu, 25 Apr 2024 07:43:01 +0200
Subject: [PATCH 2/4] pending api

---
 src/web/src/components/Opportunity/Share.tsx  | 196 ++++++++++++++++++
 .../opportunities/[opportunityId]/index.tsx   | 191 +++--------------
 2 files changed, 227 insertions(+), 160 deletions(-)
 create mode 100644 src/web/src/components/Opportunity/Share.tsx

diff --git a/src/web/src/components/Opportunity/Share.tsx b/src/web/src/components/Opportunity/Share.tsx
new file mode 100644
index 000000000..b750bc5f3
--- /dev/null
+++ b/src/web/src/components/Opportunity/Share.tsx
@@ -0,0 +1,196 @@
+// SharePopup.tsx
+import React, { useState, useRef } from "react";
+import { FaFacebook, FaLinkedin, FaQrcode } from "react-icons/fa";
+import { IoMdClose } from "react-icons/io";
+import {
+  IoCopy,
+  IoQrCode,
+  IoEllipsisHorizontalOutline,
+  IoShareSocialOutline,
+} from "react-icons/io5";
+import { toast } from "react-toastify";
+import { AvatarImage } from "../AvatarImage";
+import Badges from "./Badges";
+import iconBell from "public/images/icon-bell.webp";
+import iconBookmark from "public/images/icon-bookmark.svg";
+import Image from "next/image";
+import { OpportunityInfo } from "~/api/models/opportunity";
+import { DATE_FORMAT_HUMAN } from "~/lib/constants";
+import Moment from "react-moment";
+
+interface SharePopupProps {
+  opportunity: OpportunityInfo;
+  onClose: () => void;
+}
+
+const SharePopup: React.FC<SharePopupProps> = ({ opportunity, onClose }) => {
+  const [showQRCode, setShowQRCode] = useState(false);
+  const copyToClipboard = () => {
+    navigator.clipboard.writeText(
+      "Lorem ipsum dolor sit amet, consectetuer adipiscing elit.",
+    );
+    toast("URL copied to clipboard!");
+  };
+  const generateQRCode = () => {
+    setShowQRCode(true);
+  };
+
+  // const shareOnFacebook = () => {
+  //   window.open(
+  //     `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`,
+  //     "_blank",
+  //   );
+  // };
+
+  // const shareOnLinkedIn = () => {
+  //   window.open(
+  //     `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(
+  //       url,
+  //     )}`,
+  //     "_blank",
+  //   );
+  // };
+
+  return (
+    <div className="flex h-full flex-col gap-2 overflow-y-auto">
+      <div className="flex flex-row bg-green p-4 shadow-lg">
+        <h1 className="flex-grow"></h1>
+        <button
+          type="button"
+          className="btn rounded-full border-green-dark bg-green-dark p-3 text-white"
+          onClick={onClose}
+        >
+          <IoMdClose className="h-6 w-6"></IoMdClose>
+        </button>
+      </div>
+
+      <div className="flex flex-col items-center justify-center gap-4 p-8">
+        <div className="-mt-16 flex h-12 w-12 items-center justify-center rounded-full border-green-dark bg-white shadow-lg">
+          {/* <Image
+            src={iconBell}
+            alt="Icon Bell"
+            width={28}
+            height={28}
+            sizes="100vw"
+            priority={true}
+            style={{ width: "28px", height: "28px" }}
+          /> */}
+          <IoShareSocialOutline className="h-7 w-7" />
+        </div>
+
+        <h3>Share this opportunity!</h3>
+
+        {/* OPPORTUNITY DETAILS (smaller) */}
+        <div className="flex w-full flex-col rounded-lg border-2 border-dotted border-gray p-4">
+          <div className="flex gap-4">
+            <div className="">
+              <AvatarImage
+                icon={opportunity?.organizationLogoURL ?? null}
+                alt="Company Logo"
+                size={60}
+                // sizeMobile={42}
+              />
+            </div>
+            <div className="flex max-w-[200px] flex-col gap-1 sm:max-w-[480px] md:max-w-[420px]">
+              <h4 className="overflow-hidden text-ellipsis whitespace-nowrap text-sm font-semibold leading-7 text-black md:text-xl md:leading-8">
+                {opportunity?.title}
+              </h4>
+              <h6 className=" overflow-hidden text-ellipsis whitespace-nowrap text-xs text-gray-dark">
+                By {opportunity?.organizationName}
+              </h6>
+            </div>
+          </div>
+
+          {/* BADGES */}
+          <Badges opportunity={opportunity} />
+
+          {/* DATES */}
+          {opportunity?.status == "Active" && (
+            <div className="flex flex-col text-sm text-gray-dark">
+              <div>
+                {opportunity.dateStart && (
+                  <>
+                    <span className="mr-2 font-bold">Starts:</span>
+                    <span className="text-xs tracking-widest text-black">
+                      <Moment format={DATE_FORMAT_HUMAN} utc={true}>
+                        {opportunity.dateStart}
+                      </Moment>
+                    </span>
+                  </>
+                )}
+              </div>
+              <div>
+                {opportunity.dateEnd && (
+                  <>
+                    <span className="mr-2 font-bold">Ends:</span>
+                    <span className="text-xs tracking-widest text-black">
+                      <Moment format={DATE_FORMAT_HUMAN} utc={true}>
+                        {opportunity.dateEnd}
+                      </Moment>
+                    </span>
+                  </>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* BUTTONS */}
+        <div className="grid w-full grid-cols-1 gap-4 md:grid-cols-2">
+          <button
+            onClick={copyToClipboard}
+            className="flex w-full items-center gap-2 rounded-xl border-[1px] border-gray px-4 py-3 text-sm font-semibold text-black hover:bg-gray-light md:text-lg"
+          >
+            <IoCopy className="mr-2 h-6 w-6" />
+            Copy Link
+          </button>
+          <button
+            onClick={generateQRCode}
+            className="flex w-full items-center gap-2 rounded-xl border-[1px] border-gray px-4 py-3 text-sm font-semibold text-black hover:bg-gray-light md:text-lg"
+          >
+            <IoQrCode className="mr-2 h-6 w-6" />
+            Generate QR Code
+          </button>
+          <button
+            onClick={() => {
+              if (navigator.share) {
+                navigator
+                  .share({
+                    title: "Page Title",
+                    text: "Page description",
+                    url: "https://example.com", // replace with your URL
+                  })
+                  .then(() => console.log("Successful share"))
+                  .catch((error) => console.log("Error sharing", error));
+              } else {
+                console.log("Share not supported on this browser");
+              }
+            }}
+            className="flex w-full items-center gap-2 rounded-xl border-[1px] border-gray px-4 py-3 text-sm font-semibold text-black hover:bg-gray-light md:text-lg"
+          >
+            <IoEllipsisHorizontalOutline className="mr-2 h-6 w-6 text-black" />
+            More options
+          </button>
+        </div>
+
+        {showQRCode && (
+          // <img
+          //   src={`https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(
+          //     url,
+          //   )}`}
+          //   alt="QR Code"
+          // />
+          <Image
+            src={iconBookmark}
+            alt="QR Code"
+            width={47}
+            height={35}
+            style={{ width: 47, height: 35 }}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default SharePopup;
diff --git a/src/web/src/pages/opportunities/[opportunityId]/index.tsx b/src/web/src/pages/opportunities/[opportunityId]/index.tsx
index ef89ca886..0e3124d70 100644
--- a/src/web/src/pages/opportunities/[opportunityId]/index.tsx
+++ b/src/web/src/pages/opportunities/[opportunityId]/index.tsx
@@ -87,6 +87,7 @@ import { Unauthenticated } from "~/components/Status/Unauthenticated";
 import { Unauthorized } from "~/components/Status/Unauthorized";
 import { set } from "nprogress";
 import Badges from "~/components/Opportunity/Badges";
+import Share from "~/components/Opportunity/Share";
 
 interface IParams extends ParsedUrlQuery {
   id: string;
@@ -336,17 +337,17 @@ const OpportunityDetails: NextPageWithLayout<{
     setShareOpportunityDialogVisible(true);
   }, [user, setShareOpportunityDialogVisible]);
 
-  const [showQRCode, setShowQRCode] = useState(false);
+  // const [showQRCode, setShowQRCode] = useState(false);
 
-  const copyToClipboard = () => {
-    navigator.clipboard.writeText(
-      "Lorem ipsum dolor sit amet, consectetuer adipiscing elit.",
-    );
-    alert("URL copied to clipboard!");
-  };
-  const generateQRCode = () => {
-    setShowQRCode(true);
-  };
+  // const copyToClipboard = () => {
+  //   navigator.clipboard.writeText(
+  //     "Lorem ipsum dolor sit amet, consectetuer adipiscing elit.",
+  //   );
+  //   toast("URL copied to clipboard!");
+  // };
+  // const generateQRCode = () => {
+  //   setShowQRCode(true);
+  // };
 
   if (error) {
     if (error === 401) return <Unauthenticated />;
@@ -716,153 +717,23 @@ const OpportunityDetails: NextPageWithLayout<{
               </ReactModal>
 
               {/* SHARE OPPORTUNITY DIALOG */}
-              <ReactModal
-                isOpen={shareOpportunityDialogVisible}
-                shouldCloseOnOverlayClick={false}
-                onRequestClose={() => {
-                  setShareOpportunityDialogVisible(false);
-                }}
-                className={`fixed bottom-0 left-0 right-0 top-0 flex-grow overflow-hidden bg-white animate-in fade-in md:m-auto md:max-h-[650px] md:w-[600px] md:rounded-3xl`}
-                portalClassName={"fixed z-40"}
-                overlayClassName="fixed inset-0 bg-overlay"
-              >
-                {/* <div className="flex flex-col gap-2"> */}
-                <div className="flex h-full flex-col gap-2 overflow-y-auto">
-                  <div className="flex flex-row bg-green p-4 shadow-lg">
-                    <h1 className="flex-grow"></h1>
-                    <button
-                      type="button"
-                      className="btn rounded-full border-green-dark bg-green-dark p-3 text-white"
-                      onClick={() => {
-                        setShareOpportunityDialogVisible(false);
-                      }}
-                    >
-                      <IoMdClose className="h-6 w-6"></IoMdClose>
-                    </button>
-                  </div>
-
-                  <div className="flex flex-col items-center justify-center gap-4 p-8">
-                    <div className="-mt-16 flex h-12 w-12 items-center justify-center rounded-full border-green-dark bg-white shadow-lg">
-                      <Image
-                        src={iconBell}
-                        alt="Icon Bell"
-                        width={28}
-                        height={28}
-                        sizes="100vw"
-                        priority={true}
-                        style={{ width: "28px", height: "28px" }}
-                      />
-                    </div>
-
-                    <h3>Share this opportunity!</h3>
-
-                    {/* OPPORTUNITY DETAILS (smaller) */}
-                    <div className="flex w-full flex-col rounded-lg border-2 border-dotted border-gray p-4">
-                      <div className="flex gap-4">
-                        <div className="">
-                          <AvatarImage
-                            icon={opportunity?.organizationLogoURL ?? null}
-                            alt="Company Logo"
-                            size={60}
-                            // sizeMobile={42}
-                          />
-                        </div>
-                        <div className="flex max-w-xs flex-col gap-1">
-                          <h4 className="text-lgx overflow-hidden   text-ellipsis whitespace-nowrap font-semibold leading-7 text-black md:text-xl md:leading-8">
-                            {opportunity?.title}
-                          </h4>
-                          <h6 className=" overflow-hidden text-ellipsis whitespace-nowrap text-xs text-gray-dark">
-                            By {opportunity?.organizationName}
-                          </h6>
-                        </div>
-                      </div>
-
-                      {/* BADGES */}
-                      <Badges opportunity={opportunity} />
-
-                      {/* DATES */}
-                      {/* {opportunity?.status == "Active" && (
-                        <div className="flex flex-col text-sm text-gray-dark">
-                          <div>
-                            {opportunity.dateStart && (
-                              <>
-                                <span className="mr-2 font-bold">Starts:</span>
-                                <span className="text-xs tracking-widest text-black">
-                                  <Moment format={DATE_FORMAT_HUMAN} utc={true}>
-                                    {opportunity.dateStart}
-                                  </Moment>
-                                </span>
-                              </>
-                            )}
-                          </div>
-                          <div>
-                            {opportunity.dateEnd && (
-                              <>
-                                <span className="mr-2 font-bold">Ends:</span>
-                                <span className="text-xs tracking-widest text-black">
-                                  <Moment format={DATE_FORMAT_HUMAN} utc={true}>
-                                    {opportunity.dateEnd}
-                                  </Moment>
-                                </span>
-                              </>
-                            )}
-                          </div>
-                        </div>
-                      )} */}
-                    </div>
-
-                    {/* BUTTONS */}
-                    <div className="grid w-full grid-cols-2 gap-4">
-                      <button
-                        onClick={copyToClipboard}
-                        className="flex w-full items-center gap-2 rounded-xl border-[1px] border-gray px-4 py-3 text-lg font-semibold text-black"
-                      >
-                        <IoCopy className="mr-2 h-6 w-6" />
-                        Copy Link
-                      </button>
-                      <button
-                        onClick={generateQRCode}
-                        className="flex w-full items-center gap-2 rounded-xl border-[1px] border-gray px-4 py-3 text-lg font-semibold text-black"
-                      >
-                        <IoQrCode className="mr-2 h-6 w-6" />
-                        Generate QR Code
-                      </button>
-                      <button
-                        onClick={() => {
-                          if (navigator.share) {
-                            navigator
-                              .share({
-                                title: "Page Title",
-                                text: "Page description",
-                                url: "https://example.com", // replace with your URL
-                              })
-                              .then(() => console.log("Successful share"))
-                              .catch((error) =>
-                                console.log("Error sharing", error),
-                              );
-                          } else {
-                            console.log("Share not supported on this browser");
-                          }
-                        }}
-                        className="text-black-100 flex w-60 items-center gap-2 rounded-xl border-[1px] border-gray px-4 py-3 text-lg font-semibold"
-                      >
-                        <IoEllipsisHorizontalOutline className="mr-2 h-6 w-6 text-black" />
-                        More options
-                      </button>
-                    </div>
-
-                    {showQRCode && (
-                      // <img
-                      //   src={`https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(
-                      //     url,
-                      //   )}`}
-                      //   alt="QR Code"
-                      // />
-                      <>TODO:</>
-                    )}
-                  </div>
-                </div>
-              </ReactModal>
+              {opportunity && (
+                <ReactModal
+                  isOpen={shareOpportunityDialogVisible}
+                  shouldCloseOnOverlayClick={false}
+                  onRequestClose={() => {
+                    setShareOpportunityDialogVisible(false);
+                  }}
+                  className={`fixed bottom-0 left-0 right-0 top-0 flex-grow overflow-hidden bg-white animate-in fade-in md:m-auto md:max-h-[650px] md:w-[600px] md:rounded-3xl`}
+                  portalClassName={"fixed z-40"}
+                  overlayClassName="fixed inset-0 bg-overlay"
+                >
+                  <Share
+                    opportunity={opportunity}
+                    onClose={() => setShareOpportunityDialogVisible(false)}
+                  />
+                </ReactModal>
+              )}
 
               {opportunity && (
                 <div className="flex flex-col gap-4">
@@ -1028,12 +899,12 @@ const OpportunityDetails: NextPageWithLayout<{
                                 </>
                               )}
                           </div>
-
+                          //TODO: last here, buttons wrapping at md
                           <div className="flex justify-between gap-2 md:justify-end md:gap-4 lg:justify-end">
                             <button
                               type="button"
                               className={
-                                "btn btn-sm h-10 w-full flex-shrink rounded-full border-gray-dark normal-case text-gray-dark md:w-[120px]" +
+                                "btn btn-sm h-10 w-full flex-shrink rounded-full border-gray-dark normal-case text-gray-dark md:max-w-[120px]" +
                                 ` ${
                                   isOppSaved
                                     ? "border-yellow bg-yellow-light text-yellow"
@@ -1062,7 +933,7 @@ const OpportunityDetails: NextPageWithLayout<{
 
                             <button
                               type="button"
-                              className="btn btn-sm h-10 w-1/2 flex-shrink rounded-full border-gray-dark bg-white normal-case text-gray-dark hover:bg-green-dark hover:text-white md:w-[120px]"
+                              className="btn btn-sm h-10 w-full flex-shrink rounded-full border-gray-dark bg-white normal-case text-gray-dark hover:bg-green-dark hover:text-white md:max-w-[120px]"
                               onClick={onShareOpportunity}
                               // ensure opportunity is published and active (user logged in check is done in function)
                               disabled={

From 68dc295e3179a1ab395cfd786e900fdc304742f7 Mon Sep 17 00:00:00 2001
From: Jason Dicker <dickerjason@gmail.com>
Date: Thu, 25 Apr 2024 11:05:50 +0200
Subject: [PATCH 3/4] api implementation

---
 src/web/src/api/models/opportunity.ts         |  24 ++
 src/web/src/api/services/opportunities.ts     |  18 ++
 src/web/src/components/Opportunity/Badges.tsx |   4 +-
 src/web/src/components/Opportunity/Share.tsx  | 288 ++++++++++--------
 .../opportunities/[opportunityId]/index.tsx   |  70 +----
 5 files changed, 214 insertions(+), 190 deletions(-)

diff --git a/src/web/src/api/models/opportunity.ts b/src/web/src/api/models/opportunity.ts
index 23b7267fc..3a05305f1 100644
--- a/src/web/src/api/models/opportunity.ts
+++ b/src/web/src/api/models/opportunity.ts
@@ -287,3 +287,27 @@ export interface OpportunitySearchFilterCriteria extends PaginationFilter {
   titleContains: string | null;
   opportunities: string[] | null;
 }
+
+export interface LinkInfo {
+  id: string;
+  name: string;
+  description: string | null;
+  statusId: string;
+  status: LinkStatus;
+  uRL: string;
+  shortURL: string;
+  qrCodeBase64: string | null; // NB: casing wrong
+  usagesLimit: number | null;
+  usagesTotal: number | null;
+  usagesAvailable: number | null;
+  dateEnd: string | null;
+  dateCreated: string;
+  dateModified: string;
+}
+
+export enum LinkStatus {
+  Active,
+  Inactive,
+  Expired,
+  LimitReached,
+}
diff --git a/src/web/src/api/services/opportunities.ts b/src/web/src/api/services/opportunities.ts
index 66d362a58..f34864d4a 100644
--- a/src/web/src/api/services/opportunities.ts
+++ b/src/web/src/api/services/opportunities.ts
@@ -17,6 +17,7 @@ import type {
   OpportunitySearchCriteriaCommitmentInterval,
   Status,
   OpportunitySearchFilterCriteria,
+  LinkInfo,
 } from "../models/opportunity";
 import type { Country, Language } from "../models/lookups";
 import type { OrganizationInfo } from "../models/organisation";
@@ -324,3 +325,20 @@ export const searchCriteriaOpportunities = async (
   );
   return data;
 };
+
+export const createSharingLink = async (
+  id: string,
+  includeQRCode?: boolean,
+  context?: GetServerSidePropsContext | GetStaticPropsContext,
+): Promise<LinkInfo> => {
+  const instance = context ? ApiServer(context) : await ApiClient;
+
+  // construct querystring parameters from filter
+  const params = new URLSearchParams();
+  if (includeQRCode) params.append("includeQRCode", includeQRCode.toString());
+
+  const { data } = await instance.get<LinkInfo>(
+    `/opportunity/${id}/link/sharing?${params.toString()}`,
+  );
+  return data;
+};
diff --git a/src/web/src/components/Opportunity/Badges.tsx b/src/web/src/components/Opportunity/Badges.tsx
index a9a09d95f..4b6415f90 100644
--- a/src/web/src/components/Opportunity/Badges.tsx
+++ b/src/web/src/components/Opportunity/Badges.tsx
@@ -9,10 +9,10 @@ import {
 import iconClock from "public/images/icon-clock.svg";
 import iconZlto from "public/images/icon-zlto.svg";
 import { useMemo } from "react";
-import { OpportunityInfo } from "~/api/models/opportunity";
+import type { OpportunityInfo } from "~/api/models/opportunity";
 
 interface BadgesProps {
-  opportunity: OpportunityInfo | undefined; // replace 'any' with the actual type
+  opportunity: OpportunityInfo | undefined;
 }
 
 const Badges: React.FC<BadgesProps> = ({ opportunity }) => {
diff --git a/src/web/src/components/Opportunity/Share.tsx b/src/web/src/components/Opportunity/Share.tsx
index b750bc5f3..a4eb313fb 100644
--- a/src/web/src/components/Opportunity/Share.tsx
+++ b/src/web/src/components/Opportunity/Share.tsx
@@ -1,6 +1,4 @@
-// SharePopup.tsx
-import React, { useState, useRef } from "react";
-import { FaFacebook, FaLinkedin, FaQrcode } from "react-icons/fa";
+import React, { useState, useCallback } from "react";
 import { IoMdClose } from "react-icons/io";
 import {
   IoCopy,
@@ -11,12 +9,13 @@ import {
 import { toast } from "react-toastify";
 import { AvatarImage } from "../AvatarImage";
 import Badges from "./Badges";
-import iconBell from "public/images/icon-bell.webp";
-import iconBookmark from "public/images/icon-bookmark.svg";
 import Image from "next/image";
-import { OpportunityInfo } from "~/api/models/opportunity";
+import type { LinkInfo, OpportunityInfo } from "~/api/models/opportunity";
 import { DATE_FORMAT_HUMAN } from "~/lib/constants";
 import Moment from "react-moment";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { createSharingLink } from "~/api/services/opportunities";
+import { LoadingInline } from "../Status/LoadingInline";
 
 interface SharePopupProps {
   opportunity: OpportunityInfo;
@@ -25,15 +24,57 @@ interface SharePopupProps {
 
 const SharePopup: React.FC<SharePopupProps> = ({ opportunity, onClose }) => {
   const [showQRCode, setShowQRCode] = useState(false);
-  const copyToClipboard = () => {
-    navigator.clipboard.writeText(
-      "Lorem ipsum dolor sit amet, consectetuer adipiscing elit.",
-    );
-    toast("URL copied to clipboard!");
-  };
-  const generateQRCode = () => {
-    setShowQRCode(true);
-  };
+  const [qrCodeImageData, setQRCodeImageData] = useState<
+    string | null | undefined
+  >(null);
+
+  const queryClient = useQueryClient();
+
+  const { data: linkInfo, isLoading: linkInfoIsLoading } =
+    useQuery<LinkInfo | null>({
+      queryKey: ["OpportunitySharingLink", opportunity.id],
+      queryFn: () => createSharingLink(opportunity.id),
+    });
+
+  const onClick_CopyToClipboard = useCallback(() => {
+    navigator.clipboard.writeText(linkInfo?.shortURL ?? linkInfo?.uRL ?? "");
+    toast("URL copied to clipboard!", { autoClose: 2000 });
+  }, [linkInfo]);
+
+  const onClick_GenerateQRCode = useCallback(() => {
+    // fetch the QR code
+    queryClient
+      .fetchQuery({
+        queryKey: ["OpportunitySharingLinkQR", opportunity.id],
+        queryFn: () => createSharingLink(opportunity.id, true),
+      })
+      .then(() => {
+        // get the QR code from the cache
+        const qrCode = queryClient.getQueryData<LinkInfo | null>([
+          "OpportunitySharingLinkQR",
+          opportunity.id,
+        ]);
+
+        // show the QR code
+        setQRCodeImageData(qrCode?.qrCodeBase64);
+        setShowQRCode(true);
+      });
+  }, [opportunity.id, queryClient]);
+
+  const onClick_MoreOptions = useCallback(() => {
+    if (navigator.share) {
+      navigator
+        .share({
+          title: opportunity.title,
+          text: opportunity.description,
+          url: linkInfo?.shortURL,
+        })
+        .then(() => console.log("Successful share"))
+        .catch((error) => console.log("Error sharing", error));
+    } else {
+      console.log("Share not supported on this browser");
+    }
+  }, [opportunity, linkInfo]);
 
   // const shareOnFacebook = () => {
   //   window.open(
@@ -53,6 +94,7 @@ const SharePopup: React.FC<SharePopupProps> = ({ opportunity, onClose }) => {
 
   return (
     <div className="flex h-full flex-col gap-2 overflow-y-auto">
+      {/* HEADER WITH CLOSE BUTTON */}
       <div className="flex flex-row bg-green p-4 shadow-lg">
         <h1 className="flex-grow"></h1>
         <button
@@ -64,131 +106,115 @@ const SharePopup: React.FC<SharePopupProps> = ({ opportunity, onClose }) => {
         </button>
       </div>
 
-      <div className="flex flex-col items-center justify-center gap-4 p-8">
-        <div className="-mt-16 flex h-12 w-12 items-center justify-center rounded-full border-green-dark bg-white shadow-lg">
-          {/* <Image
-            src={iconBell}
-            alt="Icon Bell"
-            width={28}
-            height={28}
-            sizes="100vw"
-            priority={true}
-            style={{ width: "28px", height: "28px" }}
-          /> */}
-          <IoShareSocialOutline className="h-7 w-7" />
+      {/* LOADING */}
+      {linkInfoIsLoading && (
+        <div className="flex items-center justify-center">
+          <div className="flex h-[300px] w-full max-w-md flex-col items-center justify-center gap-1 rounded-lg bg-white">
+            <LoadingInline />
+          </div>
         </div>
+      )}
 
-        <h3>Share this opportunity!</h3>
-
-        {/* OPPORTUNITY DETAILS (smaller) */}
-        <div className="flex w-full flex-col rounded-lg border-2 border-dotted border-gray p-4">
-          <div className="flex gap-4">
-            <div className="">
-              <AvatarImage
-                icon={opportunity?.organizationLogoURL ?? null}
-                alt="Company Logo"
-                size={60}
-                // sizeMobile={42}
-              />
-            </div>
-            <div className="flex max-w-[200px] flex-col gap-1 sm:max-w-[480px] md:max-w-[420px]">
-              <h4 className="overflow-hidden text-ellipsis whitespace-nowrap text-sm font-semibold leading-7 text-black md:text-xl md:leading-8">
-                {opportunity?.title}
-              </h4>
-              <h6 className=" overflow-hidden text-ellipsis whitespace-nowrap text-xs text-gray-dark">
-                By {opportunity?.organizationName}
-              </h6>
-            </div>
+      {/* MAIN CONTENT */}
+      {!linkInfoIsLoading && (
+        <div className="flex flex-col items-center justify-center gap-4 p-8">
+          <div className="-mt-16 flex h-12 w-12 items-center justify-center rounded-full border-green-dark bg-white shadow-lg">
+            <IoShareSocialOutline className="h-7 w-7" />
           </div>
 
-          {/* BADGES */}
-          <Badges opportunity={opportunity} />
-
-          {/* DATES */}
-          {opportunity?.status == "Active" && (
-            <div className="flex flex-col text-sm text-gray-dark">
-              <div>
-                {opportunity.dateStart && (
-                  <>
-                    <span className="mr-2 font-bold">Starts:</span>
-                    <span className="text-xs tracking-widest text-black">
-                      <Moment format={DATE_FORMAT_HUMAN} utc={true}>
-                        {opportunity.dateStart}
-                      </Moment>
-                    </span>
-                  </>
-                )}
+          <h3>Share this opportunity!</h3>
+
+          {/* OPPORTUNITY DETAILS (smaller) */}
+          <div className="flex w-full flex-col rounded-lg border-2 border-dotted border-gray p-4">
+            <div className="flex gap-4">
+              <div className="">
+                <AvatarImage
+                  icon={opportunity?.organizationLogoURL ?? null}
+                  alt={`${opportunity?.organizationName} Logo`}
+                  size={60}
+                />
               </div>
-              <div>
-                {opportunity.dateEnd && (
-                  <>
-                    <span className="mr-2 font-bold">Ends:</span>
-                    <span className="text-xs tracking-widest text-black">
-                      <Moment format={DATE_FORMAT_HUMAN} utc={true}>
-                        {opportunity.dateEnd}
-                      </Moment>
-                    </span>
-                  </>
-                )}
+              <div className="flex max-w-[200px] flex-col gap-1 sm:max-w-[480px] md:max-w-[420px]">
+                <h4 className="overflow-hidden text-ellipsis whitespace-nowrap text-sm font-semibold leading-7 text-black md:text-xl md:leading-8">
+                  {opportunity?.title}
+                </h4>
+                <h6 className=" overflow-hidden text-ellipsis whitespace-nowrap text-xs text-gray-dark">
+                  By {opportunity?.organizationName}
+                </h6>
               </div>
             </div>
-          )}
-        </div>
 
-        {/* BUTTONS */}
-        <div className="grid w-full grid-cols-1 gap-4 md:grid-cols-2">
-          <button
-            onClick={copyToClipboard}
-            className="flex w-full items-center gap-2 rounded-xl border-[1px] border-gray px-4 py-3 text-sm font-semibold text-black hover:bg-gray-light md:text-lg"
-          >
-            <IoCopy className="mr-2 h-6 w-6" />
-            Copy Link
-          </button>
-          <button
-            onClick={generateQRCode}
-            className="flex w-full items-center gap-2 rounded-xl border-[1px] border-gray px-4 py-3 text-sm font-semibold text-black hover:bg-gray-light md:text-lg"
-          >
-            <IoQrCode className="mr-2 h-6 w-6" />
-            Generate QR Code
-          </button>
-          <button
-            onClick={() => {
-              if (navigator.share) {
-                navigator
-                  .share({
-                    title: "Page Title",
-                    text: "Page description",
-                    url: "https://example.com", // replace with your URL
-                  })
-                  .then(() => console.log("Successful share"))
-                  .catch((error) => console.log("Error sharing", error));
-              } else {
-                console.log("Share not supported on this browser");
-              }
-            }}
-            className="flex w-full items-center gap-2 rounded-xl border-[1px] border-gray px-4 py-3 text-sm font-semibold text-black hover:bg-gray-light md:text-lg"
-          >
-            <IoEllipsisHorizontalOutline className="mr-2 h-6 w-6 text-black" />
-            More options
-          </button>
-        </div>
+            {/* BADGES */}
+            <Badges opportunity={opportunity} />
 
-        {showQRCode && (
-          // <img
-          //   src={`https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(
-          //     url,
-          //   )}`}
-          //   alt="QR Code"
-          // />
-          <Image
-            src={iconBookmark}
-            alt="QR Code"
-            width={47}
-            height={35}
-            style={{ width: 47, height: 35 }}
-          />
-        )}
-      </div>
+            {/* DATES */}
+            {opportunity?.status == "Active" && (
+              <div className="flex flex-col text-sm text-gray-dark">
+                <div>
+                  {opportunity.dateStart && (
+                    <>
+                      <span className="mr-2 font-bold">Starts:</span>
+                      <span className="text-xs tracking-widest text-black">
+                        <Moment format={DATE_FORMAT_HUMAN} utc={true}>
+                          {opportunity.dateStart}
+                        </Moment>
+                      </span>
+                    </>
+                  )}
+                </div>
+                <div>
+                  {opportunity.dateEnd && (
+                    <>
+                      <span className="mr-2 font-bold">Ends:</span>
+                      <span className="text-xs tracking-widest text-black">
+                        <Moment format={DATE_FORMAT_HUMAN} utc={true}>
+                          {opportunity.dateEnd}
+                        </Moment>
+                      </span>
+                    </>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* BUTTONS */}
+          <div className="grid w-full grid-cols-1 gap-4 md:grid-cols-2">
+            <button
+              onClick={onClick_CopyToClipboard}
+              className="flex w-full items-center gap-2 rounded-xl border-[1px] border-gray px-4 py-3 text-sm font-semibold text-black hover:bg-gray-light md:text-lg"
+            >
+              <IoCopy className="mr-2 h-6 w-6" />
+              Copy Link
+            </button>
+            <button
+              onClick={onClick_GenerateQRCode}
+              className="flex w-full items-center gap-2 rounded-xl border-[1px] border-gray px-4 py-3 text-sm font-semibold text-black hover:bg-gray-light md:text-lg"
+            >
+              <IoQrCode className="mr-2 h-6 w-6" />
+              Generate QR Code
+            </button>
+            <button
+              onClick={onClick_MoreOptions}
+              className="flex w-full items-center gap-2 rounded-xl border-[1px] border-gray px-4 py-3 text-sm font-semibold text-black hover:bg-gray-light md:text-lg"
+            >
+              <IoEllipsisHorizontalOutline className="mr-2 h-6 w-6 text-black" />
+              More options
+            </button>
+          </div>
+
+          {/* QR CODE */}
+          {showQRCode && qrCodeImageData && (
+            <Image
+              src={qrCodeImageData}
+              alt="QR Code"
+              width={200}
+              height={200}
+              style={{ width: 200, height: 200 }}
+            />
+          )}
+        </div>
+      )}
     </div>
   );
 };
diff --git a/src/web/src/pages/opportunities/[opportunityId]/index.tsx b/src/web/src/pages/opportunities/[opportunityId]/index.tsx
index 0e3124d70..a0cc9944d 100644
--- a/src/web/src/pages/opportunities/[opportunityId]/index.tsx
+++ b/src/web/src/pages/opportunities/[opportunityId]/index.tsx
@@ -6,13 +6,7 @@ import {
 } from "@tanstack/react-query";
 import { type GetServerSidePropsContext } from "next";
 import { type ParsedUrlQuery } from "querystring";
-import {
-  useState,
-  type ReactElement,
-  useMemo,
-  useCallback,
-  useEffect,
-} from "react";
+import { useState, type ReactElement, useCallback, useEffect } from "react";
 import { type OpportunityInfo } from "~/api/models/opportunity";
 import {
   getOpportunityInfoById,
@@ -25,22 +19,15 @@ import {
   IoMdClose,
   IoMdFingerPrint,
   IoMdArrowRoundBack,
-  IoMdPlay,
   IoMdBookmark,
-  IoMdPerson,
-  IoIosBook,
-  IoMdCalendar,
-  IoMdCloudUpload,
+  IoMdShare,
 } from "react-icons/io";
-import { IoCopy, IoQrCode, IoEllipsisHorizontalOutline } from "react-icons/io5";
 import type { NextPageWithLayout } from "~/pages/_app";
 import ReactModal from "react-modal";
 import iconUpload from "public/images/icon-upload.svg";
 import iconOpen from "public/images/icon-open.svg";
 import iconClock from "public/images/icon-clock.svg";
-import iconZlto from "public/images/icon-zlto.svg";
 import iconBookmark from "public/images/icon-bookmark.svg";
-import iconShare from "public/images/icon-share.svg";
 import iconDifficulty from "public/images/icon-difficulty.svg";
 import iconLanguage from "public/images/icon-language.svg";
 import iconTopics from "public/images/icon-topics.svg";
@@ -85,7 +72,6 @@ import { AvatarImage } from "~/components/AvatarImage";
 import { useRouter } from "next/router";
 import { Unauthenticated } from "~/components/Status/Unauthenticated";
 import { Unauthorized } from "~/components/Status/Unauthorized";
-import { set } from "nprogress";
 import Badges from "~/components/Opportunity/Badges";
 import Share from "~/components/Opportunity/Share";
 
@@ -523,11 +509,12 @@ const OpportunityDetails: NextPageWithLayout<{
                       this page upon finishing to{" "}
                       <strong>earn your ZLTO</strong>.
                     </div>
-                    {/* <div>Don’t show me this message again</div> */}
+
                     <div className="text-center md:w-[450px]">
                       Be mindful of external sites&apos; privacy policy and keep
                       your data private.
                     </div>
+
                     <div className="mt-4 flex w-full flex-grow flex-col justify-center gap-4 md:flex-row">
                       <button
                         type="button"
@@ -540,15 +527,6 @@ const OpportunityDetails: NextPageWithLayout<{
                           }`
                         }
                         onClick={onUpdateSavedOpportunity}
-                        // ensure user is logged in and opportunity is published and active
-                        // disabled={
-                        //   !user ||
-                        //   !(
-                        //     opportunity?.published &&
-                        //     opportunity?.status != "Inactive" &&
-                        //     new Date(opportunity?.dateStart) > new Date()
-                        //   )
-                        // }
                       >
                         <IoMdBookmark
                           style={{ width: "20px", height: "20px" }}
@@ -800,7 +778,7 @@ const OpportunityDetails: NextPageWithLayout<{
                         )}
 
                         {/* BUTTONS */}
-                        <div className="mt-4 grid grid-cols-1 gap-4 lg:grid-cols-2">
+                        <div className="mt-4 flex flex-col gap-4 md:flex-row">
                           <div className="flex flex-grow flex-col gap-4 md:flex-row">
                             {opportunity.url && (
                               <button
@@ -899,12 +877,12 @@ const OpportunityDetails: NextPageWithLayout<{
                                 </>
                               )}
                           </div>
-                          //TODO: last here, buttons wrapping at md
-                          <div className="flex justify-between gap-2 md:justify-end md:gap-4 lg:justify-end">
+
+                          <div className="flex gap-2">
                             <button
                               type="button"
                               className={
-                                "btn btn-sm h-10 w-full flex-shrink rounded-full border-gray-dark normal-case text-gray-dark md:max-w-[120px]" +
+                                "btn btn-sm h-10 w-full flex-shrink flex-nowrap rounded-full border-gray-dark normal-case text-gray-dark md:max-w-[120px]" +
                                 ` ${
                                   isOppSaved
                                     ? "border-yellow bg-yellow-light text-yellow"
@@ -912,28 +890,15 @@ const OpportunityDetails: NextPageWithLayout<{
                                 }`
                               }
                               onClick={onUpdateSavedOpportunity}
-                              // ensure user is logged in and opportunity is published and active
-                              // disabled={
-                              //   !user ||
-                              //   !(
-                              //     opportunity?.published &&
-                              //     opportunity?.status != "Inactive" &&
-                              //     new Date(opportunity?.dateStart) > new Date()
-                              //   )
-                              // }
                             >
-                              <IoMdBookmark
-                                style={{ width: "20px", height: "20px" }}
-                              />
+                              <IoMdBookmark className="mr-1 h-5 w-5" />
 
-                              <span className="ml-1">
-                                {isOppSaved ? "Saved" : "Save"}
-                              </span>
+                              {isOppSaved ? "Saved" : "Save"}
                             </button>
 
                             <button
                               type="button"
-                              className="btn btn-sm h-10 w-full flex-shrink rounded-full border-gray-dark bg-white normal-case text-gray-dark hover:bg-green-dark hover:text-white md:max-w-[120px]"
+                              className="btn btn-sm h-10 w-full flex-shrink flex-nowrap rounded-full border-gray-dark bg-white normal-case text-gray-dark hover:bg-green-dark hover:text-white md:max-w-[120px]"
                               onClick={onShareOpportunity}
                               // ensure opportunity is published and active (user logged in check is done in function)
                               disabled={
@@ -943,17 +908,8 @@ const OpportunityDetails: NextPageWithLayout<{
                                 )
                               }
                             >
-                              <Image
-                                src={iconShare}
-                                alt="Icon Share"
-                                width={20}
-                                height={20}
-                                sizes="100vw"
-                                priority={true}
-                                style={{ width: "20px", height: "20px" }}
-                              />
-
-                              <span className="ml-1">Share</span>
+                              <IoMdShare className="mr-1 h-5 w-5" />
+                              Share
                             </button>
                           </div>
                         </div>

From 30f71e1b33f6709a1829247cdb9112ecabed82d1 Mon Sep 17 00:00:00 2001
From: Jason Dicker <dickerjason@gmail.com>
Date: Thu, 25 Apr 2024 11:07:27 +0200
Subject: [PATCH 4/4] local website url fix

---
 src/api/src/application/Yoma.Core.Api/appsettings.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/api/src/application/Yoma.Core.Api/appsettings.json b/src/api/src/application/Yoma.Core.Api/appsettings.json
index f28841cda..df111f6e9 100644
--- a/src/api/src/application/Yoma.Core.Api/appsettings.json
+++ b/src/api/src/application/Yoma.Core.Api/appsettings.json
@@ -27,7 +27,7 @@
   },
 
   "AppSettings": {
-    "AppBaseURL": "http://localhost:3001",
+    "AppBaseURL": "http://localhost:3000",
     "Hangfire": {
       "Username": "admin",
       "Password": "password"