[CLD-518] Show messages when developer has reached too many unlisted …

…apps (#191)

src/actions/submit-app.ts

@@ -5,7 +5,9 @@ import { CreateAppModel, ScopeModel } from '@/types/marketplace-api-schema'
 import { FormState } from '@/types/core'
 
 export type SubmitAppFormikActions = FormikHelpers<CreateAppModel>
-export type SubmitAppArgs = CreateAppModel & { actions: SubmitAppFormikActions }
+export type SubmitAppArgs = CreateAppModel & { actions: SubmitAppFormikActions } & {
+  setSubmitError: (error: string) => void
+}
 
 export const submitApp = actionCreator<SubmitAppArgs>(ActionTypes.DEVELOPER_SUBMIT_APP)
 export const submitAppSetFormState = actionCreator<FormState>(ActionTypes.DEVELOPER_SUBMIT_APP_SET_FORM_STATE)

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

@@ -23,7 +23,9 @@ import {
   SelectBoxOptions,
   Formik,
   Form,
-  FormikHelpers
+  FormikHelpers,
+  H6,
+  FormikValues
 } from '@reapit/elements'
 
 import { validate } from '@/utils/form/submit-app'
@@ -39,7 +41,11 @@ import DeveloperSubmitAppSuccessfully from './developer-submit-app-successfully'
 import { selectCategories } from '../../selector/app-categories'
 
 export interface SubmitAppMappedActions {
-  submitApp: (appModel: CreateAppModel, actions: SubmitAppFormikActions) => void
+  submitApp: (
+    appModel: CreateAppModel,
+    actions: SubmitAppFormikActions,
+    setSubmitError: (error: string) => void
+  ) => void
   submitAppSetFormState: (formState: FormState) => void
   submitRevision: (id: string, revision: CreateAppModel) => void
   submitRevisionSetFormState: (formState: FormState) => void
@@ -134,6 +140,17 @@ export const generateInitialValues = (appDetail: AppDetailModel | null, develope
   return initialValues
 }
 
+export const handleSubmitApp = ({ appId, submitApp, submitRevision, setSubmitError }) => (
+  appModel: CreateAppModel,
+  actions: FormikHelpers<CreateAppModel>
+) => {
+  if (!appId) {
+    submitApp(appModel, actions, setSubmitError)
+  } else {
+    submitRevision(appId, appModel)
+  }
+}
+
 export const SubmitApp: React.FC<SubmitAppProps> = ({
   submitAppSetFormState,
   submitApp,
@@ -149,7 +166,9 @@ export const SubmitApp: React.FC<SubmitAppProps> = ({
 }) => {
   let initialValues
   let formState
-  let appid
+  let appId
+
+  const [submitError, setSubmitError] = React.useState<string>()
 
   const isSubmitRevision = Boolean(match.params && match.params.appid)
   const isSubmitApp = !isSubmitRevision
@@ -181,7 +200,7 @@ export const SubmitApp: React.FC<SubmitAppProps> = ({
       return null
     }
 
-    appid = appDetailData.data.id
+    appId = appDetailData.data.id
     initialValues = generateInitialValues(appDetailData.data, developerId)
   }
 
@@ -219,13 +238,7 @@ export const SubmitApp: React.FC<SubmitAppProps> = ({
         <Formik
           validate={validate}
           initialValues={initialValues}
-          onSubmit={(appModel: CreateAppModel, actions: FormikHelpers<CreateAppModel>) => {
-            if (!appid) {
-              submitApp(appModel, actions)
-            } else {
-              submitRevision(appid, appModel)
-            }
-          }}
+          onSubmit={handleSubmitApp({ appId, submitApp, submitRevision, setSubmitError })}
         >
           {() => {
             return (
@@ -412,6 +425,7 @@ export const SubmitApp: React.FC<SubmitAppProps> = ({
                 </FormSection>
                 <FormSection>
                   <LevelRight>
+                    {submitError && <H6 className="has-text-danger mr-5">{submitError}</H6>}
                     <Button
                       type="submit"
                       dataTest="submit-app-button"
@@ -448,8 +462,8 @@ const mapStateToProps = (state: ReduxState): SubmitAppMappedProps => ({
 })
 
 const mapDispatchToProps = (dispatch: any): SubmitAppMappedActions => ({
-  submitApp: (appModel: CreateAppModel, actions: SubmitAppFormikActions) => {
-    dispatch(submitApp({ ...appModel, actions }))
+  submitApp: (appModel: CreateAppModel, actions: SubmitAppFormikActions, setSubmitError: (error: string) => void) => {
+    dispatch(submitApp({ ...appModel, actions, setSubmitError }))
   },
   submitRevision: (id, revision) => {
     dispatch(submitRevision({ ...revision, id }))

src/constants/error-messages.ts

@@ -7,7 +7,11 @@ const errorMessages = {
   MINIMUM_CHARACTER_LENGTH: (min: number) => `The minimum length is ${min} characters`,
   MAXIMUM_CHARACTER_LENGTH: (max: number) => `The maximum length is ${max} characters`,
   FIELD_INVALID_PASSWORD:
-    'Your Password should be a minimum of 8 characters; must contain at least one lowercase letter, one uppercase letter and one number.'
+    'Your Password should be a minimum of 8 characters; must contain at least one lowercase letter, one uppercase letter and one number.',
+  SERVER_LIMIT_UNLISTED_APPS:
+    'Unable to register client app: Limit of unlisted apps against this account has been reached',
+  CLIENT_LIMIT_UNLISTED_APPS:
+    'We are unable to process this submission. You currently have reached your limit of unlisted apps. Please edit your existing apps to continue.'
 }
 
 export default errorMessages

src/sagas/submit-app.ts

@@ -36,7 +36,7 @@ export const imageUploaderHelper = async (object: ImageUploaderReq) => {
 }
 
 export const submitApp = function*({ data }: Action<SubmitAppArgs>) {
-  const { actions, ...values } = data
+  const { actions, setSubmitError, ...values } = data
   actions.setStatus(undefined)
 
   yield put(submitAppSetFormState('SUBMITTING'))
@@ -75,11 +75,16 @@ export const submitApp = function*({ data }: Action<SubmitAppArgs>) {
     console.error(err)
 
     if (err instanceof FetchError) {
-      const response = err.response as unknown
+      const response = err.response as any
       const formErrors = getApiErrorsFromResponse(response as ApiFormErrorsResponse)
+
       if (formErrors) {
         actions.setErrors(formErrors)
       }
+
+      if (response.description === errorMessages.SERVER_LIMIT_UNLISTED_APPS) {
+        setSubmitError(errorMessages.CLIENT_LIMIT_UNLISTED_APPS)
+      }
     }
 
     yield put(submitAppSetFormState('ERROR'))