diff --git a/website/src/components_feature/playgroundComponents/PlaygroundConfirmation.tsx b/website/src/components_feature/playgroundComponents/PlaygroundConfirmation.tsx index b108b0bf..db934e91 100644 --- a/website/src/components_feature/playgroundComponents/PlaygroundConfirmation.tsx +++ b/website/src/components_feature/playgroundComponents/PlaygroundConfirmation.tsx @@ -35,8 +35,8 @@ export const PlaygroundConfirmation = () => { step3: { details: { ['0']: '09/03/2022', - ['1']: 'Voilà ma description du problème.', - ['2']: 'Voilà ma question', + ['1']: + 'Voilà ma description du problème. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.\nNemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.\n\n\n Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? \nQuis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Lorem.', }, uploadedFiles: [ { @@ -45,6 +45,12 @@ export const PlaygroundConfirmation = () => { loading: false, origin: FileOrigin.Consumer, }, + { + filename: 'something else.pdf', + id: '8710d67d-d955-444d-b340-333333333333', + loading: false, + origin: FileOrigin.Consumer, + }, ], }, step4: { diff --git a/website/src/components_feature/reportFlow/Confirmation/Confirmation.tsx b/website/src/components_feature/reportFlow/Confirmation/Confirmation.tsx index c484f4af..e26ca14f 100644 --- a/website/src/components_feature/reportFlow/Confirmation/Confirmation.tsx +++ b/website/src/components_feature/reportFlow/Confirmation/Confirmation.tsx @@ -4,7 +4,6 @@ import {NextStepButton} from '@/components_feature/reportFlow/reportFlowStepper/ import {StepNavigation} from '@/components_feature/reportFlow/reportFlowStepper/ReportFlowStepper' import {Animate} from '@/components_simple/Animate' import {Step2Recap} from '@/components_simple/CompanyRecap/Step2Recap' -import {FriendlyHelpText} from '@/components_simple/FriendlyHelpText' import {ScAlert} from '@/components_simple/ScAlert' import {ReportFilesConfirmation} from '@/components_simple/reportFile/ReportFilesConfirmation' import { @@ -23,7 +22,6 @@ import {useI18n} from '@/i18n/I18n' import {Report} from '@/model/Report' import {BuildingStep, buildingReportSteps} from '@/model/ReportStep' import {ApiReport} from '@/model/reportsFromApi' -import Image from 'next/image' import {SocialNetworkRow} from '../../../components_simple/SocialNetworkRow' import {FileOrigin} from '../../../model/UploadedFile' import {getReportInputs} from '../Details/draftReportInputs' @@ -63,17 +61,16 @@ export const ConfirmationInner = ({ return (
-

{m.confirmationTitle}

- - {employeeConsumer ? ( - -

- - ) : ( - -

{isTransmittable ? m.confirmationAlertTransmittable : m.confirmationAlert}

- - )} +
+

+ {employeeConsumer ? ( +

+ +

+ +
+ ) : null} +
{buildingReportSteps.map((step, index) => { @@ -126,43 +123,20 @@ function RenderEachStep({ const detailsParsed = parseReportDetails(draft.step3.details, inputs) switch (step) { case 'BuildingProblem': + const choices = [anomaly.title, ...subcategories.map(_ => _.title)] return ( -
- -
-

{anomaly.title}

-
    - {subcategories.map(_ => ( -
  • - - {_.title} -
    • - ))} -
-
-
- - ) - case 'BuildingDetails': - return ( - -
- {detailsParsed.map(({label, value}) => ( -
-
-
{value}
-
+
    + {choices.map(_ => ( +
  • + + {_} +
    • ))} -
    -
    {m.attachments}
    -
    - -
    -
    -
+ ) + case 'BuildingCompany': const {step2} = draft switch (step2.kind) { @@ -186,11 +160,30 @@ function RenderEachStep({ ) } + case 'BuildingDetails': + return ( + +
+
+ {detailsParsed.map(({label, value}) => ( +
+

{' '} +

{value}

+
+ ))} +
+
+

{m.attachments}

+ +
+
+ + ) case 'BuildingConsumer': const {consumer} = draft.step4 return ( -
    +
    • @@ -215,20 +208,8 @@ function RenderEachStep({ )} {isTransmittable && (
    • - - {m.contactAgreement} : - - {draft.step4.contactAgreement ? ( - - {m.yes.toLowerCase()} - - - ) : ( - - {m.no.toLowerCase()} - - - )} + + {draft.step4.contactAgreement ? m.companyWillHaveYourIdentity : m.companyWillNotHaveYourIdentity}
      • )} diff --git a/website/src/components_feature/reportFlow/Confirmation/ConfirmationStepper.tsx b/website/src/components_feature/reportFlow/Confirmation/ConfirmationStepper.tsx index e085571e..2aa17ff7 100644 --- a/website/src/components_feature/reportFlow/Confirmation/ConfirmationStepper.tsx +++ b/website/src/components_feature/reportFlow/Confirmation/ConfirmationStepper.tsx @@ -21,36 +21,35 @@ function notEmpty(value: TValue | null | undefined): value is TValue { } export const ConfirmationStepper = ({children}: ConfirmationStepperProps) => { return ( - <> +
      {children.filter(notEmpty).map((child, index) => { return React.cloneElement(child, {...child.props, key: index, index}) })} - +
      ) } export const ConfirmationStep = ({title, children, index, goToStep}: ConfirmationStepProps) => { const {m} = useI18n() return ( -
      0 ? 'border-t-[1px] border-solid border-gray-300 border-0 pt-6' : 'pt-2'}`}> -

      -
      - {index! + 1}. - {title} - -
      +
      +

      + + {title} + +

      - {children} +
      {children}
      ) } diff --git a/website/src/components_simple/reportFile/ReportFilesConfirmation.tsx b/website/src/components_simple/reportFile/ReportFilesConfirmation.tsx index 3e025fac..d778a701 100644 --- a/website/src/components_simple/reportFile/ReportFilesConfirmation.tsx +++ b/website/src/components_simple/reportFile/ReportFilesConfirmation.tsx @@ -10,7 +10,7 @@ export interface ReportFilesConfirmationProps { export const ReportFilesConfirmation = ({fileOrigin, files}: ReportFilesConfirmationProps) => { const {m} = useI18n() return files && files.length > 0 ? ( -
        +
          {files .filter(_ => _.origin === fileOrigin) .map(_ => ( diff --git a/website/src/i18n/localization/en.ts b/website/src/i18n/localization/en.ts index 611a5a7f..443d3609 100644 --- a/website/src/i18n/localization/en.ts +++ b/website/src/i18n/localization/en.ts @@ -911,7 +911,8 @@ export const en = { countryPlaceholder: 'Ex : Italy', identification: 'Country identifier', address: 'Address:', - contactAgreement: 'Consent for contact', + companyWillHaveYourIdentity: `The company will have your contact informations.`, + companyWillNotHaveYourIdentity: `The company will not have your contact informations.`, activateMyAccount: 'Activate my account.', createMyAccount: 'Create my account.', invalidEmail: 'Please use a valid email address without accents.', @@ -1220,7 +1221,6 @@ export const en = { consumerAnonymousInformation: `Careful: your specific issue will not be resolved! No refund, return of package, cancellation of purchase or service...`, companyWillKnowYourIdentity: `The company will know your identity`, consumerShareInformation: `You share your contact details with the company.`, - confirmationTitle: `Summary of your issue`, confirmationAlertTransmittable: `Check every detail of your report before sending it to the company and to Fraud Control.`, confirmationAlertEmployeeConsumer: `You have stated that you work in the company you are reporting. Your anonymity will therefore be guaranteed. If this is a mistake, go back to step 1 to revise your choice.`, confirmationAlert: `Check every detail of your report before sending it to Fraud Control.`, diff --git a/website/src/i18n/localization/fr.ts b/website/src/i18n/localization/fr.ts index 354f4032..b687b25c 100644 --- a/website/src/i18n/localization/fr.ts +++ b/website/src/i18n/localization/fr.ts @@ -915,7 +915,8 @@ export const fr = { countryPlaceholder: 'Ex: Italie', identification: 'Identification du pays', address: 'Adresse', - contactAgreement: 'Transmission de ces coordonnées à l’entreprise', + companyWillHaveYourIdentity: `L'entreprise aura vos coordonnées.`, + companyWillNotHaveYourIdentity: `L'entreprise n'aura pas vos coordonnées.`, activateMyAccount: 'Activer mon compte', createMyAccount: 'Créer mon compte', invalidEmail: 'Veuillez utiliser une adresse email valide et sans accents', @@ -1236,8 +1237,7 @@ contacter directement.`, consumerAnonymousInformation: `Attention, votre problème particulier ne pourra pas être résolu ! Pas de remboursement, de renvoi d'un colis, d'annulation d'un achat ou service…`, companyWillKnowYourIdentity: `L'entreprise connaitra votre identité`, consumerShareInformation: `Si vous espérez qu'elle résolve votre problème, c'est le meilleur choix.`, - confirmationTitle: `Récapitulatif de votre signalement`, - confirmationAlertTransmittable: `Vérifiez votre signalement avant de l’envoyer à l'entreprise et à la répression des fraudes.`, + confirmationAlertTransmittable: `Vérifiez votre signalement avant de l’envoyer à l'entreprise et à la répression des fraudes.`, confirmationAlertEmployeeConsumer: `Vous avez déclaré travailler dans l’entreprise que vous signalez. Votre anonymat sera par conséquent garanti. S’il s’agit d’une erreur, revenez à l'étape 1 pour modifier votre choix.`, confirmationAlert: `Vérifiez votre signalement avant de l’envoyer à la répression des fraudes.`, contactAgreementLabel: `Souhaitez-vous partager vos coordonnées avec l'entreprise ?`,