TRELLO-2919 improve UI confirmation step

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: {

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 (
     <Animate autoScrollTo={true}>
       <div>
-        <h2 className="fr-h4">{m.confirmationTitle}</h2>
-
-        {employeeConsumer ? (
-          <ScAlert type="warning">
-            <p className="mb-0" dangerouslySetInnerHTML={{__html: m.confirmationAlertEmployeeConsumer}}></p>
-          </ScAlert>
-        ) : (
-          <FriendlyHelpText>
-            <p className="mb-0">{isTransmittable ? m.confirmationAlertTransmittable : m.confirmationAlert}</p>
-          </FriendlyHelpText>
-        )}
+        <div className="mb-4 space-y-2">
+          <p dangerouslySetInnerHTML={{__html: isTransmittable ? m.confirmationAlertTransmittable : m.confirmationAlert}} />
+          {employeeConsumer ? (
+            <div>
+              <ScAlert type="warning">
+                <p className="mb-0" dangerouslySetInnerHTML={{__html: m.confirmationAlertEmployeeConsumer}}></p>
+              </ScAlert>
+            </div>
+          ) : null}
+        </div>
 
         <ConfirmationStepper>
           {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 (
         <ConfirmationStep title={m.step_problem} {...{goToStep, index}}>
-          <div className="flex">
-            <Image className="mr-4" width={72} height={72} src={`/image/pictos/${anomaly.img}.png`} alt="" />
-            <div>
-              <h3 className="fr-h6 !mb-2 !text-gray-500">{anomaly.title}</h3>
-              <ul className="pl-0 list-none">
-                {subcategories.map(_ => (
-                  <li key={_.title} className="text-gray-500">
-                    <i className="ri-corner-down-right-line mr-2 " />
-                    {_.title}
-                  </li>
-                ))}
-              </ul>
-            </div>
-          </div>
-        </ConfirmationStep>
-      )
-    case 'BuildingDetails':
-      return (
-        <ConfirmationStep title={m.step_description} {...{goToStep, index}}>
-          <dl>
-            {detailsParsed.map(({label, value}) => (
-              <div key={label} className="mb-2">
-                <dt className="font-medium" dangerouslySetInnerHTML={{__html: label}} />
-                <dd className="text-schint">{value}</dd>
-              </div>
+          <ul className="pl-0 list-none">
+            {choices.map(_ => (
+              <li key={_} className="flex gap-2">
+                <i className="ri-corner-down-right-line" />
+                {_}
+              </li>
             ))}
-            <div className="mb-2">
-              <dt className="font-medium mb-1">{m.attachments}</dt>
-              <dd>
-                <ReportFilesConfirmation fileOrigin={FileOrigin.Consumer} files={draft.step3.uploadedFiles} />
-              </dd>
-            </div>
-          </dl>
+          </ul>
         </ConfirmationStep>
       )
+
     case 'BuildingCompany':
       const {step2} = draft
       switch (step2.kind) {
@@ -186,11 +160,30 @@ function RenderEachStep({
             </ConfirmationStep>
           )
       }
+    case 'BuildingDetails':
+      return (
+        <ConfirmationStep title={m.step_description} {...{goToStep, index}}>
+          <div className="space-y-4">
+            <div>
+              {detailsParsed.map(({label, value}) => (
+                <div className="mb-2" key={label}>
+                  <p className="mb-0 font-bold text-sm" dangerouslySetInnerHTML={{__html: label}} />{' '}
+                  <p className="mb-0 whitespace-pre-line ">{value}</p>
+                </div>
+              ))}
+            </div>
+            <div>
+              <p className="mb-0 font-bold text-sm">{m.attachments}</p>
+              <ReportFilesConfirmation fileOrigin={FileOrigin.Consumer} files={draft.step3.uploadedFiles} />
+            </div>
+          </div>
+        </ConfirmationStep>
+      )
     case 'BuildingConsumer':
       const {consumer} = draft.step4
       return (
         <ConfirmationStep title={m.step_consumer} {...{goToStep, index}}>
-          <ul className="list-none">
+          <ul className="list-none p-0">
             <li className="p-0 flex gap-2">
               <div className="flex gap-2">
                 <i className="ri-account-box-line text-gray-400" />
@@ -215,20 +208,8 @@ function RenderEachStep({
             )}
             {isTransmittable && (
               <li className="p-0 flex gap-2">
-                <i className="ri-lock-line text-gray-400" />
-                <span>{m.contactAgreement} : </span>
-                <span className="font-bold">
-                  {draft.step4.contactAgreement ? (
-                    <span className=" text-green-700">
-                      {m.yes.toLowerCase()}
-                      <i className="ri-checkbox-circle-fill ml-1" />
-                    </span>
-                  ) : (
-                    <span className=" text-red-700">
-                      {m.no.toLowerCase()}
-                      <i className="ri-close-circle-fill ml-1" />
-                    </span>
-                  )}
+                <span className={`font-bold ${draft.step4.contactAgreement ? 'text-scgreensuccess' : 'text-scorangewarn'}`}>
+                  {draft.step4.contactAgreement ? m.companyWillHaveYourIdentity : m.companyWillNotHaveYourIdentity}
                 </span>
               </li>
             )}

website/src/components_feature/reportFlow/Confirmation/ConfirmationStepper.tsx

@@ -21,36 +21,35 @@ function notEmpty<TValue>(value: TValue | null | undefined): value is TValue {
 }
 export const ConfirmationStepper = ({children}: ConfirmationStepperProps) => {
   return (
-    <>
+    <div className="space-y-8">
       {children.filter(notEmpty).map((child, index) => {
         return React.cloneElement(child, {...child.props, key: index, index})
       })}
-    </>
+    </div>
   )
 }
 
 export const ConfirmationStep = ({title, children, index, goToStep}: ConfirmationStepProps) => {
   const {m} = useI18n()
   return (
-    <div className={` mb-4 ${index > 0 ? 'border-t-[1px] border-solid border-gray-300 border-0 pt-6' : 'pt-2'}`}>
-      <h2 className="fr-h6">
-        <div className="flex items-center">
-          <span className="text-schint mr-2">{index! + 1}.</span>
-          <span>{title}</span>
-          <Button
-            className="ml-4"
-            size="small"
-            priority="secondary"
-            iconId={'fr-icon-pencil-line'}
-            onClick={() => {
-              goToStep(indexToStep(index! + 1))
-            }}
-          >
-            {m.edit}
-          </Button>
-        </div>
+    <div className="">
+      <h2 className="fr-h4 !mb-2 md:w-fit bg-sclightpurple flex gap-4 items-end md:justify-start justify-between p-1 md:flex-row-reverse md:pr-3">
+        <span>
+          <span className="text-scpurplepop">{title}</span>
+        </span>
+        <Button
+          className="!bg-white"
+          size="small"
+          priority="secondary"
+          iconId={'fr-icon-pencil-line'}
+          onClick={() => {
+            goToStep(indexToStep(index! + 1))
+          }}
+        >
+          {m.edit}
+        </Button>
       </h2>
-      {children}
+      <div className="md:pl-4">{children}</div>
     </div>
   )
 }

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 ? (
-    <ul className="flex flex-wrap items-center mt-4 list-none gap-4 p-0">
+    <ul className="flex flex-wrap items-center m-0 list-none gap-4 p-0">
       {files
         .filter(_ => _.origin === fileOrigin)
         .map(_ => (

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. <b>Your anonymity will therefore be guaranteed</b>. 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.`,

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: `<b>Vérifiez votre signalement</b> avant de l’envoyer à l'entreprise et à la répression des fraudes.`,
     confirmationAlertEmployeeConsumer: `Vous avez déclaré travailler dans l’entreprise que vous signalez. <b>Votre anonymat sera par conséquent garanti</b>. 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 ?`,