Feature/share buttons

cypress/e2e/OutcomeFlow/outcome.cy.ts

@@ -1,5 +1,5 @@
 describe('Outcome Page', () => {
-  it('XM Cloud should be the only product', () => {
+  it('XM Cloud should be the only product and share button exists', () => {
     cy.visit('/');
     cy.get('#start').click();
     cy.get('[value="Developer"]').click();
@@ -16,6 +16,9 @@ describe('Outcome Page', () => {
     cy.get('.chakra-modal__close-btn').click();
     cy.get('#required-products').should('exist').children().should('have.length', 1);
     cy.get('#required-products').children().should('contain', 'XM Cloud');
+    cy.get('#shareButton').click();
+    cy.get('header').contains('Share Your Migration Advisor Results').should('exist');
+
   });
 
   it('multiple required products', () => {

package.json

@@ -56,6 +56,7 @@
     "react-hook-form": "^7.47.0",
     "react-icons": "4.8.0",
     "react-lite-youtube-embed": "^2.3.52",
+    "react-share": "^5.1.0",
     "typescript": "^4.9.5",
     "uuid": "^9.0.1",
     "web-vitals": "^2.1.4"

src/components/Outcomes/OutcomeGenerator/OutcomeGenerator.tsx

@@ -6,18 +6,21 @@ import {
   AccordionPanel,
   Box,
   Heading,
+  Button,
   SimpleGrid,
+  HStack,
   Text,
 } from '@chakra-ui/react';
 import { useGameInfoContext } from 'components/Contexts';
 import { ConditionalResponse } from 'components/Outcomes';
 import { LinkCard, Loading, RichTextOutput, YouTubeVideoDisplay } from 'components/ui';
+import ShareModal from 'components/ui/ShareModal/ShareModal';
 import { OutcomeService } from 'lib/OutcomeService';
 import { IOutcome } from 'models';
 import { ExperienceEdgeOption, OutcomeConditions, TargetProduct } from 'models/OutcomeConditions';
 import { FC, useCallback, useEffect, useState } from 'react';
 
-interface OutcomeGeneratorProps {}
+interface OutcomeGeneratorProps { }
 
 export const OutcomeGenerator: FC<OutcomeGeneratorProps> = () => {
   const gameInfoContext = useGameInfoContext();
@@ -69,9 +72,12 @@ export const OutcomeGenerator: FC<OutcomeGeneratorProps> = () => {
 
   return (
     <>
-      <Heading size="lg" mb={2}>
-        {outcome.title}
-      </Heading>
+      <HStack justify={'space-between'}>
+        <Heading size="lg" mb={2}>
+          {outcome.title}
+        </Heading>
+        <ShareModal />
+      </HStack>
 
       <Text>
         <RichTextOutput content={outcome.productsIntro} />

src/components/ui/ShareModal/ShareModal.tsx

@@ -0,0 +1,79 @@
+import React from 'react'
+import { useRouter } from 'next/router'
+import { Button, HStack, Input, Modal, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalOverlay, useDisclosure, useClipboard } from '@chakra-ui/react';
+import { XIcon, TwitterShareButton, LinkedinIcon, LinkedinShareButton, EmailShareButton, EmailIcon, WhatsappShareButton, TelegramShareButton, RedditShareButton, WhatsappIcon, TelegramIcon, RedditIcon } from "react-share";
+import { MdContentCopy } from "react-icons/md";
+
+const shareText = "I just completed the Sitecore Migration Advisor assessment and got my migration resources. Check it out!"
+
+export default function ShareModal() {
+  const { isOpen, onOpen, onClose } = useDisclosure()
+
+  const router = useRouter()
+
+  let shareUrl = ''
+  if (typeof window !== 'undefined') {
+    shareUrl = window.location.origin + router.asPath;
+  }
+  const { onCopy, value, setValue, hasCopied } = useClipboard(shareUrl);
+
+  return (
+    <div>
+      <Button id='shareButton' onClick={onOpen}>Share</Button>
+
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Share Your Migration Advisor Results</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody mb={2}>
+            <HStack mb={2} justifyContent={'center'} gap={4} >
+              <WhatsappShareButton
+                url={shareUrl}
+                title={shareText}>
+                <WhatsappIcon size={32} round={true} />
+              </WhatsappShareButton>
+              <TelegramShareButton
+                url={shareUrl}
+                title={shareText}>
+                <TelegramIcon size={32} round={true} />
+              </TelegramShareButton>
+              <RedditShareButton
+                url={shareUrl}
+                title={shareText}>
+                <RedditIcon size={32} round={true} />
+              </RedditShareButton>
+              <EmailShareButton
+                url={shareUrl}
+                subject='Sitecore Migration Advisor Results'
+                body={shareText}>
+                <EmailIcon size={32} round={true} />
+              </EmailShareButton>
+              <LinkedinShareButton
+                url={shareUrl}
+                title={shareText}>
+              <LinkedinIcon size={32} round={true} />
+            </LinkedinShareButton>
+            <TwitterShareButton
+              url={shareUrl}
+              title={shareText}>
+              <XIcon size={32} round={true} />
+            </TwitterShareButton>
+          </HStack>
+          <HStack>
+            <Input
+              value={shareUrl}
+              contentEditable={false}
+              onChange={(e) => {
+                setValue(e.target.value);
+              }}
+              mr={2}
+            />
+            <Button whiteSpace={'nowrap'} onClick={onCopy}><MdContentCopy /></Button>
+          </HStack>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+    </div >
+  )
+}