fix(localisation): update localisation display

dataesr · Nov 6, 2023 · aef474c · aef474c
1 parent 98b5e64
commit aef474c
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 37 deletions.
diff --git a/src/components/blocs/localisations/index.js b/src/components/blocs/localisations/index.js
@@ -71,13 +71,13 @@ export default function LocalisationsComponent() {
       <div className="fr-card fr-card--grey fr-card--no-border">
         <div className="fr-card__content ">
           <p className="fr-card__title">
-            <span className="fr-pr-1w">
+            <Text className="fr-pr-1w">
               {address}
-            </span>
-            <CopyButton
-              copyText={address}
-              size="sm"
-            />
+              <CopyButton
+                copyText={address}
+                size="sm"
+              />
+            </Text>
           </p>
           {localisation.phonenumber && (
             <Text className="fr-card__title">
@@ -124,34 +124,41 @@ export default function LocalisationsComponent() {
       </BlocActionButton>
       <BlocContent>
         <Row gutters>
-          {currentLocalisation?.coordinates?.lat && currentLocalisation?.coordinates?.lng && (
-            <Col n="6">
-              <Map
-                lat={currentLocalisation?.coordinates?.lat}
-                lng={currentLocalisation?.coordinates?.lng}
-                markers={[
-                  {
-                    address: `{${currentLocalisation?.address || ''}, ${currentLocalisation?.postalCode || ''} ${currentLocalisation?.locality || ''}, ${currentLocalisation?.country}}`,
-                    latLng: [
-                      currentLocalisation?.coordinates?.lat,
-                      currentLocalisation?.coordinates?.lng,
-                    ],
-                  },
-                ]}
-              />
-            </Col>
-          )}
-          <Col n="6">
+          <Col n="12">
             <Tabs>
               {data && (
                 <Tab
                   className={`fr-card fr-card--xs fr-card--horizontal fr-card--grey fr-card--no-border card-${apiObject}`}
                   label="Adresse actuelle"
                 >
-                  <Row>
-                    <Col>
-                      {currentLocalisation?.country ? renderAddress(currentLocalisation) : null}
+                  <Row gutters>
+                    <Col n="6">
+                      <Map
+                        lat={currentLocalisation?.coordinates?.lat}
+                        lng={currentLocalisation?.coordinates?.lng}
+                        markers={[
+                          {
+                            address: `{${currentLocalisation?.address || ''}, ${currentLocalisation?.postalCode || ''} ${currentLocalisation?.locality || ''}, ${currentLocalisation?.country}}`,
+                            latLng: [
+                              currentLocalisation?.coordinates?.lat,
+                              currentLocalisation?.coordinates?.lng,
+                            ],
+                          },
+                        ]}
+                      />
+                    </Col>
+                    <Col n="6">
+                      {currentLocalisation?.country
+                        ? renderAddress(currentLocalisation) : null}
                     </Col>
+                    {data && (
+                      <Row className="fr-mt-3w">
+                        <Col>
+                          <BlocTitle as="h3" look="h6">Catégories géographiques de l'adresse actuelle</BlocTitle>
+                          <GeographicalTags data={currentLocalisation?.geoCategories} />
+                        </Col>
+                      </Row>
+                    )}
                   </Row>
                 </Tab>
               )}
@@ -195,15 +202,6 @@ export default function LocalisationsComponent() {
             </Tabs>
           </Col>
         </Row>
-        {data && (
-          <Row className="fr-mt-3w">
-            <Col>
-              <BlocTitle as="h3" look="h6">Catégories géographiques de l'adresse actuelle</BlocTitle>
-              <GeographicalTags data={currentLocalisation?.geoCategories} />
-            </Col>
-          </Row>
-        )}
-
       </BlocContent>
       <BlocModal>
         <Modal isOpen={showModal} size="lg" hide={() => setShowModal(false)}>

diff --git a/src/components/forms/localisation/index.js b/src/components/forms/localisation/index.js
@@ -303,7 +303,7 @@ export default function LocalisationForm({ id, data, onDelete, onSave }) {
               onDateChange={(value) => updateForm({ endDate: value })}
             />
           </Col>
-          <Col n="12">
+          <Col n="12" spacing="pb-3w">
             <Checkbox
               label="Date de fin inconnue mais passée"
               onChange={(e) => updateForm({ active: !e.target.checked })}