Merge pull request #806 from jembi/ocrvs-1537-review-sub-page

euanmillar · web-flow · commit d00fd6d30549 · 2019-05-23T12:00:59.000+01:00
Sub page implementation for field agent queue
diff --git a/packages/components/src/components/buttons/CountAction.tsx b/packages/components/src/components/buttons/CountAction.tsx
@@ -43,7 +43,6 @@ const StyledStatus = styled.div`
   & span {
     text-transform: uppercase;
     margin-left: 5px;
-    font-size: 13px;
     color: ${({ theme }) => theme.colors.primary};
   }
 `
diff --git a/packages/components/src/components/forms/ImageUploader.tsx b/packages/components/src/components/forms/ImageUploader.tsx
@@ -10,7 +10,6 @@ const ImageBase = styled(PrimaryButton.withComponent('label'))`
   align-items: center;
   display: inline-flex;
   border: 0;
-  font-size: inherit;
   justify-content: space-between;
   cursor: pointer;
 `
diff --git a/packages/components/src/components/forms/TextArea.tsx b/packages/components/src/components/forms/TextArea.tsx
@@ -6,6 +6,7 @@ interface ITextAreaProps {
 }
 
 const StyledTextArea = styled.textarea<ITextAreaProps>`
+  ${({ theme }) => theme.fonts.bodyBoldStyle};
   width: 100%;
   padding: 10px;
   min-height: 80px;
@@ -15,7 +16,6 @@ const StyledTextArea = styled.textarea<ITextAreaProps>`
     outline: 0;
   }
   background-color: ${({ theme }) => theme.colors.background};
