From 2bd110e64dd851282bd45ffc6b2333ed8d3ffb1f Mon Sep 17 00:00:00 2001
From: Anubhav Banerjee <banerjeeanubhav03@gmail.com>
Date: Tue, 23 Jan 2024 18:32:20 +0530
Subject: [PATCH] Updated UI/UX of create, and updateOrg pages. Tweaked
 Mutations, and queries

---
 public/locales/en.json                        |  18 ++
 src/GraphQl/Queries/Queries.ts                |   2 +-
 .../LeftDrawerOrg/LeftDrawerOrg.tsx           |   5 +-
 src/components/OrgListCard/OrgListCard.tsx    |  15 +-
 src/components/OrgUpdate/OrgUpdate.tsx        | 165 +++++++++++-------
 src/screens/OrgList/OrganizationModal.tsx     | 154 +++++++++-------
 6 files changed, 220 insertions(+), 139 deletions(-)

diff --git a/public/locales/en.json b/public/locales/en.json
index d1fe7f8fba..9756f55cdb 100644
--- a/public/locales/en.json
+++ b/public/locales/en.json
@@ -128,6 +128,15 @@
     "createSampleOrganization": "Create Sample Organization",
     "description": "Description",
     "location": "Location",
+    "address": "Address",
+    "city": "City",
+    "countryCode": "Country Code",
+    "dependentLocality": "Dependent Locality",
+    "line1": "Line 1",
+    "line2": "Line 2",
+    "postalCode": "Postal Code",
+    "sortingCode": "Sorting code",
+    "state": "State / Province",
     "userRegistrationRequired": "User Registration Required",
     "visibleInSearch": "Visible In Search",
     "displayImage": "Display Image",
@@ -486,6 +495,15 @@
     "name": "Name",
     "description": "Description",
     "location": "Location",
+    "address": "Address",
+    "city": "City",
+    "countryCode": "Country Code",
+    "line1": "Line 1",
+    "line2": "Line 2",
+    "postalCode": "Postal Code",
+    "dependentLocality": "Dependent Locality",
+    "sortingCode": "Sorting code",
+    "state": "State / Province",
     "displayImage": "Display Image",
     "userRegistrationRequired": "User Registration Required",
     "isVisibleInSearch": "Visible in Search",
