feat: adding text to complete course modal (#1666)

Co-authored-by: Gabriele Antonini <[email protected]>

.changeset/poor-trains-tease.md

@@ -0,0 +1,5 @@
+---
+'@commercetools-docs/gatsby-theme-learning': patch
+---
+
+adjusting text in the course complete modal

packages/gatsby-theme-learning/package.json

@@ -19,6 +19,7 @@
     "@commercetools-uikit/checkbox-input": "16.0.0",
     "@commercetools-uikit/design-system": "16.0.0",
     "@commercetools-uikit/icons": "16.0.0",
+    "@commercetools-uikit/link": "16.0.0",
     "@commercetools-uikit/loading-spinner": "16.0.0",
     "@commercetools-uikit/messages": "16.0.0",
     "@commercetools-uikit/notifications": "16.0.0",
@@ -28,6 +29,7 @@
     "@commercetools-uikit/spacings": "16.0.0",
     "@commercetools-uikit/spacings-stack": "16.0.0",
     "@commercetools-uikit/stamp": "16.0.0",
+    "@commercetools-uikit/text": "16.0.0",
     "@commercetools-uikit/text-field": "16.0.0",
     "@commercetools-uikit/text-input": "16.0.0",
     "@emotion/react": "^11.10.5",

packages/gatsby-theme-learning/src/components/course-complete-modal.tsx

@@ -2,6 +2,8 @@ import { SyntheticEvent, useEffect, useState } from 'react';
 import { navigate } from 'gatsby';
 import { useFetchCourseDetails } from '../hooks/use-course-details';
 import { ConfirmationDialog, useModalState } from '@commercetools-docs/ui-kit';
+import Text from '@commercetools-uikit/text';
+import Link from '@commercetools-uikit/link';
 import SpacingsStack from '@commercetools-uikit/spacings-stack';
 import useIsClientSide from '../hooks/use-is-client-side';
 import {
@@ -13,6 +15,9 @@ type CourseCompleteModalProps = {
   courseId: number;
 };
 
+const SUPPORT_DEEPLINK =
+  'https://commercetools.atlassian.net/servicedesk/customer/portal/22/group/47/create/122?summary=Self%20Learning:[Add%20Title%20Here]';
+
 /**
  * Returns
  * - the next (relative to the current) unfinished course path or
@@ -100,7 +105,14 @@ const CourseCompleteModal = (props: CourseCompleteModalProps) => {
       onConfirm={onConfirmHandler}
     >
       <SpacingsStack scale="m">
-        <p>{text}</p>
+        <Text.Body>{text}</Text.Body>
+        <Text.Body isItalic>
+          We value your feedback and would love to hear about your experience
+          with the course.
+          <Link isExternal={true} to={SUPPORT_DEEPLINK}>
+            Click here to provide feedback via our support portal.
+          </Link>
+        </Text.Body>
       </SpacingsStack>
     </ConfirmationDialog>
   );

yarn.lock

@@ -2359,6 +2359,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/runtime@npm:^7.1.2":
+  version: 7.21.5
+  resolution: "@babel/runtime@npm:7.21.5"
+  dependencies:
+    regenerator-runtime: ^0.13.11
+  checksum: 358f2779d3187f5c67ad302e8f8d435412925d0b991d133c7d4a7b1ddd5a3fda1b6f34537cb64628dfd96a27ae46df105bed3895b8d754b88cacdded8d1129dd
+  languageName: node
+  linkType: hard
+
 "@babel/runtime@npm:^7.19.4, @babel/runtime@npm:^7.20.1":
   version: 7.20.13
   resolution: "@babel/runtime@npm:7.20.13"
@@ -3092,6 +3101,7 @@ __metadata:
     "@commercetools-uikit/checkbox-input": 16.0.0
     "@commercetools-uikit/design-system": 16.0.0
     "@commercetools-uikit/icons": 16.0.0
+    "@commercetools-uikit/link": 16.0.0
     "@commercetools-uikit/loading-spinner": 16.0.0
     "@commercetools-uikit/messages": 16.0.0
     "@commercetools-uikit/notifications": 16.0.0
@@ -3101,6 +3111,7 @@ __metadata:
     "@commercetools-uikit/spacings": 16.0.0
     "@commercetools-uikit/spacings-stack": 16.0.0
     "@commercetools-uikit/stamp": 16.0.0
+    "@commercetools-uikit/text": 16.0.0
     "@commercetools-uikit/text-field": 16.0.0
     "@commercetools-uikit/text-input": 16.0.0
     "@emotion/react": ^11.10.5
@@ -3563,6 +3574,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@commercetools-uikit/link@npm:16.0.0":
+  version: 16.0.0
+  resolution: "@commercetools-uikit/link@npm:16.0.0"
+  dependencies:
+    "@babel/runtime": ^7.20.13
+    "@babel/runtime-corejs3": ^7.20.13
+    "@commercetools-uikit/design-system": 16.0.0
+    "@commercetools-uikit/icons": 16.0.0
+    "@commercetools-uikit/spacings-inline": 16.0.0
+    "@commercetools-uikit/utils": 16.0.0
+    "@emotion/react": ^11.10.5
+    "@emotion/styled": ^11.10.5
+    "@types/history": ^4.7.11
+    "@types/react-router-dom": ^5.3.3
+    history: 4.10.1
+    prop-types: 15.8.1
+  peerDependencies:
+    react: 17.x
+    react-intl: 6.x
+    react-router-dom: 5.x
+  checksum: 6cf041b4d8f2d535172f258655d16220a3bd1d153ea8452199f5d948c1fde5b1b9669d536e212485d818d0f8d45b18b36d0da0cc98a3427b6fe6e693dac36ada
+  languageName: node
+  linkType: hard
+
 "@commercetools-uikit/loading-spinner@npm:16.0.0":
   version: 16.0.0
   resolution: "@commercetools-uikit/loading-spinner@npm:16.0.0"
@@ -8578,6 +8613,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/history@npm:^4.7.11":
+  version: 4.7.11
+  resolution: "@types/history@npm:4.7.11"
+  checksum: c92e2ba407dcab0581a9afdf98f533aa41b61a71133420a6d92b1ca9839f741ab1f9395b17454ba5b88cb86020b70b22d74a1950ccfbdfd9beeaa5459fdc3464
+  languageName: node
+  linkType: hard
+
 "@types/hoist-non-react-statics@npm:^3.3.1":
   version: 3.3.1
   resolution: "@types/hoist-non-react-statics@npm:3.3.1"
@@ -8908,6 +8950,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react-router-dom@npm:^5.3.3":
+  version: 5.3.3
+  resolution: "@types/react-router-dom@npm:5.3.3"
+  dependencies:
+    "@types/history": ^4.7.11
+    "@types/react": "*"
+    "@types/react-router": "*"
+  checksum: 28c4ea48909803c414bf5a08502acbb8ba414669b4b43bb51297c05fe5addc4df0b8fd00e0a9d1e3535ec4073ef38aaafac2c4a2b95b787167d113bc059beff3
+  languageName: node
+  linkType: hard
+
+"@types/react-router@npm:*":
+  version: 5.1.20
+  resolution: "@types/react-router@npm:5.1.20"
+  dependencies:
+    "@types/history": ^4.7.11
+    "@types/react": "*"
+  checksum: 128764143473a5e9457ddc715436b5d49814b1c214dde48939b9bef23f0e77f52ffcdfa97eb8d3cc27e2c229869c0cdd90f637d887b62f2c9f065a87d6425419
+  languageName: node
+  linkType: hard
+
 "@types/react-transition-group@npm:^4.4.0":
   version: 4.4.4
   resolution: "@types/react-transition-group@npm:4.4.4"
@@ -19440,6 +19503,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"history@npm:4.10.1":
+  version: 4.10.1
+  resolution: "history@npm:4.10.1"
+  dependencies:
+    "@babel/runtime": ^7.1.2
+    loose-envify: ^1.2.0
+    resolve-pathname: ^3.0.0
+    tiny-invariant: ^1.0.2
+    tiny-warning: ^1.0.0
+    value-equal: ^1.0.1
+  checksum: addd84bc4683929bae4400419b5af132ff4e4e9b311a0d4e224579ea8e184a6b80d7f72c55927e4fa117f69076a9e47ce082d8d0b422f1a9ddac7991490ca1d0
+  languageName: node
+  linkType: hard
+
 "hogan.js@npm:^3.0.2":
   version: 3.0.2
   resolution: "hogan.js@npm:3.0.2"
@@ -23254,7 +23331,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"loose-envify@npm:^1.0.0, loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0":
+"loose-envify@npm:^1.0.0, loose-envify@npm:^1.1.0, loose-envify@npm:^1.2.0, loose-envify@npm:^1.4.0":
   version: 1.4.0
   resolution: "loose-envify@npm:1.4.0"
   dependencies:
@@ -29098,6 +29175,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"resolve-pathname@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "resolve-pathname@npm:3.0.0"
+  checksum: 6147241ba42c423dbe83cb067a2b4af4f60908c3af57e1ea567729cc71416c089737fe2a73e9e79e7a60f00f66c91e4b45ad0d37cd4be2d43fec44963ef14368
+  languageName: node
+  linkType: hard
+
 "resolve-pkg@npm:^2.0.0":
   version: 2.0.0
   resolution: "resolve-pkg@npm:2.0.0"
@@ -31347,14 +31431,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tiny-invariant@npm:1.3.1":
+"tiny-invariant@npm:1.3.1, tiny-invariant@npm:^1.0.2":
   version: 1.3.1
   resolution: "tiny-invariant@npm:1.3.1"
   checksum: 872dbd1ff20a21303a2fd20ce3a15602cfa7fcf9b228bd694a52e2938224313b5385a1078cb667ed7375d1612194feaca81c4ecbe93121ca1baebe344de4f84c
   languageName: node
   linkType: hard
 
-"tiny-warning@npm:^1.0.2":
+"tiny-warning@npm:^1.0.0, tiny-warning@npm:^1.0.2":
   version: 1.0.3
   resolution: "tiny-warning@npm:1.0.3"
   checksum: da62c4acac565902f0624b123eed6dd3509bc9a8d30c06e017104bedcf5d35810da8ff72864400ad19c5c7806fc0a8323c68baf3e326af7cb7d969f846100d71
@@ -32839,6 +32923,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"value-equal@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "value-equal@npm:1.0.1"
+  checksum: bb7ae1facc76b5cf8071aeb6c13d284d023fdb370478d10a5d64508e0e6e53bb459c4bbe34258df29d82e6f561f874f0105eba38de0e61fe9edd0bdce07a77a2
+  languageName: node
+  linkType: hard
+
 "value-or-promise@npm:1.0.11":
   version: 1.0.11
   resolution: "value-or-promise@npm:1.0.11"