Merge remote-tracking branch 'origin/master' into pa-redesign

packages/account/src/Components/api-token/api-token.scss

@@ -57,7 +57,7 @@
     }
     &__clipboard-wrapper {
         display: flex;
-        justify-content: flex-end;
+        justify-content: flex-start;
         align-items: center;
         gap: 1rem;
         padding-right: 1.3rem;
@@ -132,7 +132,7 @@
         &-item {
             margin-bottom: 0.8rem;
             display: grid;
-            grid-template-columns: 1.6fr 0.4fr;
+            grid-template-columns: 1.5fr 0.5fr;
 
             &--name {
                 word-break: break-all;

packages/account/src/Components/currency-selector/__tests__/radio-button-group.spec.js

@@ -48,7 +48,7 @@ describe('<RadioButtonGroup/>', () => {
 
     it('if is_fiat is false it should not show description on clicking the child component', () => {
         render(
-            <RadioButtonGroup {...props}  is_fiat={false}>
+            <RadioButtonGroup {...props} is_fiat={false}>
                 <button>Currency</button>
             </RadioButtonGroup>
         );

packages/account/src/Components/file-uploader-container/upload-file.js

@@ -0,0 +1,52 @@
+import PropTypes from 'prop-types';
+import DocumentUploader from '@binary-com/binary-document-uploader';
+import { localize } from '@deriv/translations';
+import { compressImageFiles, readFiles, DOCUMENT_TYPE, PAGE_TYPE } from '@deriv/shared';
+
+const fileReadErrorMessage = filename => {
+    return localize('Unable to read file {{name}}', { name: filename });
+};
+
+const uploadFile = (file, getSocket, settings) =>
+    new Promise((resolve, reject) => {
+        if (!file) {
+            reject();
+        }
+
+        // File uploader instance connected to binary_socket
+        const uploader = new DocumentUploader({ connection: getSocket() });
+
+        let is_file_error = false;
+
+        compressImageFiles([file]).then(files_to_process => {
+            readFiles(files_to_process, fileReadErrorMessage, settings).then(processed_files => {
+                processed_files.forEach(item => {
+                    if (item.message) {
+                        is_file_error = true;
+                        reject(item);
+                    }
+                });
+                const total_to_upload = processed_files.length;
+                if (is_file_error || !total_to_upload) {
+                    return; // don't start submitting files until all front-end validation checks pass
+                }
+
+                // send files
+                uploader.upload(processed_files[0]).then(resolve).catch(reject);
+            });
+        });
+    });
+
+uploadFile.propTypes = {
+    file: PropTypes.element.isRequired,
+    getSocket: PropTypes.func.isRequired,
+    settings: PropTypes.shape({
+        documentType: PropTypes.oneOf(Object.values(DOCUMENT_TYPE)).isRequired,
+        pageType: PropTypes.oneOf(Object.values(PAGE_TYPE)),
+        expirationDate: PropTypes.string,
+        documentId: PropTypes.string,
+        lifetimeValid: PropTypes.bool,
+    }),
+};
+
+export default uploadFile;

packages/account/src/Components/poi-unsupported-failed/index.js

@@ -0,0 +1,3 @@
+import UnsupportedFailed from './unsupported-failed.jsx';
+
+export default UnsupportedFailed;

packages/account/src/Components/poi-unsupported-failed/unsupported-failed.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Icon } from '@deriv/components';
+import { localize } from '@deriv/translations';
+import IconMessageContent from 'Components/icon-message-content';
+
+const UnsupportedFailed = ({ error }) => (
+    <IconMessageContent
+        message={localize('Proof of identity documents upload failed')}
+        text={error}
+        icon={<Icon icon='IcPoiFailed' size={128} />}
+        className='account-management-dashboard'
+    />
+);
+
+UnsupportedFailed.propTypes = {
+    error: PropTypes.string,
+};
+
+export default UnsupportedFailed;

packages/account/src/Components/poi/status/unsupported/card-details/card-details.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import DocumentsUpload from './documents-upload.jsx';
+import SelfieUpload from './selfie-upload.jsx';
+import { SELFIE_DOCUMENT } from '../constants';
+import './card-details.scss';
+
+const CardDetails = ({ data, goToCards, onComplete, is_from_external, setIsCfdPoiCompleted }) => {
+    const [documents, setDocuments] = React.useState();
+    const [selfie, setSelfie] = React.useState();
+    const [is_selfie_upload, setIsSelfieUpload] = React.useState(false);
+
+    const onSubmitDocuments = values => {
+        setDocuments(values);
+        setIsSelfieUpload(true);
+    };
+
+    const onConfirmDocuments = values => {
+        onComplete({ ...documents, ...values });
+        setIsCfdPoiCompleted(true);
+    };
+
+    return (
+        <React.Fragment>
+            {!is_selfie_upload ? (
+                <DocumentsUpload
+                    initial_values={documents}
+                    is_from_external={is_from_external}
+                    data={data}
+                    goToCards={goToCards}
+                    onSubmit={onSubmitDocuments}
+                />
+            ) : (
+                <SelfieUpload
+                    initial_values={selfie}
+                    goBack={() => setIsSelfieUpload(false)}
+                    onConfirm={onConfirmDocuments}
+                    onFileDrop={value => setSelfie({ [SELFIE_DOCUMENT.name]: value })}
+                />
+            )}
+        </React.Fragment>
+    );
+};
+
+export default CardDetails;

packages/account/src/Components/poi/status/unsupported/card-details/card-details.scss

@@ -0,0 +1,189 @@
+.manual-poi-details {
+    margin: 0 -1rem;
+    max-width: 67.2rem;
+    height: 100%;
+    display: flex;
+
+    &--mobile {
+        padding: 2.4rem 1.6rem;
+    }
+
+    h3 {
+        margin-bottom: 2.5rem;
+    }
+    &__form {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+    }
+    &__fields-content {
+        flex: auto;
+    }
+    &__fields-wrap {
+        display: flex;
+        margin-bottom: 0.7rem;
+
+        .manual-poi-details--mobile & {
+            flex-wrap: wrap;
+        }
+    }
+    &__field {
+        margin-bottom: 3.5rem;
+
+        &:first-of-type {
+            margin-right: 2.4rem;
+
+            .manual-poi-details--mobile & {
+                margin-right: 0;
+            }
+        }
+    }
+    &__divider {
+        height: 2px;
+        background-color: var(--general-section-1);
+        margin-bottom: 2.4rem;
+
+        &--m16 {
+            margin-bottom: 1.6rem;
+        }
+    }
+    &__uploaders-wrap {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+
+        .dc-file-dropzone__message {
+            width: 100%;
+            max-width: none;
+            pointer-events: all;
+        }
+    }
+    &__uploader {
+        position: relative;
+        width: 100%;
+        max-width: 32.4rem;
+        height: 25rem;
+        margin-bottom: 1.6rem;
+
+        .manual-poi-details--mobile & {
+            max-width: none;
+        }
+
+        &--full {
+            max-width: none;
+        }
+    }
+    &__uploader-details {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        justify-content: space-between;
+        padding: 0 1.5rem;
+        min-height: 19.2rem;
+
+        &--preview {
+            padding: 0 2.4rem;
+            max-height: 20.3rem;
+        }
+
+        p {
+            margin-bottom: 2.4rem;
+
+            @at-root .manual-poi-details__uploader-details--preview p {
+                margin-bottom: 0;
+            }
+        }
+    }
+    &__uploader-image {
+        position: relative;
+        width: 100%;
+        max-width: 27.6rem;
+        height: 16.6rem;
+        border-radius: 0.8rem;
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center center;
+        margin-bottom: 1.6rem;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        &--has-frame {
+            background-size: contain;
+        }
+
+        .manual-poi-details--mobile & {
+            height: 13.4rem;
+        }
+    }
+    &__uploader-frame {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 100%;
+        height: auto;
+    }
+    &__uploader-remove {
+        position: absolute;
+        top: 0.8rem;
+        right: 0.8rem;
+        cursor: pointer;
+        transition: transform 0.25s linear;
+
+        &:hover {
+            transform: scale(1.25, 1.25);
+        }
+    }
+    &__uploader-icon {
+        width: 12.8rem;
+        height: 7.9rem;
+        margin-bottom: 1.5rem;
+    }
+    &__icons {
+        display: flex;
+        flex-wrap: wrap;
+        margin-bottom: 1.7rem;
+    }
+    &__icons-item {
+        flex: 0.25;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 0 1rem;
+        min-height: 9.2rem;
+
+        .manual-poi-details--mobile & {
+            flex: none;
+            width: 50%;
+            min-height: 7.6rem;
+        }
+
+        p {
+            max-width: 12.4rem;
+
+            .manual-poi-details--mobile & {
+                max-width: 13.2rem;
+            }
+        }
+
+        svg {
+            height: 4.8rem;
+        }
+    }
+    &__btns {
+        height: 15.2rem;
+        flex: none;
+        border-top: 2px solid var(--general-section-1);
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        padding-bottom: 8rem;
+
+        .dc-btn:not(:last-of-type) {
+            margin-right: 0.8rem;
+        }
+    }
+}