Skip to content

Commit

Permalink
feat(procedures): implement gdpr document upload and confirmation
Browse files Browse the repository at this point in the history
ref: MANAGER-15368

Signed-off-by: Omar ALKABOUSS MOUSSANA <[email protected]>
  • Loading branch information
Omar ALKABOUSS MOUSSANA committed Oct 18, 2024
1 parent 94d9618 commit f07ed08
Show file tree
Hide file tree
Showing 9 changed files with 308 additions and 42 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -22,23 +22,25 @@ type Props = {
isPending: boolean;
onClose: () => void;
onValidate: () => void;
title: string;
descriptionInsure: string;
descriptionConfirm: string;
noButtonLabel: string;
yesButtonLabel: string;
};

export const ConfirmModal: FunctionComponent<Props> = ({
onClose,
onValidate,
isPending,
title,
descriptionInsure,
descriptionConfirm,
noButtonLabel,
yesButtonLabel,
}) => {
const { t } = useTranslation('account-disable-2fa');

return (
<OsdsModal
dismissible={false}
onOdsModalClose={onClose}
headline={t(
'account-disable-2fa-create-form-confirm-modal-send-document-title',
)}
>
<OsdsModal dismissible={false} onOdsModalClose={onClose} headline={title}>
<div className="flex items-center gap-x-6">
<div className="rounded-full p-4 bg-[#bef1ff]">
<OsdsIcon
Expand All @@ -56,9 +58,7 @@ export const ConfirmModal: FunctionComponent<Props> = ({
className="block"
hue={ODS_TEXT_COLOR_HUE._500}
>
{t(
'account-disable-2fa-create-form-confirm-modal-send-document-description-insure',
)}
{descriptionInsure}
</OsdsText>
<OsdsText
level={ODS_TEXT_LEVEL.caption}
Expand All @@ -67,9 +67,7 @@ export const ConfirmModal: FunctionComponent<Props> = ({
className="block mt-2"
hue={ODS_TEXT_COLOR_HUE._500}
>
{t(
'account-disable-2fa-create-form-confirm-modal-send-document-description-confirm',
)}
{descriptionConfirm}
</OsdsText>
</div>
</div>
Expand All @@ -84,7 +82,7 @@ export const ConfirmModal: FunctionComponent<Props> = ({
color={ODS_THEME_COLOR_INTENT.primary}
onClick={onClose}
>
{t('account-disable-2fa-confirm-modal-no')}
{noButtonLabel}
</OsdsButton>
<OsdsButton
slot="actions"
Expand All @@ -93,7 +91,7 @@ export const ConfirmModal: FunctionComponent<Props> = ({
variant={ODS_BUTTON_VARIANT.flat}
color={ODS_THEME_COLOR_INTENT.primary}
>
{t('account-disable-2fa-confirm-modal-yes')}
{yesButtonLabel}
</OsdsButton>
</>
)}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,21 @@ import {
OsdsModal,
OsdsText,
} from '@ovhcloud/ods-components/react';
import { useTranslation } from 'react-i18next';
import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';

type Props = {
title: string;
description: string;
ovhHomePageHref: string;
ovhHomePageLabel: string;
};

export const SuccessModal: FunctionComponent<Props> = ({ ovhHomePageHref }) => {
const { t } = useTranslation('account-disable-2fa');

export const SuccessModal: FunctionComponent<Props> = ({
ovhHomePageHref,
title,
description,
ovhHomePageLabel,
}) => {
const gotToHomePage = () => {
window.location.href = ovhHomePageHref;
};
Expand All @@ -43,9 +48,7 @@ export const SuccessModal: FunctionComponent<Props> = ({ ovhHomePageHref }) => {
className="block font-bold"
hue={ODS_TEXT_COLOR_HUE._700}
>
{t(
'account-disable-2fa-create-form-success-modal-send-document-title',
)}
{title}
</OsdsText>
<OsdsText
level={ODS_TEXT_LEVEL.caption}
Expand All @@ -54,9 +57,7 @@ export const SuccessModal: FunctionComponent<Props> = ({ ovhHomePageHref }) => {
className="block mt-2"
hue={ODS_TEXT_COLOR_HUE._500}
>
{t(
'account-disable-2fa-create-form-success-modal-send-document-description',
)}
{description}
</OsdsText>
</div>
<OsdsButton
Expand All @@ -65,7 +66,7 @@ export const SuccessModal: FunctionComponent<Props> = ({ ovhHomePageHref }) => {
color={ODS_THEME_COLOR_INTENT.primary}
onClick={gotToHomePage}
>
{t('account-disable-2fa-success-modal-back-home')}
{ovhHomePageLabel}
</OsdsButton>
</OsdsModal>
);
Expand Down
34 changes: 34 additions & 0 deletions packages/manager/apps/procedures/src/data/api/rgdp/rgdpApi.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { FileWithError } from '@/components/FileInput/FileInputContainer';
import { GDPRFormValues } from '@/types/gdpr.type';

export type UploadLink = {
link: string;
method: string;
headers: any;
};

export type FormValue = {
fileLinks: UploadLink[];
formData: Omit<
GDPRFormValues,
'idDocumentFront' | 'idDocumentBack' | 'otherDocuments'
>;
files: FileWithError[];
};
export const sendForm = (value: FormValue): Promise<void> =>
new Promise((res) => {
setTimeout(() => {
res();
}, 500);
});

export const getUploadDocumentsLinks = (
numberOfDocuments: number,
): Promise<UploadLink[]> => {
return new Promise((res) => {
setTimeout(() => {
res([]);
console.log('value', numberOfDocuments);
}, 500);
});
};
46 changes: 46 additions & 0 deletions packages/manager/apps/procedures/src/data/hooks/rgdp/useRGDP.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import { useMutation } from '@tanstack/react-query';
import {
sendForm,
UploadLink,
getUploadDocumentsLinks,
FormValue,
} from '@/data/api/rgdp/rgdpApi';

export const useRGDPUploadLinks = ({
onSuccess,
onError,
}: {
onSuccess: (links: UploadLink[]) => void;
onError: () => void;
}) =>
useMutation({
mutationFn: (numberOfDocuments: number) =>
getUploadDocumentsLinks(numberOfDocuments),
onSuccess: (links) => {
onSuccess?.(links);
},
onError: () => {
onError?.();
},
});

export const useRGDPSendForm = ({
onSuccess,
onError,
}: {
onSuccess: () => void;
onError: () => void;
}) =>
useMutation({
mutationFn: (value: FormValue) => {
return sendForm(value);
},
onSuccess: () => {
onSuccess?.();
},
onError: () => {
onError?.();
},
retry: 1,
retryDelay: 3000,
});
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,9 @@ import { FormDocumentFieldList } from './FormDocumentFields/FormDocumentFieldLis
import { LegalFrom } from '@/types/user.type';
import useUser from '@/context/User/useUser';
import { useUploadDocuments } from '@/data/hooks/useDocuments';
import { ConfirmModal } from './Modal/ConfirmModal';
import { SuccessModal } from './Modal/SuccessModal';
import { ovhHomePageHref } from './constants/form.constants';
import { getWebSiteRedirectUrl } from '@/utils/url-builder';
import { ConfirmModal } from '@/components/modals/confirmModal/ConfirmModal.component';
import { SuccessModal } from '@/components/modals/successModal/SuccessModal.component';

const flatFiles = (files: FieldValues) =>
Object.values(files)
Expand Down Expand Up @@ -132,14 +132,36 @@ const FormCreateRequest = () => {

{showConfirmModal && (
<ConfirmModal
title={t(
'account-disable-2fa-create-form-confirm-modal-send-document-title',
)}
descriptionInsure={t(
'account-disable-2fa-create-form-confirm-modal-send-document-description-insure',
)}
descriptionConfirm={t(
'account-disable-2fa-create-form-confirm-modal-send-document-description-confirm',
)}
noButtonLabel={t('account-disable-2fa-confirm-modal-no')}
yesButtonLabel={t('account-disable-2fa-confirm-modal-yes')}
isPending={isPending}
onClose={() => setShowConfirmModal(false)}
onValidate={() => {
mutate({ files });
}}
/>
)}
{showSuccessModal && <SuccessModal ovhHomePageHref={ovhHomePageHref} />}
{showSuccessModal && (
<SuccessModal
ovhHomePageHref={getWebSiteRedirectUrl()}
title={t(
'account-disable-2fa-create-form-success-modal-send-document-title',
)}
description={t(
'account-disable-2fa-create-form-success-modal-send-document-description',
)}
ovhHomePageLabel={t('account-disable-2fa-success-modal-back-home')}
/>
)}
</form>
);
};
Expand Down

This file was deleted.

Loading

0 comments on commit f07ed08

Please sign in to comment.