From c9cd8efc239eb520c56a011bf0f7eff8f3cba642 Mon Sep 17 00:00:00 2001 From: Thomas Desmond <24610108+thomas-desmond@users.noreply.github.com> Date: Thu, 15 Feb 2024 06:42:39 -0800 Subject: [PATCH 1/7] Beginning Share Button work --- package-lock.json | 39 +++++++++++++++++++ package.json | 1 + .../OutcomeGenerator/OutcomeGenerator.tsx | 14 +++++-- src/components/ui/ShareModal/ShareModal.tsx | 36 +++++++++++++++++ 4 files changed, 86 insertions(+), 4 deletions(-) create mode 100644 src/components/ui/ShareModal/ShareModal.tsx diff --git a/package-lock.json b/package-lock.json index af17939..f0e5b7e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -61,6 +61,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" @@ -3819,6 +3820,11 @@ "node": ">=8" } }, + "node_modules/classnames": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", + "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==" + }, "node_modules/clean-stack": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz", @@ -6141,6 +6147,27 @@ "graceful-fs": "^4.1.6" } }, + "node_modules/jsonp": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/jsonp/-/jsonp-0.2.1.tgz", + "integrity": "sha512-pfog5gdDxPdV4eP7Kg87M8/bHgshlZ5pybl+yKxAnCZ5O7lCIn7Ixydj03wOlnDQesky2BPyA91SQ+5Y/mNwzw==", + "dependencies": { + "debug": "^2.1.3" + } + }, + "node_modules/jsonp/node_modules/debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "dependencies": { + "ms": "2.0.0" + } + }, + "node_modules/jsonp/node_modules/ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" + }, "node_modules/jsprim": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-2.0.2.tgz", @@ -7446,6 +7473,18 @@ } } }, + "node_modules/react-share": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/react-share/-/react-share-5.1.0.tgz", + "integrity": "sha512-OvyfMtj/0UzH1wi90OdHhZVJ6WUC/+IeWvBwppeZozwIGyAjQgyR0QXlHOrxVHVECqnGvcpBaFTXVrqouTieaw==", + "dependencies": { + "classnames": "^2.3.2", + "jsonp": "^0.2.1" + }, + "peerDependencies": { + "react": "^17 || ^18" + } + }, "node_modules/react-style-singleton": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz", diff --git a/package.json b/package.json index cca571f..fd87397 100644 --- a/package.json +++ b/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" diff --git a/src/components/Outcomes/OutcomeGenerator/OutcomeGenerator.tsx b/src/components/Outcomes/OutcomeGenerator/OutcomeGenerator.tsx index 9ce86b7..1ca70d4 100644 --- a/src/components/Outcomes/OutcomeGenerator/OutcomeGenerator.tsx +++ b/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 = () => { const gameInfoContext = useGameInfoContext(); @@ -70,9 +73,12 @@ export const OutcomeGenerator: FC = () => { return ( <> - - {outcome.title} - + + + {outcome.title} + + + diff --git a/src/components/ui/ShareModal/ShareModal.tsx b/src/components/ui/ShareModal/ShareModal.tsx new file mode 100644 index 0000000..c717825 --- /dev/null +++ b/src/components/ui/ShareModal/ShareModal.tsx @@ -0,0 +1,36 @@ +import React from 'react' +import { Button, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, useDisclosure } from '@chakra-ui/react'; +import { + TwitterIcon, TwitterShareButton, +} from "react-share"; +export default function ShareModal() { + const { isOpen, onOpen, onClose } = useDisclosure() + + return ( +
+ + + + + + Share This Page + + + Share Stuff + + + + + + + + + + +
+ ) +} From a3474feee43b893b64eedbca643150be675f8fca Mon Sep 17 00:00:00 2001 From: Thomas Desmond <24610108+thomas-desmond@users.noreply.github.com> Date: Thu, 15 Feb 2024 08:56:22 -0800 Subject: [PATCH 2/7] Added more socials and copy URL button --- src/components/ui/ShareModal/ShareModal.tsx | 65 +++++++++++++++++---- 1 file changed, 53 insertions(+), 12 deletions(-) diff --git a/src/components/ui/ShareModal/ShareModal.tsx b/src/components/ui/ShareModal/ShareModal.tsx index c717825..fe797fb 100644 --- a/src/components/ui/ShareModal/ShareModal.tsx +++ b/src/components/ui/ShareModal/ShareModal.tsx @@ -1,29 +1,70 @@ import React from 'react' -import { Button, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, useDisclosure } from '@chakra-ui/react'; -import { - TwitterIcon, TwitterShareButton, -} from "react-share"; +import { useRouter } from 'next/router' +import { Button, HStack, Input, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, useDisclosure, useClipboard } from '@chakra-ui/react'; +import { TwitterIcon, TwitterShareButton, LinkedinIcon, LinkedinShareButton, TelegramShareButton, TelegramIcon, RedditShareButton, RedditIcon, EmailShareButton, EmailIcon } from "react-share"; + +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 (
- + - Share This Page + Share Your Migration Advisor Results - Share Stuff - + + - + + + + + + + + + + + + + + + + { + setValue(e.target.value); + }} + mr={2} + /> + + - + - - -
From d9cf43e1fabb913e677825803e54942559fbeffb Mon Sep 17 00:00:00 2001 From: Thomas Desmond <24610108+thomas-desmond@users.noreply.github.com> Date: Tue, 20 Feb 2024 08:07:48 -0800 Subject: [PATCH 4/7] Update ShareModal component with additional social media sharing options --- src/components/ui/ShareModal/ShareModal.tsx | 63 +++++++++++++-------- 1 file changed, 39 insertions(+), 24 deletions(-) diff --git a/src/components/ui/ShareModal/ShareModal.tsx b/src/components/ui/ShareModal/ShareModal.tsx index 7c93b6b..a7efff3 100644 --- a/src/components/ui/ShareModal/ShareModal.tsx +++ b/src/components/ui/ShareModal/ShareModal.tsx @@ -1,7 +1,7 @@ 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 } from "react-share"; +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!" @@ -28,6 +28,21 @@ export default function ShareModal() { + + + + + + + + + @@ -36,28 +51,28 @@ export default function ShareModal() { - - - - - - - - { - setValue(e.target.value); - }} - mr={2} - /> - - - - - - + + + + + + + + { + setValue(e.target.value); + }} + mr={2} + /> + + + + + + ) } From ab9b67665c16f5d3358de535a6e7ae9cb36c85d2 Mon Sep 17 00:00:00 2001 From: Thomas Desmond <24610108+thomas-desmond@users.noreply.github.com> Date: Tue, 20 Feb 2024 08:23:42 -0800 Subject: [PATCH 5/7] Update email share button in ShareModal.tsx --- src/components/ui/ShareModal/ShareModal.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/ui/ShareModal/ShareModal.tsx b/src/components/ui/ShareModal/ShareModal.tsx index a7efff3..75c0785 100644 --- a/src/components/ui/ShareModal/ShareModal.tsx +++ b/src/components/ui/ShareModal/ShareModal.tsx @@ -45,7 +45,8 @@ export default function ShareModal() { + subject='Sitecore Migration Advisor Results' + body={shareText}> Date: Mon, 26 Feb 2024 09:15:07 -0800 Subject: [PATCH 6/7] Match icon spacing to dev portal --- src/components/ui/ShareModal/ShareModal.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ui/ShareModal/ShareModal.tsx b/src/components/ui/ShareModal/ShareModal.tsx index 75c0785..735b91d 100644 --- a/src/components/ui/ShareModal/ShareModal.tsx +++ b/src/components/ui/ShareModal/ShareModal.tsx @@ -19,7 +19,7 @@ export default function ShareModal() { return (
- + @@ -27,7 +27,7 @@ export default function ShareModal() { Share Your Migration Advisor Results - + From e2e55d1a95d12e620041386093a7ca0226518722 Mon Sep 17 00:00:00 2001 From: Thomas Desmond <24610108+thomas-desmond@users.noreply.github.com> Date: Mon, 26 Feb 2024 09:23:31 -0800 Subject: [PATCH 7/7] Add test step to check that Share modal opens --- cypress/e2e/OutcomeFlow/outcome.cy.ts | 5 ++++- src/components/ui/ShareModal/ShareModal.tsx | 2 +- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/cypress/e2e/OutcomeFlow/outcome.cy.ts b/cypress/e2e/OutcomeFlow/outcome.cy.ts index 6a533dc..ab00c56 100644 --- a/cypress/e2e/OutcomeFlow/outcome.cy.ts +++ b/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', () => { diff --git a/src/components/ui/ShareModal/ShareModal.tsx b/src/components/ui/ShareModal/ShareModal.tsx index 735b91d..a01d26e 100644 --- a/src/components/ui/ShareModal/ShareModal.tsx +++ b/src/components/ui/ShareModal/ShareModal.tsx @@ -19,7 +19,7 @@ export default function ShareModal() { return (
- +