chore: #290 update success messages after submitting app (#358)

packages/marketplace/src/components/pages/__tests__/__snapshots__/developer-submit-app-successfully.tsx.snap

@@ -12,31 +12,56 @@ exports[`DeveloperSubmitAppSuccessfully renders correctly 1`] = `
     hasPadding={true}
   >
     <CallToAction
-      buttonDataTest="submit-another-button"
-      buttonText="Submit Another App"
       dataTest="submit-success-section"
+      footerItems={
+        <React.Fragment>
+          <Unknown
+            onClick={[MockFunction]}
+            type="button"
+            variant="primary"
+          >
+            My Apps
+          </Unknown>
+          <Unknown
+            onClick={[MockFunction]}
+            type="button"
+            variant="primary"
+          >
+            Submit another app
+          </Unknown>
+        </React.Fragment>
+      }
       isCard={true}
-      onButtonClick={[Function]}
       title="Success"
     >
       <p>
-        Your App has been submitted successfully.
+        Your App has now been registered and can be accessed by clicking on ‘My Apps’ below.
       </p>
       <br />
       <p>
-        For it to be available on the Marketplace, you will need to make it ‘Listed’. To do this, click ‘Apps’ from the menu bar, open your submitted App and click ‘Edit Details’, simply tick the ‘Is Listed’ checkbox.
+        You will be directed to the ‘My Apps’ page where you will be able to access the ‘Client ID’ of you App (required for authentication) and or make any changes to your App by clicking ‘Edit Details’.
       </p>
       <br />
       <p>
-        You can also use this section to make any additional changes. Once you are ready to proceed, click ‘Submit App’. Our Administration department will then review the details you have submitted. Whilst this review is taking place, this App will be marked as ‘Pending Revision’ and you will not be able to make any further changes.
+        <strong>
+          Currently, your App is only visible to you
+        </strong>
+         and will not be available in the Marketplace until you have made it ‘Listed’. When you are ready to do this, click on ‘Edit Detail’ and tick the ‘Is Listed’ check box located in the ‘Marketplace Status’ section.
       </p>
       <br />
       <p>
-        You can check the status of any submissions by accessing ‘Apps’ from the menu bar.
+        <strong>
+          Please note:
+        </strong>
+         Any changes you make now to your App (included making it ‘Listed’) will require approval. These are called ‘Revisions’. All revisions will be sent to our Admin department and whilst your App is being reviewed, you will not be able to make any further changes and the App will be marked as ‘Pending Revision’.
       </p>
       <br />
       <p>
-        For any help or support, please visit the ‘Help’ page.
+        Once you have ‘Listed’ your application, and any revisions have been approved, your app will be live in the Marketplace and available for install by customers.
+      </p>
+      <br />
+      <p>
+        For any issues or support, please visit the ‘Help’ page.
       </p>
       <br />
     </CallToAction>

packages/marketplace/src/components/pages/__tests__/__snapshots__/developer-submit-app.tsx.snap

@@ -50,7 +50,8 @@ exports[`DeveloperSubmitApp should match a snapshot 1`] = `
 
 exports[`DeveloperSubmitApp should match submit app successfully snapshot 1`] = `
 <Component
-  onClickHandler={[Function]}
+  onGoBackToApps={[Function]}
+  onSubmitAnotherApp={[Function]}
 />
 `;
 

packages/marketplace/src/components/pages/__tests__/developer-submit-app-successfully.tsx

