[CLD 574] Term and condition when developer submit an app (#227)

* [CLD-574] As a ‘Developer’, when I Submit an App, I want to tick a box to agree to the Terms and Conditions

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

@@ -3,9 +3,20 @@ import { match } from 'react-router'
 import toJson from 'enzyme-to-json'
 import { shallow, mount, render } from 'enzyme'
 import { getMockRouterProps } from '@/utils/mock-helper'
-import { SubmitApp, SubmitAppProps, renderScopesCheckbox, SubmitAppMappedActions } from '../developer-submit-app'
+import {
+  SubmitApp,
+  SubmitAppProps,
+  renderScopesCheckbox,
+  SubmitAppMappedActions,
+  handleSubmitApp,
+  handleClickOpenModal,
+  handleCloseModal,
+  handleAcceptTerms,
+  handleDeclineTerms
+} from '../developer-submit-app'
 import { appDetailDataStub } from '../../../sagas/__stubs__/app-detail'
 import { appCategorieStub } from '../../../sagas/__stubs__/app-categories'
+import { FormikHelpers } from '@reapit/elements'
 
 const submitAppMappedActionsProps: SubmitAppMappedActions = {
   submitApp: jest.fn(),
@@ -377,3 +388,82 @@ describe('renderScopesCheckbox run correctly', () => {
     expect(checkboxes).toHaveLength(0)
   })
 })
+
+describe('handleSubmitApp', () => {
+  const paramsBase = {
+    appId: 'appId',
+    submitApp: jest.fn(),
+    submitRevision: jest.fn(),
+    setSubmitError: jest.fn(),
+    isAgreedTerms: false,
+    setShouldShowError: jest.fn()
+  }
+  const appModel = {}
+  const actions = {} as any
+
+  afterEach(() => jest.clearAllMocks())
+
+  it('should call setShouldShowError when not agree', () => {
+    const params = { ...paramsBase }
+    const spy = jest.spyOn(params, 'setShouldShowError')
+    const fn = handleSubmitApp(params)
+    fn(appModel, actions)
+    expect(spy).toHaveBeenCalledWith(true)
+  })
+
+  it('should call submitApp when dont have appId', () => {
+    const params = { ...paramsBase, appId: null, isAgreedTerms: true }
+    const spy = jest.spyOn(params, 'submitApp')
+    const fn = handleSubmitApp(params)
+    fn(appModel, actions)
+    expect(spy).toHaveBeenCalledTimes(1)
+  })
+  it('should call submitRevision when have appId', () => {
+    const params = { ...paramsBase, appId: 'appid', isAgreedTerms: true }
+    const spy = jest.spyOn(params, 'submitRevision')
+    const fn = handleSubmitApp(params)
+    fn(appModel, actions)
+    expect(spy).toHaveBeenCalledTimes(1)
+  })
+})
+
+describe('handleClickOpenModal', () => {
+  it('should call preventDefault and setTermModalIsOpen', () => {
+    const eventMock = {
+      preventDefault: jest.fn()
+    }
+    const setTermModalIsOpen = jest.fn()
+    const spy = jest.spyOn(eventMock, 'preventDefault')
+    handleClickOpenModal(setTermModalIsOpen)(eventMock)
+    expect(spy).toHaveBeenCalledTimes(1)
+    expect(setTermModalIsOpen).toHaveBeenCalledWith(true)
+  })
+})
+
+describe('handleCloseModal', () => {
+  it('should call setTermModalIsOpen', () => {
+    const setTermModalIsOpen = jest.fn()
+    handleCloseModal(setTermModalIsOpen)()
+    expect(setTermModalIsOpen).toHaveBeenCalledWith(false)
+  })
+})
+
+describe('handleAcceptTerms', () => {
+  it('should call setIsAgreedTerms and setTermModalIsOpen', () => {
+    const setTermModalIsOpen = jest.fn()
+    const setIsAgreedTerms = jest.fn()
+    handleAcceptTerms(setIsAgreedTerms, setTermModalIsOpen)()
+    expect(setIsAgreedTerms).toHaveBeenCalledWith(true)
+    expect(setTermModalIsOpen).toHaveBeenCalledWith(false)
+  })
+})
+
+describe('handleDeclineTerms', () => {
+  it('should call preventDefault and setTermModalIsOpen', () => {
+    const setTermModalIsOpen = jest.fn()
+    const setIsAgreedTerms = jest.fn()
+    handleDeclineTerms(setIsAgreedTerms, setTermModalIsOpen)()
+    expect(setIsAgreedTerms).toHaveBeenCalledWith(false)
+    expect(setTermModalIsOpen).toHaveBeenCalledWith(false)
+  })
+})

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

@@ -40,6 +40,8 @@ import Routes from '@/constants/routes'
 import { submitRevisionSetFormState, submitRevision } from '@/actions/submit-revision'
 import DeveloperSubmitAppSuccessfully from './developer-submit-app-successfully'
 import { selectCategories } from '../../selector/app-categories'