-  font-size: 16px;
   color: ${({ theme }) => theme.colors.secondary};
 
   &::-webkit-input-placeholder {
diff --git a/packages/components/src/components/icons/BackArrow.tsx b/packages/components/src/components/icons/BackArrow.tsx
@@ -12,16 +12,16 @@ export const BackArrow = (props: React.HTMLAttributes<SVGElement>) => (
     <path
       d="M20 12H4"
       stroke="#4C68C1"
-      stroke-width={2}
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
     />
     <path
       d="M10 18L4 12L10 6"
       stroke="#4C68C1"
-      stroke-width={2}
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
     />
   </svg>
 )
diff --git a/packages/components/src/components/icons/StatusFailed.md b/packages/components/src/components/icons/StatusFailed.md
@@ -0,0 +1,3 @@
+```js
+<StatusFailed />
+```
diff --git a/packages/components/src/components/icons/StatusFailed.tsx b/packages/components/src/components/icons/StatusFailed.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react'
+
+export const StatusFailed = (props: React.HTMLAttributes<SVGElement>) => (
+  <svg
+    width={18}
+    height={18}
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <circle cx="9" cy="9" r="8" stroke="#D53F3F" strokeWidth="2" />
+  </svg>
+)
diff --git a/packages/components/src/components/icons/StatusProgress.tsx b/packages/components/src/components/icons/StatusProgress.tsx
@@ -1,10 +1,22 @@
 import * as React from 'react'
 
 export const StatusProgress = (props: React.HTMLAttributes<SVGElement>) => (
-  <svg width={18} height={18} fill="none" {...props}>
-    <g opacity={0.5} fill="#8049B7">
-      <path d="M9 18A9 9 0 1 0 9 0a9 9 0 0 0 0 18z" fillOpacity={0.5} />
-      <path d="M9 13.5a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9z" />
-    </g>
+  <svg
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z"
+      fill="#8049B7"
+      fillOpacity="0.5"
+    />
+    <path
+      d="M12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z"
+      fill="#8049B7"
+    />
   </svg>
 )
diff --git a/packages/components/src/components/icons/index.ts b/packages/components/src/components/icons/index.ts
@@ -76,4 +76,5 @@ export * from './HelpBlack'
 export * from './HelpBlue'
 export * from './AvatarSmall'
 export * from './BackArrow'
+export * from './StatusFailed'
 export * from './PlusTransparentWhite'
diff --git a/packages/components/src/components/interface/Chip.tsx b/packages/components/src/components/interface/Chip.tsx
@@ -19,9 +19,6 @@ const StyledStatus = styled.span`
     color: ${({ theme }) => theme.colors.placeholder};
     text-transform: uppercase;
     margin-left: 5px;
-    font-size: 14px;
-    font-weight: bold;
-    letter-spacing: 0.58px;
   }
 `
 
diff --git a/packages/components/src/components/interface/DataTable/SortAndFilter.tsx b/packages/components/src/components/interface/DataTable/SortAndFilter.tsx
@@ -18,7 +18,6 @@ const Wrapper = styled.div`
 const LabelText = styled.div`
   color: ${({ theme }) => theme.colors.placeholder};
   ${({ theme }) => theme.fonts.bodyStyle};
-  font-weight: 500;
 `
 const ComponentWrapper = styled.span`
   flex-direction: column;
diff --git a/packages/components/src/components/interface/Notification.tsx b/packages/components/src/components/interface/Notification.tsx
@@ -61,12 +61,12 @@ const NotificationContainer = styledNotification`
 `
 
 const NotificationMessage = styled.div`
+  ${({ theme }) => theme.fonts.bodyBoldStyle};
   background: ${({ theme }) => theme.colors.placeholder};
   border-radius: 21px;
   padding: 5px 10px;
   margin: 5px;
   color: ${({ theme }) => theme.colors.white};
-  font-weight: bold;
 `
 
 export class Notification extends React.Component<IProps> {
diff --git a/packages/components/src/components/interface/SubPage.tsx b/packages/components/src/components/interface/SubPage.tsx
@@ -6,10 +6,13 @@ import { Box } from './Box'
 
 const SubPageContainer = styled.div`
   width: 100%;
-`
-const HeaderContainer = styled.div`
+  height: 100vh;
+  ${({ theme }) => theme.fonts.bodyStyle};
   background: ${({ theme }) => theme.colors.white};
   color: ${({ theme }) => theme.colors.copy};
+`
+
+const HeaderBlock = styled.div`
   box-shadow: 0px 2px 6px rgba(53, 67, 93, 0.32);
   height: 64px;
   max-width: 940px;
@@ -30,31 +33,40 @@ const BackButton = styled(Button)`
 `
 const MenuTitle = styled.span`
   ${({ theme }) => theme.fonts.bigBodyBoldStyle};
-  margin-left: 35px;
+  margin-left: 30px;
+`
+const EmptyTitle = styled(MenuTitle)`
+  color: ${({ theme }) => theme.colors.error};
 `
 const BodyContainer = styled(Box)`
+  max-width: 940px;
+  height: inherit;
+  margin: auto;
   padding: 30px 0px 30px 65px;
 `
 interface IProps {
-  title: string
+  title?: string
+  emptyTitle: string
   goBack: () => void
 }
 
 export class SubPage extends React.Component<IProps> {
   render() {
-    const { title, goBack } = this.props
+    const { title, emptyTitle, goBack } = this.props
 
     return (
       <SubPageContainer>
-        <HeaderContainer>
+        <HeaderBlock>
           <BackButton
             id="sub_page_back_button"
             onClick={goBack}
             icon={() => <BackArrow />}
           />
-          <MenuTitle>{title}</MenuTitle>
-        </HeaderContainer>
-        <BodyContainer>{this.props.children}</BodyContainer>
+          {(title && <MenuTitle>{title}</MenuTitle>) || (
+            <EmptyTitle>{emptyTitle}</EmptyTitle>
+          )}
+        </HeaderBlock>
+        <BodyContainer>{this.props.children}</BodyContainer>π{' '}
       </SubPageContainer>
     )
   }
diff --git a/packages/performance/src/components/TopMenu.tsx b/packages/performance/src/components/TopMenu.tsx
@@ -90,10 +90,8 @@ const BackButton = styled(PrimaryButton)`
 `
 
 const BackButtonText = styled.span`
-  font-weight: bold;
+  ${({ theme }) => theme.fonts.bodyBoldStyle};
   text-transform: uppercase;
-  font-size: 14px;
-  letter-spacing: 2px;
   margin-left: 14px;
 `
 
diff --git a/packages/register/src/App.tsx b/packages/register/src/App.tsx
@@ -26,6 +26,7 @@ import { SessionExpireConfirmation } from './components/SessionExpireConfirmatio
 import { ConfirmationScreen } from './views/ConfirmationScreen/ConfirmationScreen'
 import { PrintCertificateAction } from './views/PrintCertificate/PrintCertificateAction'
 import { ErrorBoundary } from './components/ErrorBoundary'
+import { Details } from 'src/views/Home/Details'
 import { StyledErrorBoundary } from './components/StyledErrorBoundary'
 import { RegistrarHome } from './views/RegistrarHome/RegistrarHome'
 import { FieldAgentHome } from './views/FieldAgentHome/FieldAgentHome'
@@ -137,6 +138,10 @@ export class App extends React.Component<IAppProps> {
                                   path={routes.PRINT_CERTIFICATE}
                                   component={PrintCertificateAction}
                                 />
+                                <ProtectedRoute
+                                  path={routes.APPLICATION_DETAIL}
+                                  component={Details}
+                                />
                               </Switch>
                             </ProtectedPage>
                           </MainSection>
diff --git a/packages/register/src/applications/index.ts b/packages/register/src/applications/index.ts
@@ -15,7 +15,8 @@ const GET_APPLICATIONS_FAILED = 'APPLICATION/GET_DRAFTS_FAILED'
 
 export enum SUBMISSION_STATUS {
   DRAFT,
-  READY_TO_SUBMIT
+  READY_TO_SUBMIT,
+  FAILED
 }
 
 export interface IApplication {
diff --git a/packages/register/src/components/TopMenu.tsx b/packages/register/src/components/TopMenu.tsx
@@ -99,8 +99,6 @@ const BackButton = styled(PrimaryButton)`
 const BackButtonText = styled.span`
   ${({ theme }) => theme.fonts.bodyBoldStyle};
   text-transform: uppercase;
-  font-size: 14px;
-  letter-spacing: 2px;
   margin-left: 14px;
 `
 
diff --git a/packages/register/src/components/interface/Header/Header.tsx b/packages/register/src/components/interface/Header/Header.tsx
@@ -331,7 +331,6 @@ class HeaderComp extends React.Component<IProps, IState> {
         }
 
     return (
-
       <>
         <AppHeader
           menuItems={menuItems}
@@ -341,7 +340,6 @@ class HeaderComp extends React.Component<IProps, IState> {
           {...mobileHeaderActionProps}
         />
       </>
-
     )
   }
 }
diff --git a/packages/register/src/i18n/locales/bn.ts b/packages/register/src/i18n/locales/bn.ts
@@ -697,7 +697,7 @@ export const BENGALI_STATE: ILanguage = {
     'register.searchResult.reviewButton': 'পর্যালোচনা',
     'register.workQueue.list.buttons.print': 'মুদ্রণ',
     'register.searchResult.list.buttons.print': 'মুদ্রণ',
-    'register.workQueue.list.buttons.update': 'Update',
+    'register.workQueue.list.buttons.update': 'আপডেট',
     'register.workQueue.title.certificateCollection': 'সার্টিফিকেট সংগ্রহ',
     'register.workQueue.list.buttons.printCertificate': 'সার্টিফিকেট মুদ্রণ',
     'register.workQueue.buttons.newApplication': 'নতুন আবেদন',
@@ -982,6 +982,15 @@ export const BENGALI_STATE: ILanguage = {
     'register.home.header.placeHolderPhone': 'ফোন নম্বর প্রবেশ করান',
     'register.home.header.defaultTitle': 'আবেদন',
     'register.home.header.applicationTitle': 'আবেদন',
+    'register.details.status.dateLabel.draft.started': 'শুরু করা হয়েছে',
+    'register.details.status.dateLabel.draft.updated': 'আপডেট করা হয়েছে',
+    'register.detail.status.applicant.number': 'আবেদনকারীর মোবাইল নম্বর',
+    'register.detail.subpage.emptyTitle': 'নাম দেয়া হয়নি',
+    'register.detail.subpag.buttons.retry': 'পুনরায় চেষ্টা করুন',
+    'register.details.status.dateLabel.draft.failed':
+      'পাঠাতে ব্যর্থ হওয়ার তারিখ',
+    'register.detail.status.failedMessage':
+      'এটি কোনও ব্যর্থতার আবেদনকারীর ক্ষেত্রে ব্যবহারকারীর পরামর্শ দেওয়ার বিষয়ে কিছু বার্তা।',
     'register.fieldAgentHome.inProgress': 'চলমান ({total})',
     'register.fieldAgentHome.sentForReview':
       'পর্যালোচনার জন্য পাঠানো ({total})',
diff --git a/packages/register/src/i18n/locales/en.ts b/packages/register/src/i18n/locales/en.ts
@@ -983,13 +983,22 @@ export const ENGLISH_STATE: ILanguage = {
     'register.home.header.defaultTitle': 'Applications',
     'register.home.header.applicationTitle': 'Applications',
     'register.home.header.performanceTitle': 'Performance',
+    'register.details.status.dateLabel.draft.started': 'Started on',
+    'register.details.status.dateLabel.draft.updated': 'Updated on',
+    'register.detail.status.applicant.number': 'Applicant contact number',
+    'register.detail.subpage.emptyTitle': 'No name provided',
+    'register.detail.subpag.buttons.retry': 'Retry',
+    'register.details.status.dateLabel.draft.failed': 'Failed to send on',
+    'register.detail.status.failedMessage':
+      'This is some messaging on advicing the user on what to do... in the event of a failed applicaton.',
     'register.fieldAgentHome.inProgress': 'In progress ({total})',
     'register.fieldAgentHome.sentForReview': 'Sent for review ({total})',
     'register.fieldAgentHome.requireUpdates': 'Require updates ({total})',
     'register.registrarHome.inProgress': 'In progress',
     'register.registrarHome.readyForReview': 'Ready for review',
     'register.registrarHome.sentForUpdates': 'Sent for updates',
     'register.registrarHome.action': 'Action',
+    'register.workQueue.list.buttons.update': 'Update',
     'createPIN.pinSameDigitsError': 'PIN cannot have same 4 digits',
     'createPIN.pinSeqDigitsError': 'PIN cannot contain sequential digits'
   }
diff --git a/packages/register/src/navigation/routes.ts b/packages/register/src/navigation/routes.ts
@@ -26,3 +26,5 @@ export const PRINT_CERTIFICATE = '/print/:registrationId/:eventType'
 export const REGISTRAR_HOME = '/registrar-home'
 export const REGISTRAR_HOME_TAB = '/registrar-home/:tabId'
 export const FIELD_AGENT_HOME_TAB = '/field-agent-home/:tabId'
+
+export const APPLICATION_DETAIL = '/details/:applicationId'
diff --git a/packages/register/src/utils/draftUtils.test.ts b/packages/register/src/utils/draftUtils.test.ts
diff --git a/packages/register/src/utils/draftUtils.ts b/packages/register/src/utils/draftUtils.ts
diff --git a/packages/register/src/views/Home/Details.test.tsx b/packages/register/src/views/Home/Details.test.tsx
diff --git a/packages/register/src/views/Home/Details.tsx b/packages/register/src/views/Home/Details.tsx
diff --git a/packages/register/src/views/Home/queries.ts b/packages/register/src/views/Home/queries.ts

Original file line number	Diff line number	Diff line change
@@ -43,7 +43,6 @@ const StyledStatus = styled.div`
`43`	`43`	`& span {`
`44`	`44`	`text-transform: uppercase;`
`45`	`45`	`margin-left: 5px;`
`46`		`- font-size: 13px;`
`47`	`46`	`color: ${({ theme }) => theme.colors.primary};`
`48`	`47`	`}`
`49`	`48`	`
Original file line number	Diff line number	Diff line change
@@ -10,7 +10,6 @@ const ImageBase = styled(PrimaryButton.withComponent('label'))`
`10`	`10`	`align-items: center;`
`11`	`11`	`display: inline-flex;`
`12`	`12`	`border: 0;`
`13`		`- font-size: inherit;`
`14`	`13`	`justify-content: space-between;`
`15`	`14`	`cursor: pointer;`
`16`	`15`	`
Original file line number	Diff line number	Diff line change
`@@ -6,6 +6,7 @@ interface ITextAreaProps {`
`6`	`6`	`}`
`7`	`7`
`8`	`8`	const StyledTextArea = styled.textarea<ITextAreaProps>`
	`9`	`+ ${({ theme }) => theme.fonts.bodyBoldStyle};`
`9`	`10`	`width: 100%;`
`10`	`11`	`padding: 10px;`
`11`	`12`	`min-height: 80px;`
@@ -15,7 +16,6 @@ const StyledTextArea = styled.textarea<ITextAreaProps>`
`15`	`16`	`outline: 0;`
`16`	`17`	`}`
`17`	`18`	`background-color: ${({ theme }) => theme.colors.background};`
`18`		`- font-size: 16px;`
`19`	`19`	`color: ${({ theme }) => theme.colors.secondary};`
`20`	`20`
`21`	`21`	`&::-webkit-input-placeholder {`
Original file line number	Diff line number	Diff line change
@@ -19,9 +19,6 @@ const StyledStatus = styled.span`
`19`	`19`	`color: ${({ theme }) => theme.colors.placeholder};`
`20`	`20`	`text-transform: uppercase;`
`21`	`21`	`margin-left: 5px;`
`22`		`- font-size: 14px;`
`23`		`- font-weight: bold;`
`24`		`- letter-spacing: 0.58px;`
`25`	`22`	`}`
`26`	`23`	`
`27`	`24`
Original file line number	Diff line number	Diff line change
@@ -18,7 +18,6 @@ const Wrapper = styled.div`
`18`	`18`	const LabelText = styled.div`
`19`	`19`	`color: ${({ theme }) => theme.colors.placeholder};`
`20`	`20`	`${({ theme }) => theme.fonts.bodyStyle};`
`21`		`- font-weight: 500;`
`22`	`21`	`
`23`	`22`	const ComponentWrapper = styled.span`
`24`	`23`	`flex-direction: column;`