fix: add lost "copy link" feature

openedx · Jun 30, 2023 · 1fda588 · 1fda588
1 parent dfb50a5
commit 1fda588
Show file tree

Hide file tree

Showing 8 changed files with 75 additions and 20 deletions.
diff --git a/src/assets/images/appStore.png b/src/assets/images/appStore.png
diff --git a/src/assets/images/googleplay.png b/src/assets/images/googleplay.png
diff --git a/src/components/ProgramCertificateModal/ProgramCertificateModal.jsx b/src/components/ProgramCertificateModal/ProgramCertificateModal.jsx
@@ -5,7 +5,7 @@ import { BrowserView, MobileView, isBrowser } from 'react-device-detect';
 import {
   ActionRow, Button, Row, StandardModal,
 } from '@edx/paragon';
-import { Info } from '@edx/paragon/icons';
+import { Info, ContentCopy } from '@edx/paragon/icons';
 
 import messages from './messages';
 import appStoreImg from '../../assets/images/appStore.png';
@@ -17,8 +17,8 @@ function ProgramCertificateModal({
   const {
     deeplink,
     qrcode,
-    app_link_android: appLinkAndroid,
-    app_link_ios: appLinkIos,
+    app_link_android: googlePlayAppLink,
+    app_link_ios: appleStoreAppLink,
     error,
   } = data;
 
@@ -31,6 +31,10 @@ function ProgramCertificateModal({
     );
   }
 
+  const handleCopyClick = () => {
+    navigator.clipboard.writeText(deeplink);
+  };
+
   return (
     <StandardModal
       title={intl.formatMessage(messages.certificateModalTitle)}
@@ -62,6 +66,14 @@ function ProgramCertificateModal({
                   alt={intl.formatMessage(messages.certificateModalQrCodeLabel)}
                 />
               </div>
+              <button
+                className="justify-content-center align-items-center mt-2 copy-link"
+                onClick={handleCopyClick}
+                type="button"
+              >
+                <ContentCopy />
+                {intl.formatMessage(messages.certificateModalCopyLinkLabel)}
+              </button>
             </div>
             <div className="col-12 col-md-8">
               <h4>
@@ -88,43 +100,43 @@ function ProgramCertificateModal({
                     messages.certificateModalInstructionStep4,
                   )}
                 </li>
+                <div className="d-flex justify-content-between buttons-wrapper">
+                  <a href={googlePlayAppLink}>
+                    <img src={googlePlayImg} alt="Google Play" />
+                  </a>
+                  <a href={appleStoreAppLink}>
+                    <img src={appStoreImg} alt="Apple App Store" />
+                  </a>
+                </div>
               </ol>
             </div>
           </Row>
         </BrowserView>
         <MobileView>
           <p>{intl.formatMessage(messages.certificateModalMobileTitle)}</p>
           <Button
-            href={appLinkIos}
+            href={appleStoreAppLink}
             target="_blank"
             size="lg"
-            className="mb-2 bg-gray-900 p-2"
+            className="mb-3 mobile-button"
             block
             aria-label={intl.formatMessage(
               messages.certificateModalAppStoreBtn,
             )}
           >
-            <img
-              src={appStoreImg}
-              style={{ maxHeight: '2rem' }}
-              alt="App Store"
-            />
+            <img src={appStoreImg} alt="Apple App Store" />
           </Button>
           <Button
-            href={appLinkAndroid}
+            href={googlePlayAppLink}
             target="_blank"
             size="lg"
-            className="mb-3 bg-gray-900 p-2"
+            className="mb-3 mobile-button"
             block
             aria-label={intl.formatMessage(
               messages.certificateModalGooglePlayBtn,
             )}
           >
-            <img
-              src={googlePlayImg}
-              style={{ maxHeight: '2rem' }}
-              alt="Google Play"
-            />
+            <img src={googlePlayImg} alt="Google Play" />
           </Button>
           <p />
           <ol>

diff --git a/src/components/ProgramCertificateModal/ProgramCertificateModal.scss b/src/components/ProgramCertificateModal/ProgramCertificateModal.scss
@@ -0,0 +1,37 @@
+.buttons-wrapper {
+    margin-top: 25px;
+
+    img {
+        max-height: 44px;
+    }
+}
+
+.copy-link {
+    font-size: 14px;
+    color: #152F52;
+    cursor: pointer;
+    background: none;
+    border: none;
+    margin: 0;
+    padding: 0;
+
+    &:hover {
+        color: #000;
+    }
+
+    svg {
+        width: 20px;
+        height: 20px;
+        margin-right: 7px;
+    }
+}
+
+.mobile-button {
+    background-color: #000;
+    padding: 0 !important;
+    border: none;
+
+    img {
+        max-height: 44px;
+    }
+}
diff --git a/src/components/ProgramCertificateModal/messages.js b/src/components/ProgramCertificateModal/messages.js
@@ -76,6 +76,11 @@ const messages = defineMessages({
     defaultMessage: 'QR code to obtain the verifiable credential',
     description: 'The label for verifiable credential QR code',
   },
+  certificateModalCopyLinkLabel: {
+    id: 'credentials.modal.copyLink.label',
+    defaultMessage: 'Copy link',
+    description: 'Label for copy link from QR code',
+  },
   credentialsModalError: {
     id: 'credentials.modal.error',
     defaultMessage:

diff --git a/src/components/ProgramCertificatesList/ProgramCertificatesList.jsx b/src/components/ProgramCertificatesList/ProgramCertificatesList.jsx
@@ -30,7 +30,7 @@ function ProgramCertificatesList({ intl }) {
   const [modalIsOpen, openModal, closeModal] = useToggle(false);
 
   const [
-    verfifiableCredentialIssuanceData,
+    verifiableCredentialIssuanceData,
     setVerifiableCredentialIssuanceData,
   ] = useState({});
 
@@ -171,7 +171,7 @@ function ProgramCertificatesList({ intl }) {
       <ProgramCertificateModal
         isOpen={modalIsOpen}
         close={closeModal}
-        data={verfifiableCredentialIssuanceData}
+        data={verifiableCredentialIssuanceData}
       />
     </main>
   );

diff --git a/src/components/ProgramCertificatesList/test/ProgramCertificatesList.test.jsx b/src/components/ProgramCertificatesList/test/ProgramCertificatesList.test.jsx
@@ -21,7 +21,7 @@ describe('program-certificates-list', () => {
 
   it('renders the Program Certificates List', () => {
     render(<ProgramCertificatesList />);
-    
+
     expect(screen.getByText('Verifiable Credentials')).toBeTruthy();
     expect(screen.getByText('Back to My Profile')).toBeTruthy();
     expect(screen.getByText('Questions about Verifiable Credentials?')).toBeTruthy();

diff --git a/src/components/index.scss b/src/components/index.scss
@@ -1,2 +1,3 @@
 @import './ProgramRecord/ProgramRecord.scss';
 @import './ProgramRecordSendModal/SendLearnerRecordModal.scss';
+@import './ProgramCertificateModal/ProgramCertificateModal.scss';