diff --git a/src/GraphQl/Queries/Queries.ts b/src/GraphQl/Queries/Queries.ts
index f142713378..fa262775a3 100644
--- a/src/GraphQl/Queries/Queries.ts
+++ b/src/GraphQl/Queries/Queries.ts
@@ -262,7 +262,7 @@ export const ORGANIZATIONS_LIST = gql`
       name
       description
       address {
-        city: String
+        city
         countryCode
         dependentLocality
         line1
diff --git a/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx b/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx
index e77b5aaaa5..940f94aef2 100644
--- a/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx
+++ b/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx
@@ -124,7 +124,10 @@ const leftDrawerOrg = ({
               <div className={styles.profileText}>
                 <span className={styles.primaryText}>{organization.name}</span>
                 <span className={styles.secondaryText}>
-                  {organization.address.city}
+                  {organization.address.city}, {organization.address.state}
+                  <br />
+                  {organization.address.postalCode},{' '}
+                  {organization.address.countryCode}
                 </span>
               </div>
             </button>
diff --git a/src/components/OrgListCard/OrgListCard.tsx b/src/components/OrgListCard/OrgListCard.tsx
index 0d4fc2c15e..00509a418e 100644
--- a/src/components/OrgListCard/OrgListCard.tsx
+++ b/src/components/OrgListCard/OrgListCard.tsx
@@ -61,10 +61,17 @@ function orgListCard(props: InterfaceOrgListCardProps): JSX.Element {
               <h4 className={styles.orgName}>{name}</h4>
             </Tooltip>
             {address && address.city && (
-              <h6 className="text-secondary">
-                <LocationOnIcon fontSize="inherit" className="fs-5" />
-                {address.city}
-              </h6>
+              <div>
+                <h6 className="text-secondary">
+                  <LocationOnIcon fontSize="inherit" className="fs-5" />
+                  <span className="address-line">{address.city}, </span>
+                  <span className="address-line">{address.state}</span>
+                  <br />
+                  <LocationOnIcon fontSize="inherit" className="fs-5" />
+                  <span className="address-line">{address.postalCode}, </span>
+                  <span className="address-line">{address.countryCode}</span>
+                </h6>
+              </div>
             )}
             <h6>
               {t('admins')}: <span>{admins.length}</span>
diff --git a/src/components/OrgUpdate/OrgUpdate.tsx b/src/components/OrgUpdate/OrgUpdate.tsx
index a6c484dc3c..acc380d7f4 100644
--- a/src/components/OrgUpdate/OrgUpdate.tsx
+++ b/src/components/OrgUpdate/OrgUpdate.tsx
@@ -109,7 +109,16 @@ function orgUpdate(props: InterfaceOrgUpdateProps): JSX.Element {
           id: orgId,
           name: formState.orgName,
           description: formState.orgDescrip,
-          address: formState.address,
+          address: {
+            city: formState.address.city,
+            countryCode: formState.address.countryCode,
+            dependentLocality: formState.address.dependentLocality,
+            line1: formState.address.line1,
+            line2: formState.address.line2,
+            postalCode: formState.address.postalCode,
+            sortingCode: formState.address.sortingCode,
+            state: formState.address.state,
+          },
           userRegistrationRequired: userRegistrationRequiredChecked,
           visibleInSearch: visiblechecked,
           file: formState.orgImage,
@@ -175,72 +184,94 @@ function orgUpdate(props: InterfaceOrgUpdateProps): JSX.Element {
             }}
           />
           <Form.Label>{t('address')}</Form.Label>
-          <Form.Control
-            className="mb-4"
-            placeholder={t('city')}
-            autoComplete="off"
-            required
-            value={formState.address.city}
-            onChange={(e) => handleInputChange('city', e.target.value)}
-          />
-          <Form.Control
-            className="mb-4"
-            placeholder={t('countryCode')}
-            autoComplete="off"
-            required
-            value={formState.address.countryCode}
-            onChange={(e) => handleInputChange('countryCode', e.target.value)}
-          />
-          <Form.Control
-            className="mb-4"
-            placeholder={t('dependentLocality')}
-            autoComplete="off"
-            required
-            value={formState.address.dependentLocality}
-            onChange={(e) =>
-              handleInputChange('dependentLocality', e.target.value)
-            }
-          />
-          <Form.Control
-            className="mb-4"
-            placeholder={t('line1')}
-            autoComplete="off"
-            required
-            value={formState.address.line1}
-            onChange={(e) => handleInputChange('line1', e.target.value)}
-          />
-          <Form.Control
-            className="mb-4"
-            placeholder={t('line2')}
-            autoComplete="off"
-            required
-            value={formState.address.line2}
-            onChange={(e) => handleInputChange('line2', e.target.value)}
-          />
-          <Form.Control
-            className="mb-4"
-            placeholder={t('postalCode')}
-            autoComplete="off"
-            required
-            value={formState.address.postalCode}
-            onChange={(e) => handleInputChange('postalCode', e.target.value)}
-          />
-          <Form.Control
-            className="mb-4"
-            placeholder={t('sortingCode')}
-            autoComplete="off"
-            required
-            value={formState.address.sortingCode}
-            onChange={(e) => handleInputChange('sortingCode', e.target.value)}
-          />
-          <Form.Control
-            className="mb-4"
-            placeholder={t('state')}
-            autoComplete="off"
-            required
-            value={formState.address.state}
-            onChange={(e) => handleInputChange('state', e.target.value)}
-          />
+          <Row className="mb-1">
+            <Col sm={6} className="mb-3">
+              <Form.Control
+                placeholder={t('countryCode')}
+                autoComplete="off"
+                required
+                value={formState.address.countryCode}
+                onChange={(e) =>
+                  handleInputChange('countryCode', e.target.value)
+                }
+              />
+            </Col>
+            <Col sm={6} className="mb-3">
+              <Form.Control
+                placeholder={t('city')}
+                autoComplete="off"
+                required
+                value={formState.address.city}
+                onChange={(e) => handleInputChange('city', e.target.value)}
+              />
+            </Col>
+          </Row>
+          <Row className="mb-1">
+            <Col sm={6} className="mb-3">
+              <Form.Control
+                placeholder={t('state')}
+                autoComplete="off"
+                required
+                value={formState.address.state}
+                onChange={(e) => handleInputChange('state', e.target.value)}
+              />
+            </Col>
+            <Col sm={6} className="mb-3">
+              <Form.Control
+                placeholder={t('dependentLocality')}
+                autoComplete="off"
+                required
+                value={formState.address.dependentLocality}
+                onChange={(e) =>
+                  handleInputChange('dependentLocality', e.target.value)
+                }
+              />
+            </Col>
+          </Row>
+          <Row className="mb-3">
+            <Col sm={6} className="mb-1">
+              <Form.Control
+                placeholder={t('line1')}
+                autoComplete="off"
+                required
+                value={formState.address.line1}
+                onChange={(e) => handleInputChange('line1', e.target.value)}
+              />
+            </Col>
+            <Col sm={6} className="mb-1">
+              <Form.Control
+                placeholder={t('line2')}
+                autoComplete="off"
+                required
+                value={formState.address.line2}
+                onChange={(e) => handleInputChange('line2', e.target.value)}
+              />
+            </Col>
+          </Row>
+          <Row className="mb-1">
+            <Col sm={6} className="mb-1">
+              <Form.Control
+                placeholder={t('postalCode')}
+                autoComplete="off"
+                required
+                value={formState.address.postalCode}
+                onChange={(e) =>
+                  handleInputChange('postalCode', e.target.value)
+                }
+              />
+            </Col>
+            <Col sm={6} className="mb-1">
+              <Form.Control
+                placeholder={t('sortingCode')}
+                autoComplete="off"
+                required
+                value={formState.address.sortingCode}
+                onChange={(e) =>
+                  handleInputChange('sortingCode', e.target.value)
+                }
+              />
+            </Col>
+          </Row>
           <Row>
             <Col sm={6} className="d-flex mb-3">
               <Form.Label className="me-3">
diff --git a/src/screens/OrgList/OrganizationModal.tsx b/src/screens/OrgList/OrganizationModal.tsx
index bcfd600677..4918543dda 100644
--- a/src/screens/OrgList/OrganizationModal.tsx
+++ b/src/screens/OrgList/OrganizationModal.tsx
@@ -132,72 +132,94 @@ const OrganizationModal: React.FC<InterfaceOrganizationModalProps> = ({
             }}
           />
           <Form.Label>{t('address')}</Form.Label>
-          <Form.Control
-            className="mb-4"
-            placeholder={t('city')}
-            autoComplete="off"
-            required
-            value={formState.address.city}
-            onChange={(e) => handleInputChange('city', e.target.value)}
-          />
-          <Form.Control
-            className="mb-4"
-            placeholder={t('countryCode')}
-            autoComplete="off"
-            required
-            value={formState.address.countryCode}
-            onChange={(e) => handleInputChange('countryCode', e.target.value)}
-          />
-          <Form.Control
-            className="mb-4"
-            placeholder={t('dependentLocality')}
-            autoComplete="off"
-            required
-            value={formState.address.dependentLocality}
-            onChange={(e) =>
-              handleInputChange('dependentLocality', e.target.value)
-            }
-          />
-          <Form.Control
-            className="mb-4"
-            placeholder={t('line1')}
-            autoComplete="off"
-            required
-            value={formState.address.line1}
-            onChange={(e) => handleInputChange('line1', e.target.value)}
-          />
-          <Form.Control
-            className="mb-4"
-            placeholder={t('line2')}
-            autoComplete="off"
-            required
-            value={formState.address.line2}
-            onChange={(e) => handleInputChange('line2', e.target.value)}
-          />
-          <Form.Control
-            className="mb-4"
-            placeholder={t('postalCode')}
-            autoComplete="off"
-            required
-            value={formState.address.postalCode}
-            onChange={(e) => handleInputChange('postalCode', e.target.value)}
-          />
-          <Form.Control
-            className="mb-4"
-            placeholder={t('sortingCode')}
-            autoComplete="off"
-            required
-            value={formState.address.sortingCode}
-            onChange={(e) => handleInputChange('sortingCode', e.target.value)}
-          />
-          <Form.Control
-            className="mb-4"
-            placeholder={t('state')}
-            autoComplete="off"
-            required
-            value={formState.address.state}
-            onChange={(e) => handleInputChange('state', e.target.value)}
-          />
+          <Row className="mb-1">
+            <Col sm={6} className="mb-3">
+              <Form.Control
+                placeholder={t('countryCode')}
+                autoComplete="off"
+                required
+                value={formState.address.countryCode}
+                onChange={(e) =>
+                  handleInputChange('countryCode', e.target.value)
+                }
+              />
+            </Col>
+            <Col sm={6} className="mb-3">
+              <Form.Control
+                placeholder={t('city')}
+                autoComplete="off"
+                required
+                value={formState.address.city}
+                onChange={(e) => handleInputChange('city', e.target.value)}
+              />
+            </Col>
+          </Row>
+          <Row className="mb-1">
+            <Col sm={6} className="mb-3">
+              <Form.Control
+                placeholder={t('state')}
+                autoComplete="off"
+                required
+                value={formState.address.state}
+                onChange={(e) => handleInputChange('state', e.target.value)}
+              />
+            </Col>
+            <Col sm={6} className="mb-3">
+              <Form.Control
+                placeholder={t('dependentLocality')}
+                autoComplete="off"
+                required
+                value={formState.address.dependentLocality}
+                onChange={(e) =>
+                  handleInputChange('dependentLocality', e.target.value)
+                }
+              />
+            </Col>
+          </Row>
+          <Row className="mb-3">
+            <Col sm={6} className="mb-1">
+              <Form.Control
+                placeholder={t('line1')}
+                autoComplete="off"
+                required
+                value={formState.address.line1}
+                onChange={(e) => handleInputChange('line1', e.target.value)}
+              />
+            </Col>
+            <Col sm={6} className="mb-1">
+              <Form.Control
+                placeholder={t('line2')}
+                autoComplete="off"
+                required
+                value={formState.address.line2}
+                onChange={(e) => handleInputChange('line2', e.target.value)}
+              />
+            </Col>
+          </Row>
+          <Row className="mb-1">
+            <Col sm={6} className="mb-1">
+              <Form.Control
+                placeholder={t('postalCode')}
+                autoComplete="off"
+                required
+                value={formState.address.postalCode}
+                onChange={(e) =>
+                  handleInputChange('postalCode', e.target.value)
+                }
+              />
+            </Col>
+            <Col sm={6} className="mb-1">
+              <Form.Control
+                placeholder={t('sortingCode')}
+                autoComplete="off"
+                required
+                value={formState.address.sortingCode}
+                onChange={(e) =>
+                  handleInputChange('sortingCode', e.target.value)
+                }
+              />
+            </Col>
+          </Row>
           <Row className="mb-3">
             <Col>
               <Form.Label htmlFor="userRegistrationRequired">