+import styles from '@/styles/pages/developer-submit-app.scss?mod'
+import { TermsAndConditionsModal } from '../ui/terms-and-conditions-modal'
 
 export interface SubmitAppMappedActions {
   submitApp: (
@@ -145,17 +147,42 @@ export const generateInitialValues = (appDetail: AppDetailModel | null, develope
   return initialValues
 }
 
-export const handleSubmitApp = ({ appId, submitApp, submitRevision, setSubmitError }) => (
-  appModel: CreateAppModel,
-  actions: FormikHelpers<CreateAppModel>
-) => {
+export const handleSubmitApp = ({
+  appId,
+  submitApp,
+  submitRevision,
+  setSubmitError,
+  isAgreedTerms,
+  setShouldShowError
+}) => (appModel: CreateAppModel, actions: FormikHelpers<CreateAppModel>) => {
+  if (!isAgreedTerms) {
+    setShouldShowError(true)
+    return
+  }
   if (!appId) {
     submitApp(appModel, actions, setSubmitError)
   } else {
     submitRevision(appId, appModel)
   }
 }
 
+export const handleClickOpenModal = setTermModalIsOpen => event => {
+  event.preventDefault()
+  setTermModalIsOpen(true)
+}
+export const handleCloseModal = setTermModalIsOpen => () => {
+  setTermModalIsOpen(false)
+}
+
+export const handleAcceptTerms = (setIsAgreedTerms, setTermModalIsOpen) => () => {
+  setIsAgreedTerms(true)
+  setTermModalIsOpen(false)
+}
+export const handleDeclineTerms = (setIsAgreedTerms, setTermModalIsOpen) => () => {
+  setIsAgreedTerms(false)
+  setTermModalIsOpen(false)
+}
+
 export const SubmitApp: React.FC<SubmitAppProps> = ({
   submitAppSetFormState,
   submitApp,
@@ -172,6 +199,12 @@ export const SubmitApp: React.FC<SubmitAppProps> = ({
   let initialValues
   let formState
   let appId
+  /* terms state */
+  const [termModalIsOpen, setTermModalIsOpen] = React.useState<boolean>(false)
+  const [isAgreedTerms, setIsAgreedTerms] = React.useState<boolean>(false)
+  const [shouldShowError, setShouldShowError] = React.useState<boolean>(false)
+  /* toggle checked input */
+  const handleOnChangeAgree = setIsAgreedTerms.bind(null, prev => !prev)
 
   const [submitError, setSubmitError] = React.useState<string>()
 
@@ -243,7 +276,14 @@ export const SubmitApp: React.FC<SubmitAppProps> = ({
         <Formik
           validate={validate}
           initialValues={initialValues}
-          onSubmit={handleSubmitApp({ appId, submitApp, submitRevision, setSubmitError })}
+          onSubmit={handleSubmitApp({
+            appId,
+            submitApp,
+            submitRevision,
+            setSubmitError,
+            isAgreedTerms,
+            setShouldShowError
+          })}
         >
           {({ setFieldValue, values }) => {
             return (
@@ -456,17 +496,59 @@ export const SubmitApp: React.FC<SubmitAppProps> = ({
                 <FormSection>
                   <LevelRight>
                     {submitError && <H6 className="has-text-danger mr-5">{submitError}</H6>}
-                    <Button
-                      type="submit"
-                      dataTest="submit-app-button"
-                      variant="primary"
-                      loading={Boolean(isSubmitting)}
-                      disabled={Boolean(isSubmitting)}
-                    >
-                      Submit App
-                    </Button>
+                    <Grid>
+                      <GridItem>
+                        <FlexContainerBasic
+                          className={`${styles['terms-submit-app']}`}
+                          centerContent={false}
+                          hasPadding={false}
+                        >
+                          <div className="field field-checkbox">
+                            <input
+                              type="checkbox"
+                              checked={isAgreedTerms}
+                              onChange={handleOnChangeAgree}
+                              className="checkbox"
+                              id="terms-submit-app"
+                              name="terms-submit-app"
+                            />
+                            <label htmlFor="terms-submit-app" className={`pb-4 mb-4 ${styles['label-terms']}`}>
+                              I AGREE TO THE{' '}
+                              <span className={styles['terms-link']} onClick={handleClickOpenModal(setTermModalIsOpen)}>
+                                'TERMS AND CONDITIONS'
+                              </span>
+                            </label>
+                          </div>
+                        </FlexContainerBasic>
+                        <TermsAndConditionsModal
+                          visible={termModalIsOpen}
+                          onAccept={handleAcceptTerms(setIsAgreedTerms, setTermModalIsOpen)}
+                          onDecline={handleDeclineTerms(setIsAgreedTerms, setTermModalIsOpen)}
+                          afterClose={handleCloseModal(setTermModalIsOpen)}
+                        />
+                      </GridItem>
+
+                      <GridItem>
+                        <Button
+                          type="submit"
+                          dataTest="submit-app-button"
+                          variant="primary"
+                          loading={Boolean(isSubmitting)}
+                          disabled={Boolean(isSubmitting)}
+                        >
+                          Submit App
+                        </Button>
+                      </GridItem>
+                    </Grid>
                   </LevelRight>
                 </FormSection>
+
+                {shouldShowError && (
+                  <Alert
+                    message="Please indicate that you have read and agree to the terms and conditions"
+                    type="danger"
+                  />
+                )}
                 <Input
                   dataTest="submit-app-developer-id"
                   type="hidden"

src/components/ui/__tests__/__snapshots__/terms-and-conditions-modal.tsx.snap

@@ -23,6 +23,14 @@ exports[`Menu should match a snapshot 1`] = `
   title="Terms and Conditions"
   visible={true}
 >
-  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laboriosam porro, id quidem maxime nesciunt facere voluptatem at provident. Iste fugit ut nesciunt minima? Non rem ut quod deserunt quibusdam, illo quos beatae perspiciatis, voluptate quas eligendi vel, autem similique. Autem illo rerum doloribus, quia eius corrupti sapiente aliquid ea pariatur enim? Earum itaque mollitia impedit commodi cum, ratione, suscipit sunt similique asperiores illo ducimus iusto in, eum eos dolor corrupti. Ad assumenda temporibus ullam reiciendis autem recusandae harum quod, non iste, eligendi nihil? Unde quasi quaerat eveniet illo consectetur asperiores nostrum alias nobis ratione! Dolorum repellendus aut iure blanditiis nostrum.
+  
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laboriosam porro, id quidem maxime nesciunt facere
+      voluptatem at provident. Iste fugit ut nesciunt minima? Non rem ut quod deserunt quibusdam, illo quos beatae
+      perspiciatis, voluptate quas eligendi vel, autem similique. Autem illo rerum doloribus, quia eius corrupti
+      sapiente aliquid ea pariatur enim? Earum itaque mollitia impedit commodi cum, ratione, suscipit sunt similique
+      asperiores illo ducimus iusto in, eum eos dolor corrupti. Ad assumenda temporibus ullam reiciendis autem
+      recusandae harum quod, non iste, eligendi nihil? Unde quasi quaerat eveniet illo consectetur asperiores nostrum
+      alias nobis ratione! Dolorum repellendus aut iure blanditiis nostrum.
+
 </Modal>
 `;

src/components/ui/terms-and-conditions-modal.tsx

@@ -4,13 +4,25 @@ import { Button, Modal, ModalProps } from '@reapit/elements'
 export type TermsAndConditionsModalProps = {
   onAccept: () => void
   onDecline: () => void
+  text?: string
 } & Pick<ModalProps, 'visible' | 'afterClose'>
 
+const placeholderText = `
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laboriosam porro, id quidem maxime nesciunt facere
+      voluptatem at provident. Iste fugit ut nesciunt minima? Non rem ut quod deserunt quibusdam, illo quos beatae
+      perspiciatis, voluptate quas eligendi vel, autem similique. Autem illo rerum doloribus, quia eius corrupti
+      sapiente aliquid ea pariatur enim? Earum itaque mollitia impedit commodi cum, ratione, suscipit sunt similique
+      asperiores illo ducimus iusto in, eum eos dolor corrupti. Ad assumenda temporibus ullam reiciendis autem
+      recusandae harum quod, non iste, eligendi nihil? Unde quasi quaerat eveniet illo consectetur asperiores nostrum
+      alias nobis ratione! Dolorum repellendus aut iure blanditiis nostrum.
+`
+
 export const TermsAndConditionsModal: React.FunctionComponent<TermsAndConditionsModalProps> = ({
   visible,
   afterClose,
   onAccept,
-  onDecline
+  onDecline,
+  text = placeholderText
 }) => {
   return (
     <Modal
@@ -28,13 +40,7 @@ export const TermsAndConditionsModal: React.FunctionComponent<TermsAndConditions
         </>
       }
     >
-      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laboriosam porro, id quidem maxime nesciunt facere
-      voluptatem at provident. Iste fugit ut nesciunt minima? Non rem ut quod deserunt quibusdam, illo quos beatae
-      perspiciatis, voluptate quas eligendi vel, autem similique. Autem illo rerum doloribus, quia eius corrupti
-      sapiente aliquid ea pariatur enim? Earum itaque mollitia impedit commodi cum, ratione, suscipit sunt similique
-      asperiores illo ducimus iusto in, eum eos dolor corrupti. Ad assumenda temporibus ullam reiciendis autem
-      recusandae harum quod, non iste, eligendi nihil? Unde quasi quaerat eveniet illo consectetur asperiores nostrum
-      alias nobis ratione! Dolorum repellendus aut iure blanditiis nostrum.
+      {text}
     </Modal>
   )
 }

src/styles/pages/developer-submit-app.scss

@@ -0,0 +1,13 @@
+.terms-submit-app {
+  height: 100%;
+  width: 100%;
+  align-items: center;
+  white-space: nowrap;
+  font-weight: bold;
+}
+.label-terms {
+  cursor: pointer;
+}
+.terms-link {
+  text-decoration: underline;
+}