@@ -8,7 +8,8 @@ import {
 describe('DeveloperSubmitAppSuccessfully', () => {
   it('renders correctly', () => {
     const props: DeveloperSubmitAppSuccessfullyProps = {
-      onClickHandler: () => jest.fn(),
+      onGoBackToApps: jest.fn(),
+      onSubmitAnotherApp: jest.fn(),
     }
 
     expect(shallow(<DeveloperSubmitAppSuccessfully {...props} />)).toMatchSnapshot()

packages/marketplace/src/components/pages/developer-submit-app-successfully.tsx

@@ -1,39 +1,60 @@
 import * as React from 'react'
-import { FlexContainerResponsive } from '@reapit/elements'
+import { FlexContainerResponsive, Button } from '@reapit/elements'
 import CallToAction from '../ui/call-to-action'
 import styles from '@/styles/pages/developer-submit-app-successfully.scss?mod'
 
 export interface DeveloperSubmitAppSuccessfullyProps {
-  onClickHandler: () => void
+  onGoBackToApps: () => void
+  onSubmitAnotherApp: () => void
 }
-export const DeveloperSubmitAppSuccessfully: React.FC<DeveloperSubmitAppSuccessfullyProps> = ({ onClickHandler }) => (
+export const DeveloperSubmitAppSuccessfully: React.FC<DeveloperSubmitAppSuccessfullyProps> = ({
+  onGoBackToApps,
+  onSubmitAnotherApp,
+}) => (
   <FlexContainerResponsive hasPadding flexColumn centerContent className={styles.wrapDeveloperSuccess}>
     <FlexContainerResponsive flexColumn hasBackground hasPadding>
       <CallToAction
-        dataTest="submit-success-section"
-        onButtonClick={onClickHandler}
-        title="Success"
-        buttonText="Submit Another App"
-        buttonDataTest="submit-another-button"
         isCard
+        title="Success"
+        dataTest="submit-success-section"
+        footerItems={
+          <>
+            <Button variant="primary" type="button" onClick={onGoBackToApps}>
+              My Apps
+            </Button>
+            <Button variant="primary" type="button" onClick={onSubmitAnotherApp}>
+              Submit another app
+            </Button>
+          </>
+        }
       >
-        <p>Your App has been submitted successfully.</p>
+        <p>Your App has now been registered and can be accessed by clicking on &lsquo;My Apps&rsquo; below.</p>
         <br />
         <p>
-          For it to be available on the Marketplace, you will need to make it ‘Listed’. To do this, click ‘Apps’ from
-          the menu bar, open your submitted App and click ‘Edit Details’, simply tick the ‘Is Listed’ checkbox.
+          You will be directed to the &lsquo;My Apps&rsquo; page where you will be able to access the &lsquo;Client
+          ID&rsquo; of you App (required for authentication) and or make any changes to your App by clicking &lsquo;Edit
+          Details&rsquo;.
         </p>
         <br />
         <p>
-          You can also use this section to make any additional changes. Once you are ready to proceed, click ‘Submit
-          App’. Our Administration department will then review the details you have submitted. Whilst this review is
-          taking place, this App will be marked as ‘Pending Revision’ and you will not be able to make any further
-          changes.
+          <strong>Currently, your App is only visible to you</strong> and will not be available in the Marketplace until
+          you have made it &lsquo;Listed&rsquo;. When you are ready to do this, click on &lsquo;Edit Detail&rsquo; and
+          tick the &lsquo;Is Listed&rsquo; check box located in the &lsquo;Marketplace Status&rsquo; section.
         </p>
         <br />
-        <p>You can check the status of any submissions by accessing ‘Apps’ from the menu bar.</p>
+        <p>
+          <strong>Please note:</strong> Any changes you make now to your App (included making it &lsquo;Listed&rsquo;)
+          will require approval. These are called &lsquo;Revisions&rsquo;. All revisions will be sent to our Admin
+          department and whilst your App is being reviewed, you will not be able to make any further changes and the App
+          will be marked as &lsquo;Pending Revision&rsquo;.
+        </p>
+        <br />
+        <p>
+          Once you have &lsquo;Listed&rsquo; your application, and any revisions have been approved, your app will be
+          live in the Marketplace and available for install by customers.
+        </p>
         <br />
-        <p>For any help or support, please visit the ‘Help’ page.</p>
+        <p>For any issues or support, please visit the &lsquo;Help&rsquo; page.</p>
 
         <br />
       </CallToAction>

packages/marketplace/src/components/pages/developer-submit-app.tsx

@@ -290,7 +290,12 @@ export const SubmitApp: React.FC<SubmitAppProps> = ({
   const submitRevisionSuccessfully = isSubmitRevision && isSuccessed
 
   if (submitAppSuccessfully) {
-    return <DeveloperSubmitAppSuccessfully onClickHandler={() => submitAppSetFormState('PENDING')} />
+    return (
+      <DeveloperSubmitAppSuccessfully
+        onGoBackToApps={goBackToApps}
+        onSubmitAnotherApp={() => submitAppSetFormState('PENDING')}
+      />
+    )
   }
 
   if (submitRevisionSuccessfully) {

packages/marketplace/src/components/ui/__tests__/__snapshots__/call-to-action.tsx.snap

@@ -28,3 +28,39 @@ exports[`CallToAction should match a snapshot 1`] = `
   </Component>
 </div>
 `;
+
+exports[`CallToAction should match snapshot with footerItems 1`] = `
+<div
+  className=""
+  data-test=""
+>
+  <Component
+    className="mb-0"
+    message="Test"
+    type="success"
+  />
+  <Component
+    flexColumn={true}
+    hasBackground={true}
+    hasPadding={true}
+  >
+    <p />
+    <Component>
+      <Component
+        onClick={[MockFunction]}
+        type="button"
+        variant="primary"
+      >
+        My Apps
+      </Component>
+      <Component
+        onClick={[MockFunction]}
+        type="button"
+        variant="primary"
+      >
+        Submit another app
+      </Component>
+    </Component>
+  </Component>
+</div>
+`;

packages/marketplace/src/components/ui/__tests__/call-to-action.tsx

@@ -13,6 +13,23 @@ describe('CallToAction', () => {
     expect(shallow(<CallToAction {...props} />)).toMatchSnapshot()
   })
 
+  it('should match snapshot with footerItems', () => {
+    const props: CallToActionCardProps = {
+      title: 'Test',
+      footerItems: (
+        <>
+          <Button variant="primary" type="button" onClick={jest.fn()}>
+            My Apps
+          </Button>
+          <Button variant="primary" type="button" onClick={jest.fn()}>
+            Submit another app
+          </Button>
+        </>
+      ),
+    }
+    expect(shallow(<CallToAction {...props} />)).toMatchSnapshot()
+  })
+
   it('should allow custom className', () => {
     const wrapper = shallow(<CallToAction {...props} className="addition" />)
     expect(wrapper.find('.addition')).toHaveLength(1)

packages/marketplace/src/components/ui/call-to-action.tsx

@@ -6,13 +6,14 @@ type CTAType = 'success' | 'danger'
 export interface CallToActionCardProps {
   type?: CTAType
   className?: string
-  buttonText: string
+  buttonText?: string
   title: string
   isCard?: boolean
   isCenter?: boolean
   onButtonClick?: (event: React.MouseEvent<HTMLButtonElement>) => void
   dataTest?: string
   buttonDataTest?: string
+  footerItems?: React.ReactNode
 }
 
 const CallToAction: React.FunctionComponent<CallToActionCardProps> = ({
@@ -24,15 +25,20 @@ const CallToAction: React.FunctionComponent<CallToActionCardProps> = ({
   dataTest = '',
   buttonDataTest = '',
   className = '',
+  footerItems,
 }) => (
   <div className={className} data-test={dataTest}>
     <Alert className="mb-0" type={type} message={title} />
     <FlexContainerBasic hasPadding hasBackground flexColumn>
       <p>{children}</p>
       <LevelRight>
-        <Button dataTest={buttonDataTest} variant="primary" type="button" onClick={onButtonClick as () => void}>
-          {buttonText}
-        </Button>
+        {footerItems ? (
+          footerItems
+        ) : (
+          <Button dataTest={buttonDataTest} variant="primary" type="button" onClick={onButtonClick as () => void}>
+            {buttonText}
+          </Button>
+        )}
       </LevelRight>
     </FlexContainerBasic>
   </div>