[CLD-670] Developer welcome message (#247)

* [CLD-670] Developer welcome message

* [CLD-670] Add help icon menu

* [CLD-670] Upgrade elements

* [CLD-670] Add google form

* Fix comments

package.json

@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@reapit/cognito-auth": "^2.0.5",
-    "@reapit/elements": "^0.5.24",
+    "@reapit/elements": "^0.5.26",
     "dayjs": "^1.8.17",
     "diff": "^4.0.1",
     "gitter-sidecar": "^1.5.0",

src/components/pages/__tests__/__snapshots__/developer-welcome.tsx.snap

@@ -0,0 +1,68 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DeveloperWelcomeMessage should match a snapshot when LOADING false 1`] = `
+<FlexContainerBasic
+  flexColumn={true}
+  hasPadding={true}
+>
+  <Content>
+    <FlexContainerResponsive
+      flexColumn={true}
+      hasBackground={true}
+      hasPadding={true}
+    >
+      <HelpGuide>
+        <Component
+          component={[Function]}
+          graphic={
+            <img
+              src="https://1001freedownloads.s3.amazonaws.com/vector/thumb/63319/Placeholder.png"
+              style={
+                Object {
+                  "height": "auto",
+                  "maxWidth": "100%",
+                }
+              }
+            />
+          }
+          heading="Heading-1"
+          id="step-1"
+          key="step-1"
+          subHeading="SubHeading-1"
+        />
+        <Component
+          component={[Function]}
+          heading="Heading-2"
+          id="step-2"
+          subHeading="SubHeading-2"
+        />
+        <Component
+          component={[Function]}
+          heading="Heading-3"
+          id="step-3"
+          subHeading="SubHeading-3"
+        />
+        <Component
+          component={[Function]}
+          heading="Heading-4"
+          id="step-4"
+          subHeading="SubHeading-4"
+        />
+        <Component
+          component={[Function]}
+          heading="Heading-5"
+          id="step-5"
+          subHeading="SubHeading-5"
+        />
+      </HelpGuide>
+      <Button
+        onClick={[Function]}
+        type="button"
+        variant="primary"
+      >
+        Accept
+      </Button>
+    </FlexContainerResponsive>
+  </Content>
+</FlexContainerBasic>
+`;

src/components/pages/__tests__/__snapshots__/help.tsx.snap

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`HelpPage should match a snapshot 1`] = `
+<FlexContainerBasic
+  flexColumn={true}
+  hasPadding={true}
+>
+  <Content>
+    <FlexContainerResponsive
+      flexColumn={true}
+      hasBackground={true}
+      hasPadding={true}
+    >
+      <H3>
+        Help
+      </H3>
+      <Grid>
+        <GridItem>
+          <Button
+            data-testid="btnReportBug"
+            onClick={[Function]}
+            type="button"
+            variant="primary"
+          >
+            Report Bug
+          </Button>
+          <Button
+            data-testid="btnRequestEndPoint"
+            onClick={[Function]}
+            type="button"
+            variant="primary"
+          >
+            Request Endpoint
+          </Button>
+          <Button
+            data-testid="btnGotoWelcomeGuide"
+            onClick={[Function]}
+            type="button"
+            variant="primary"
+          >
+            Welcome Guide
+          </Button>
+        </GridItem>
+      </Grid>
+    </FlexContainerResponsive>
+  </Content>
+</FlexContainerBasic>
+`;

src/components/pages/__tests__/developer-welcome.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react'
+import { shallow } from 'enzyme'
+import { DeveloperWelcomeMessage, DeveloperWelcomeMessageProps, handleUserAccept } from '../developer-welcome'
+import routes from '@/constants/routes'
+
+const mockProps: DeveloperWelcomeMessageProps = {}
+
+describe('DeveloperWelcomeMessage', () => {
+  it('should match a snapshot when LOADING false', () => {
+    expect(shallow(<DeveloperWelcomeMessage {...mockProps} />)).toMatchSnapshot()
+  })
+
+  describe('handleUserAccept', () => {
+    it('should call dispatch', () => {
+      const mockHistory = {
+        push: jest.fn()
+      }
+      const fn = handleUserAccept(mockHistory)
+      fn()
+      expect(mockHistory.push).toBeCalledWith(routes.DEVELOPER_MY_APPS)
+    })
+  })
+})

src/components/pages/__tests__/help.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react'
+import { shallow, mount } from 'enzyme'
+import { HelpPage, HelpPageProps } from '../help'
+import routes from '@/constants/routes'
+import { history } from '@/core/router'
+
+const mockProps: HelpPageProps = {}
+
+describe('HelpPage', () => {
+  const { open } = window
+
+  beforeAll(() => {
+    delete window.open
+    window.open = jest.fn()
+  })
+
+  afterAll(() => {
+    window.open = open
+  })
+
+  it('should match a snapshot', () => {
+    expect(shallow(<HelpPage {...mockProps} />)).toMatchSnapshot()
+  })
+
+  it('handleReportBug', () => {
+    const wrapper = mount(<HelpPage {...mockProps} />)
+    const btnReportBug = wrapper.find('[data-testid="btnReportBug"]')
+    btnReportBug.props().onClick!({} as any)
+    expect(window.open).toBeCalled()
+  })
+
+  it('handleRequestEndpoint', () => {
+    const wrapper = mount(<HelpPage {...mockProps} />)
+    const btnRequestEndPoint = wrapper.find('[data-testid="btnRequestEndPoint"]')
+    btnRequestEndPoint.props().onClick!({} as any)
+    expect(window.open).toBeCalled()
+  })
+
+  it('handleGotoWelcomeGuide', () => {
+    const wrapper = mount(<HelpPage {...mockProps} />)
+    const btnGotoWelcomeGuide = wrapper.find('[data-testid="btnGotoWelcomeGuide"]')
+    jest.spyOn(history, 'push')
+    btnGotoWelcomeGuide.props().onClick!({} as any)
+    expect(history.push).toBeCalledWith(routes.DEVELOPER_WELCOME)
+  })
+})

src/components/pages/developer-welcome.tsx

@@ -0,0 +1,106 @@
+import * as React from 'react'
+import {
+  FlexContainerBasic,
+  Content,
+  FlexContainerResponsive,
+  useHelpGuideContext,
+  HelpGuide,
+  Button
+} from '@reapit/elements'
+import Routes from '@/constants/routes'
+import { history } from '@/core/router'
+import styles from '@/styles/pages/developer-welcome.scss?mod'
+
+export type DeveloperWelcomeMessageProps = {}
+
+const imageUrl = 'https://1001freedownloads.s3.amazonaws.com/vector/thumb/63319/Placeholder.png'
+
+const ComponentA = () => {
+  const context = useHelpGuideContext()
+  return (
+    <div>
+      <p className="mb-5">
+        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt ipsa minima hic rerum. Aspernatur laborum eum
+        vel necessitatibus dolorum alias. Sunt necessitatibus nisi repellat perspiciatis quam, iusto, fugit expedita
+        cupiditate quisquam totam voluptates? Facilis laudantium dolores tempora aspernatur natus minus, soluta aliquam?
+        Similique mollitia, placeat architecto eum dolores quam, omnis quidem iste vero tempora ipsum repellendus
+        voluptas, aliquam rerum molestias iure quasi totam assumenda quo veritatis. Corporis debitis, veniam sit earum
+        vero id impedit odio totam itaque numquam omnis non repellat fugiat nostrum nam minima modi, dignissimos ut
+        quibusdam praesentium sunt in beatae at nemo! Inventore blanditiis expedita pariatur amet laboriosam culpa,
+        nihil sed rerum natus et recusandae hic est error ab accusantium impedit earum vero quae. Alias quae
+      </p>
+      <Button type="button" variant="primary" onClick={context.goNext}>
+        Next
+      </Button>
+    </div>
+  )
+}
+
+const ComponentB = () => {
+  const context = useHelpGuideContext()
+
+  return (
+    <div>
+      <p className="mb-5">
+        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo expedita consequatur molestias! Magnam in
+        inventore, sunt fuga minus nihil pariatur facilis nobis modi debitis aspernatur perspiciatis quo officiis sit
+        laudantium!
+      </p>
+      <Button type="button" variant="primary" onClick={context.goPrev}>
+        Prev
+      </Button>
+      <Button type="button" variant="primary" onClick={context.goNext}>
+        Next
+      </Button>
+    </div>
+  )
+}
+
+const ComponentC = () => {
+  const context = useHelpGuideContext()
+
+  return (
+    <div>
+      <p className="mb-5">
+        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo expedita consequatur molestias! Magnam in
+        inventore, sunt fuga minus nihil pariatur facilis nobis modi debitis aspernatur perspiciatis quo officiis sit
+        laudantium!
+      </p>
+      <Button type="button" variant="primary" onClick={context.goPrev}>
+        Prev
+      </Button>
+    </div>
+  )
+}
+
+export const handleUserAccept = history => () => history.push(Routes.DEVELOPER_MY_APPS)
+
+export const DeveloperWelcomeMessage: React.FC<DeveloperWelcomeMessageProps> = () => {
+  return (
+    <FlexContainerBasic flexColumn hasPadding>
+      <Content>
+        <FlexContainerResponsive className={styles.content} flexColumn hasBackground hasPadding>
+          <HelpGuide>
+            <HelpGuide.Step
+              key="step-1"
+              id="step-1"
+              component={ComponentA}
+              heading="Heading-1"
+              subHeading="SubHeading-1"
+              graphic={<img style={{ maxWidth: '100%', height: 'auto' }} src={imageUrl} />}
+            />
+            <HelpGuide.Step id="step-2" component={ComponentB} heading="Heading-2" subHeading="SubHeading-2" />
+            <HelpGuide.Step id="step-3" component={ComponentB} heading="Heading-3" subHeading="SubHeading-3" />
+            <HelpGuide.Step id="step-4" component={ComponentB} heading="Heading-4" subHeading="SubHeading-4" />
+            <HelpGuide.Step id="step-5" component={ComponentC} heading="Heading-5" subHeading="SubHeading-5" />
+          </HelpGuide>
+          <Button variant="primary" type="button" onClick={handleUserAccept(history)}>
+            Accept
+          </Button>
+        </FlexContainerResponsive>
+      </Content>
+    </FlexContainerBasic>
+  )
+}
+
+export default DeveloperWelcomeMessage

src/components/pages/help.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react'
+import { history } from '@/core/router'
+import { Button, FlexContainerResponsive, Content, H3, FlexContainerBasic, GridItem, Grid } from '@reapit/elements'
+import Routes from '@/constants/routes'
+import { GoogleForm } from '@/constants/google-form'
+
+export type HelpPageProps = {}
+
+export const HelpPage: React.FC<HelpPageProps> = () => {
+  const handleReportBug = () => {
+    window.open(GoogleForm.BUG_REPORT, '_blank')
+  }
+
+  const handleRequestEndpoint = () => {
+    window.open(GoogleForm.API_REQUEST, '_blank')
+  }
+
+  const handleGotoWelcomeGuide = () => {
+    history.push(Routes.DEVELOPER_WELCOME)
+  }
+
+  return (
+    <FlexContainerBasic flexColumn hasPadding>
+      <Content>
+        <FlexContainerResponsive flexColumn hasBackground hasPadding>
+          <H3>Help</H3>
+          <Grid>
+            <GridItem>
+              <Button variant="primary" type="button" onClick={handleReportBug} data-testid="btnReportBug">
+                Report Bug
+              </Button>
+              <Button variant="primary" type="button" onClick={handleRequestEndpoint} data-testid="btnRequestEndPoint">
+                Request Endpoint
+              </Button>
+              <Button
+                variant="primary"
+                type="button"
+                onClick={handleGotoWelcomeGuide}
+                data-testid="btnGotoWelcomeGuide"
+              >
+                Welcome Guide
+              </Button>
+            </GridItem>
+          </Grid>
+        </FlexContainerResponsive>
+      </Content>
+    </FlexContainerBasic>
+  )
+}
+
+export default HelpPage

src/components/pages/login.tsx

@@ -12,6 +12,7 @@ import loginStyles from '@/styles/pages/login.scss?mod'
 import { withRouter, RouteComponentProps } from 'react-router'
 import logoImage from '@/assets/images/reapit-graphic.jpg'
 import { getLoginTypeByPath } from '@/utils/auth-route'
+import { getCookieString, COOKIE_FIRST_TIME_LOGIN } from '@/utils/cookie'
 
 export interface LoginMappedActions {
   login: (params: LoginParams) => void
@@ -73,17 +74,14 @@ export const Login: React.FunctionComponent<LoginProps> = (props: LoginProps) =>
   authChangeLoginType(currentLoginType)
 
   if (hasSession) {
-    return (
-      <Redirect
-        to={
-          loginType === 'DEVELOPER'
-            ? Routes.DEVELOPER_MY_APPS
-            : loginType === 'CLIENT'
-            ? Routes.CLIENT
-            : Routes.ADMIN_APPROVALS
-        }
-      />
-    )
+    const firstLoginCookie = getCookieString(COOKIE_FIRST_TIME_LOGIN)
+    if (loginType === 'DEVELOPER' && !firstLoginCookie) {
+      return <Redirect to={Routes.DEVELOPER_WELCOME} />
+    }
+    if (loginType === 'DEVELOPER' && firstLoginCookie) {
+      return <Redirect to={Routes.DEVELOPER_MY_APPS} />
+    }
+    return <Redirect to={loginType === 'CLIENT' ? Routes.CLIENT : Routes.ADMIN_APPROVALS} />
   }
 
   const queryParams = new URLSearchParams(props.location.search)