From 3aa79500a64829277d70cd70ec41968c46ce112d Mon Sep 17 00:00:00 2001
From: Ishan Srivastava <ishan.srivastava@navi.com>
Date: Tue, 14 Mar 2023 16:34:29 +0530
Subject: [PATCH] Added changes for showing 'view detail' instead of accordion
 icon (#143)

* added changes for showing 'view detail' instead of accordion

* added changes for showing 'view detail' instead of accordion -fix1
---
 .../addressGeolocation/AddressContainer.tsx   | 68 ++++++++++---------
 1 file changed, 36 insertions(+), 32 deletions(-)

diff --git a/src/screens/addressGeolocation/AddressContainer.tsx b/src/screens/addressGeolocation/AddressContainer.tsx
index 35c749ad..bd8b7acd 100644
--- a/src/screens/addressGeolocation/AddressContainer.tsx
+++ b/src/screens/addressGeolocation/AddressContainer.tsx
@@ -9,14 +9,19 @@ import { AddressL1Details } from '../../types/addressGeolocation.types'
 import AddressItem from './AddressItem'
 
 interface IAddressContainer {
-    addressList?: AddressL1Details[]
+  addressList?: AddressL1Details[]
 }
 
-const AddressContainer: React.FC<IAddressContainer> = ({ addressList }) => {
+const AddressContainer: React.FC<IAddressContainer> = ({addressList}) => {
+  const addressAccordionToggleStyle = [
+    GenericStyles.fontSize12,
+    GenericStyles.fw500,
+    GenericStyles.textBlue
+  ];
   if (!addressList?.length) {
     return (
       <View style={[styles.noAddressContainer, GenericStyles.centerAligned, GenericStyles.columnDirection]}>
-        <HomeIcon />
+        <HomeIcon/>
         <Text style={[styles.textContainer, styles.noAddressText]}>
           No addresses found
         </Text>
@@ -25,35 +30,34 @@ const AddressContainer: React.FC<IAddressContainer> = ({ addressList }) => {
   }
 
   return (
-      <View>
-        { 
-          addressList.map((address: AddressL1Details) => (
-            <Accordion accordionStyle={{ paddingVertical: 28 }} accordionHeader={
-              <AddressItem 
-                  key={address?.addressDTO?.externalReferenceId}
-                  addressItem={address?.addressDTO}
-                  geoLocationList={address.matchingGeoLocations}
-                  showGeolocationBtn={true}
-                />
-            }>
-                <View>
-                  <Text style={[styles.textContainer, styles.accordionDetailHeading]}>
-                    Similar Addresses
-                  </Text>
-                    {
-                      address?.similarAddresses?.map((similarAddress: any) => (
-                        <AddressItem 
-                          key={similarAddress?.addressDTO?.externalReferenceId}
-                          addressItem={similarAddress?.addressDTO} 
-                          containerStyle={styles.card}
-                        />
-                      ))
-                    }
-                </View>
-            </Accordion>
-          ))
-        }
-      </View>
+    <View>
+      {
+        addressList.map((address: AddressL1Details) => (
+          <Accordion accordionStyle={{paddingVertical: 28}}
+                     accordionHeader={<AddressItem key={address?.addressDTO?.externalReferenceId}
+                                                   addressItem={address?.addressDTO}
+                                                   geoLocationList={address.matchingGeoLocations}
+                                                   showGeolocationBtn={true}/>}
+                     customExpandUi={{whenCollapsed: <Text style={addressAccordionToggleStyle}>View Details</Text>, whenExpanded: <Text style={addressAccordionToggleStyle}>Hide Details</Text>}}
+          >
+            <View>
+              <Text style={[styles.textContainer, styles.accordionDetailHeading]}>
+                Similar Addresses
+              </Text>
+              {
+                address?.similarAddresses?.map((similarAddress: any) => (
+                  <AddressItem
+                    key={similarAddress?.addressDTO?.externalReferenceId}
+                    addressItem={similarAddress?.addressDTO}
+                    containerStyle={styles.card}
+                  />
+                ))
+              }
+            </View>
+          </Accordion>
+        ))
+      }
+    </View>
   )
 };