From d25dc138a7f63c36c3691697b3fb930ff71b6467 Mon Sep 17 00:00:00 2001 From: Farhan Ahmad Nurzi <125247833+farhan-nurzi-deriv@users.noreply.github.com> Date: Thu, 16 Nov 2023 13:54:20 +0800 Subject: [PATCH] [WALL] Farhan/WALL-2599/Identity Card Document Submission (#11446) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: create identity card upload screen * refactor: 🔧 refactor divider component * refactor: 🔧 remove styles props in dropzone component --- .../src/components/Base/Divider/Divider.scss | 6 +- .../src/components/Base/Divider/Divider.tsx | 2 +- .../src/components/Dropzone/Dropzone.scss | 6 +- .../src/components/Dropzone/Dropzone.tsx | 71 ++++++++------- .../DocumentRuleHint/DocumentRuleHint.scss | 0 .../DocumentRuleHint/DocumentRuleHint.tsx | 2 +- .../DocumentRuleHint/index.ts | 0 .../DocumentRuleHints/DocumentRuleHints.scss | 12 +++ .../DocumentRuleHints/DocumentRuleHints.tsx | 24 ++++++ .../components/DocumentRuleHints/index.ts | 1 + .../IdentityCardDocumentUpload.scss | 86 +++++++++++++++++++ .../IdentityCardDocumentUpload.tsx | 51 +++++++++++ .../IdentityCardDocumentUpload/index.ts | 1 + .../PassportDocumentUpload.scss | 33 +++++-- .../PassportDocumentUpload.tsx | 45 ++-------- .../public/images/accounts/document-back.svg | 8 ++ .../images/accounts/identity-card-front.svg | 13 +++ 17 files changed, 272 insertions(+), 89 deletions(-) rename packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/{ => DocumentRuleHints}/DocumentRuleHint/DocumentRuleHint.scss (100%) rename packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/{ => DocumentRuleHints}/DocumentRuleHint/DocumentRuleHint.tsx (86%) rename packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/{ => DocumentRuleHints}/DocumentRuleHint/index.ts (100%) create mode 100644 packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHints/DocumentRuleHints.scss create mode 100644 packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHints/DocumentRuleHints.tsx create mode 100644 packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHints/index.ts create mode 100644 packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/IdentityCardDocumentUpload/IdentityCardDocumentUpload.scss create mode 100644 packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/IdentityCardDocumentUpload/IdentityCardDocumentUpload.tsx create mode 100644 packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/IdentityCardDocumentUpload/index.ts create mode 100644 packages/wallets/src/public/images/accounts/document-back.svg create mode 100644 packages/wallets/src/public/images/accounts/identity-card-front.svg diff --git a/packages/wallets/src/components/Base/Divider/Divider.scss b/packages/wallets/src/components/Base/Divider/Divider.scss index f3671eea161d..8677fda308df 100644 --- a/packages/wallets/src/components/Base/Divider/Divider.scss +++ b/packages/wallets/src/components/Base/Divider/Divider.scss @@ -1,9 +1,11 @@ .wallets-divider { - &__horizontal { + width: 100%; + + &--horizontal { border-top: 1px solid; } - &__vertical { + &--vertical { border-right: 1px solid; } } diff --git a/packages/wallets/src/components/Base/Divider/Divider.tsx b/packages/wallets/src/components/Base/Divider/Divider.tsx index f52f88feebf2..ac1326a2da7c 100644 --- a/packages/wallets/src/components/Base/Divider/Divider.tsx +++ b/packages/wallets/src/components/Base/Divider/Divider.tsx @@ -8,7 +8,7 @@ type TProps = { }; const Divider: React.FC = ({ color = '#f2f3f4', margin, variant = 'horizontal' }) => ( -
+
); export default Divider; diff --git a/packages/wallets/src/components/Dropzone/Dropzone.scss b/packages/wallets/src/components/Dropzone/Dropzone.scss index 63f6640ad301..973a42206d3a 100644 --- a/packages/wallets/src/components/Dropzone/Dropzone.scss +++ b/packages/wallets/src/components/Dropzone/Dropzone.scss @@ -1,16 +1,12 @@ .wallets-dropzone { display: flex; - padding: 2.8rem 15.2rem 3.5rem; justify-content: center; align-items: center; border-radius: 0.8rem; height: 100%; width: 100%; border: 0.1rem dashed var(--system-light-5-active-background, #d6dadb); - - @include mobile { - padding: 2.4rem 2.5rem 0.4rem; - } + padding: 2rem; &--hover, &--active { diff --git a/packages/wallets/src/components/Dropzone/Dropzone.tsx b/packages/wallets/src/components/Dropzone/Dropzone.tsx index 4c78fdd06658..e2f720134c34 100644 --- a/packages/wallets/src/components/Dropzone/Dropzone.tsx +++ b/packages/wallets/src/components/Dropzone/Dropzone.tsx @@ -1,12 +1,4 @@ -import React, { - CSSProperties, - DetailedHTMLProps, - InputHTMLAttributes, - ReactNode, - RefObject, - useCallback, - useState, -} from 'react'; +import React, { DetailedHTMLProps, InputHTMLAttributes, ReactNode, RefObject, useCallback, useState } from 'react'; import classNames from 'classnames'; import { useDropzone } from 'react-dropzone'; import CloseIcon from '../../public/images/close-icon.svg'; @@ -17,26 +9,18 @@ type TProps = { buttonText?: ReactNode; description?: ReactNode; fileFormats?: NonNullable[0]>['accept']; - height?: CSSProperties['height']; hoverMessage?: ReactNode; icon: ReactNode; maxSize?: NonNullable[0]>['maxSize']; - minHeight?: CSSProperties['minHeight']; - minWidth?: CSSProperties['minWidth']; - width?: CSSProperties['width']; }; const Dropzone: React.FC = ({ buttonText = 'Upload', description, fileFormats, - height, hoverMessage = 'Drop file here', icon, maxSize, - minHeight, - minWidth, - width, }) => { const [files, setFiles] = useState< { @@ -45,6 +29,7 @@ const Dropzone: React.FC = ({ }[] >([]); const [showHoverMessage, setShowHoverMessage] = useState(false); + const [errorMessage, setErrorMessage] = useState(null); const { getInputProps, getRootProps, open, rootRef } = useDropzone({ accept: fileFormats, maxSize, @@ -54,7 +39,6 @@ const Dropzone: React.FC = ({ onDragLeave: () => setShowHoverMessage(false), onDrop: acceptedFiles => { setShowHoverMessage(false); - setFiles( acceptedFiles.map(file => Object.assign(file, { @@ -63,6 +47,12 @@ const Dropzone: React.FC = ({ ) ); }, + onDropAccepted() { + setErrorMessage(null); + }, + onDropRejected(fileRejections) { + setErrorMessage(fileRejections?.[0]?.errors?.[0].message); + }, }); const removeFile = useCallback( @@ -73,11 +63,7 @@ const Dropzone: React.FC = ({ ); return ( -
} - style={{ height, minHeight, minWidth, width }} - > +
}> , HTMLInputElement>)} /> @@ -93,27 +79,40 @@ const Dropzone: React.FC = ({ {!showHoverMessage && !files.length && (
{icon}
+ + {description} +
+ {errorMessage && ( + + {errorMessage} + + )}
)} {files.length > 0 && files.map(file => ( -
- } - onClick={removeFile(file)} - size='sm' - /> -
+ +
+ } + onClick={removeFile(file)} + size='sm' + /> +
+ {description && ( + + {description} + + )} + ))} - {!showHoverMessage && description && {description}}
diff --git a/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHint/DocumentRuleHint.scss b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHints/DocumentRuleHint/DocumentRuleHint.scss similarity index 100% rename from packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHint/DocumentRuleHint.scss rename to packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHints/DocumentRuleHint/DocumentRuleHint.scss diff --git a/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHint/DocumentRuleHint.tsx b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHints/DocumentRuleHint/DocumentRuleHint.tsx similarity index 86% rename from packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHint/DocumentRuleHint.tsx rename to packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHints/DocumentRuleHint/DocumentRuleHint.tsx index dfffef6254cb..2b7bb10e8d75 100644 --- a/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHint/DocumentRuleHint.tsx +++ b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHints/DocumentRuleHint/DocumentRuleHint.tsx @@ -1,5 +1,5 @@ import React, { ReactNode } from 'react'; -import { WalletText } from '../../../../../../components/Base'; +import { WalletText } from '../../../../../../../components/Base'; import './DocumentRuleHint.scss'; type TProps = { diff --git a/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHint/index.ts b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHints/DocumentRuleHint/index.ts similarity index 100% rename from packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHint/index.ts rename to packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHints/DocumentRuleHint/index.ts diff --git a/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHints/DocumentRuleHints.scss b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHints/DocumentRuleHints.scss new file mode 100644 index 000000000000..652e6a885936 --- /dev/null +++ b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHints/DocumentRuleHints.scss @@ -0,0 +1,12 @@ +.wallets-document-rule-hints { + display: flex; + justify-content: center; + width: 100%; + + @include mobile { + display: grid; + grid-template-columns: repeat(2, 1fr); + column-gap: 2.4rem; + row-gap: 0.8rem; + } +} diff --git a/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHints/DocumentRuleHints.tsx b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHints/DocumentRuleHints.tsx new file mode 100644 index 000000000000..7bbababe92d6 --- /dev/null +++ b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHints/DocumentRuleHints.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import ClearPhoto from '../../../../../../public/images/accounts/clear-photo.svg'; +import ClockIcon from '../../../../../../public/images/accounts/clock-icon.svg'; +import ImageIcon from '../../../../../../public/images/accounts/image-icon.svg'; +import LessThanEightIcon from '../../../../../../public/images/accounts/less-than-eight-icon.svg'; +import { DocumentRuleHint } from './DocumentRuleHint'; +import './DocumentRuleHints.scss'; + +type TProps = { + docType: 'driverLicense' | 'identityCard' | 'nimcSlip' | 'passport'; +}; + +const DocumentRuleHints: React.FC = ({ docType }) => ( +
+ } /> + } /> + } /> + {docType !== 'nimcSlip' && ( + } /> + )} +
+); + +export default DocumentRuleHints; diff --git a/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHints/index.ts b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHints/index.ts new file mode 100644 index 000000000000..36406d4c44b6 --- /dev/null +++ b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHints/index.ts @@ -0,0 +1 @@ +export { default as DocumentRuleHints } from './DocumentRuleHints'; diff --git a/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/IdentityCardDocumentUpload/IdentityCardDocumentUpload.scss b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/IdentityCardDocumentUpload/IdentityCardDocumentUpload.scss new file mode 100644 index 000000000000..b018eafd436b --- /dev/null +++ b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/IdentityCardDocumentUpload/IdentityCardDocumentUpload.scss @@ -0,0 +1,86 @@ +.wallets-identity-card-document-upload { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 2.4rem; + padding: 2.4rem; + width: fit-content; + background: var(--light-8-primary-background, #fff); + + @include mobile { + width: 100%; + } + + &__document-section { + width: 100%; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 1.7rem; + + @include mobile { + gap: 1.6rem; + } + } + + &__dropzones { + width: 100%; + display: flex; + align-items: flex-start; + gap: 2.4rem; + + @include mobile { + flex-direction: column; + } + + &--left { + width: 100%; + + & > .wallets-dropzone__container { + min-width: 33.5rem; + } + + & > .wallets-dropzone { + padding: 4rem 4.7rem 4rem 3.9rem; + } + } + + &--right { + width: 100%; + + & > .wallets-dropzone__container { + min-width: 31rem; + } + + & > .wallets-dropzone { + padding: 4rem 2.4rem; + } + } + + & .wallets-dropzone__container { + height: 25rem; + + @include mobile { + min-width: 100%; + } + } + + & .wallets-dropzone { + @include mobile { + padding: 2rem; + } + } + } + + &__input-group { + display: flex; + gap: 2.4rem; + padding-bottom: 2rem; + width: 100%; + + @include mobile { + flex-direction: column; + gap: 1.6rem; + } + } +} diff --git a/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/IdentityCardDocumentUpload/IdentityCardDocumentUpload.tsx b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/IdentityCardDocumentUpload/IdentityCardDocumentUpload.tsx new file mode 100644 index 000000000000..770ec879ac58 --- /dev/null +++ b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/IdentityCardDocumentUpload/IdentityCardDocumentUpload.tsx @@ -0,0 +1,51 @@ +import React from 'react'; +import { Divider, Dropzone, WalletText, WalletTextField } from '../../../../../../components'; +import IdentityCardBack from '../../../../../../public/images/accounts/document-back.svg'; +import IdentityCardFront from '../../../../../../public/images/accounts/identity-card-front.svg'; +import Calendar from '../../../../../../public/images/calendar.svg'; +import { DocumentRuleHints } from '../DocumentRuleHints'; +import './IdentityCardDocumentUpload.scss'; + +const IdentityCardDocumentUpload = () => { + return ( +
+ First, enter your Identity card number and the expiry date. +
+ + } + type='date' + /> +
+ +
+ Next, upload the front and back of your identity card. +
+
+ } + maxSize={8388608} + /> +
+
+ } + maxSize={8388608} + /> +
+
+ +
+
+ ); +}; + +export default IdentityCardDocumentUpload; diff --git a/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/IdentityCardDocumentUpload/index.ts b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/IdentityCardDocumentUpload/index.ts new file mode 100644 index 000000000000..e87b4691e064 --- /dev/null +++ b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/IdentityCardDocumentUpload/index.ts @@ -0,0 +1 @@ +export { default as IdentityCardDocumentUpload } from './IdentityCardDocumentUpload'; diff --git a/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/PassportDocumentUpload/PassportDocumentUpload.scss b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/PassportDocumentUpload/PassportDocumentUpload.scss index 8508e6e7563c..d87912f42d26 100644 --- a/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/PassportDocumentUpload/PassportDocumentUpload.scss +++ b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/PassportDocumentUpload/PassportDocumentUpload.scss @@ -3,7 +3,13 @@ flex-direction: column; align-items: flex-start; gap: 2.4rem; + padding: 2.4rem; width: fit-content; + background: var(--light-8-primary-background, #fff); + + @include mobile { + width: 100%; + } &__document-section { display: flex; @@ -11,6 +17,23 @@ align-items: flex-start; gap: 1.7rem; + & > .wallets-dropzone__container { + height: 25rem; + min-width: 72.6rem; + + @include mobile { + min-width: 100%; + } + } + + & > .wallets-dropzone { + padding: 2.8rem 15.2rem 3.5rem; + + @include mobile { + padding: 2.4rem 2.5rem 0.4rem; + } + } + @include mobile { gap: 1.6rem; } @@ -21,16 +44,10 @@ gap: 2.4rem; padding-bottom: 2rem; width: 100%; - } - - &__rules { - display: flex; @include mobile { - display: grid; - grid-template-columns: repeat(2, 1fr); - column-gap: 2.4rem; - row-gap: 0.8rem; + flex-direction: column; + gap: 1.6rem; } } } diff --git a/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/PassportDocumentUpload/PassportDocumentUpload.tsx b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/PassportDocumentUpload/PassportDocumentUpload.tsx index bf717478bd39..bd8d4cb77c91 100644 --- a/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/PassportDocumentUpload/PassportDocumentUpload.tsx +++ b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/PassportDocumentUpload/PassportDocumentUpload.tsx @@ -1,44 +1,23 @@ import React from 'react'; import { Dropzone } from '../../../../../../components'; import { Divider, WalletText, WalletTextField } from '../../../../../../components/Base'; -import useDevice from '../../../../../../hooks/useDevice'; -import ClearPhoto from '../../../../../../public/images/accounts/clear-photo.svg'; -import ClockIcon from '../../../../../../public/images/accounts/clock-icon.svg'; -import ImageIcon from '../../../../../../public/images/accounts/image-icon.svg'; -import LessThanEightIcon from '../../../../../../public/images/accounts/less-than-eight-icon.svg'; import PassportPlaceholder from '../../../../../../public/images/accounts/passport-placeholder.svg'; import Calendar from '../../../../../../public/images/calendar.svg'; -import { DocumentRuleHint } from '../DocumentRuleHint'; +import { DocumentRuleHints } from '../DocumentRuleHints'; import './PassportDocumentUpload.scss'; -const documentRules = [ - { - description: 'A clear colour photo or scanned image', - icon: , - }, - { - description: 'JPEG, JPG, PNG, PDF, or GIF', - icon: , - }, - { - description: 'Less than 8MB', - icon: , - }, - { - description: 'Must be valid for at least 6 months', - icon: , - }, -]; - const PassportDocumentUpload = () => { - const { isDesktop } = useDevice(); - return (
First, enter your Passport number and the expiry date.
- - } type='date' /> + + } + type='date' + />
@@ -47,16 +26,10 @@ const PassportDocumentUpload = () => { buttonText='Drop file or click here to upload' description='Upload the page of your passport that contains your photo.' fileFormats={['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'application/pdf']} - height='25rem' icon={} maxSize={8388608} - minWidth={isDesktop ? '72.6rem' : '100%'} /> -
- {documentRules.map((rule, idx) => ( - - ))} -
+
); diff --git a/packages/wallets/src/public/images/accounts/document-back.svg b/packages/wallets/src/public/images/accounts/document-back.svg new file mode 100644 index 000000000000..0f4258994d0f --- /dev/null +++ b/packages/wallets/src/public/images/accounts/document-back.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/packages/wallets/src/public/images/accounts/identity-card-front.svg b/packages/wallets/src/public/images/accounts/identity-card-front.svg new file mode 100644 index 000000000000..0721f96c3bf7 --- /dev/null +++ b/packages/wallets/src/public/images/accounts/identity-card-front.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + \ No newline at end of file