feat: updated UI to support bookmarked services

Signed-off-by: Mac Deluca <Mac.Deluca@quartech.com>

Author: MacDeluca

app/src/bcsc-theme/features/home/Home.tsx

@@ -46,11 +46,6 @@ const Home: React.FC<HomeProps> = ({ navigation }) => {
     asyncEffect()
   }, [user, logger])
 
-  // replace with API response
-  const savedServices = mockServices.filter((service) =>
-    store.bcsc.bookmarks.some((serviceId) => serviceId === service.id)
-  )
-
   const styles = StyleSheet.create({
     buttonsContainer: {
       padding: Spacing.md,
@@ -82,7 +77,7 @@ const Home: React.FC<HomeProps> = ({ navigation }) => {
             />
             <SectionButton title={mockLogInTitle} description={mockLogInDescription} onPress={handlePairingCodePress} />
           </View>
-          <SavedServices services={savedServices} />
+          <SavedServices />
         </>
       )}
     </TabScreenWrapper>

app/src/bcsc-theme/features/home/components/SavedServices.tsx

@@ -1,8 +1,12 @@
-import { ServiceData } from '@/bcsc-theme/fixtures/services'
-import { ThemedText, useTheme } from '@bifold/core'
+import { ThemedText, useStore, useTheme } from '@bifold/core'
 import React from 'react'
 import { StyleSheet, TouchableOpacity, View } from 'react-native'
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
+import { useFilterServiceClients } from '../../services/hooks/useFilterServiceClients'
+import { BCState } from '@/store'
+import { BCSCRootStackParams, BCSCScreens } from '@/bcsc-theme/types/navigators'
+import { StackNavigationProp } from '@react-navigation/stack'
+import { useNavigation } from '@react-navigation/native'
 
 interface SavedServiceProps {
   title: string
@@ -28,16 +32,21 @@ const SavedService: React.FC<SavedServiceProps> = ({ title, onPress }) => {
     </TouchableOpacity>
   )
 }
-interface SavedServicesProps {
-  services: ServiceData[]
-}
+
+type ServicesNavigationProp = StackNavigationProp<BCSCRootStackParams, BCSCScreens.ServiceLoginScreen>
 
 // to be replaced with API response or translation entries, whichever ends up being the case
 const mockTitle = 'YOUR SAVED SERVICES'
 const mockNoServicesMessage = 'No saved services'
 
-const SavedServices: React.FC<SavedServicesProps> = ({ services = [] }) => {
+const SavedServices: React.FC = () => {
   const { ColorPalette, Spacing } = useTheme()
+  const [store] = useStore<BCState>()
+  const navigation = useNavigation<ServicesNavigationProp>()
+
+  const serviceClients = useFilterServiceClients({
+    clientRefIdsFilter: store.bcsc.bookmarks,
+  })
 
   const styles = StyleSheet.create({
     container: {
@@ -51,6 +60,7 @@ const SavedServices: React.FC<SavedServicesProps> = ({ services = [] }) => {
     },
     bookmarkIcon: {
       marginRight: Spacing.sm,
+      marginLeft: -Spacing.xs,
     },
   })
 
@@ -63,15 +73,25 @@ const SavedServices: React.FC<SavedServicesProps> = ({ services = [] }) => {
         </ThemedText>
       </View>
 
-      {services.length === 0 ? (
+      {serviceClients.length === 0 ? (
         <ThemedText
           variant={'headingFour'}
           style={{ color: ColorPalette.brand.tertiary, fontWeight: 'normal', paddingHorizontal: Spacing.md }}
         >
           {mockNoServicesMessage}
         </ThemedText>
       ) : (
-        services.map((service) => <SavedService key={service.id} title={service.title} onPress={service.onPress} />)
+        serviceClients.map((serviceClient) => (
+          <SavedService
+            key={serviceClient.client_ref_id}
+            title={serviceClient.client_name}
+            onPress={() => {
+              navigation.navigate(BCSCScreens.ServiceLoginScreen, {
+                serviceClient: serviceClient,
+              })
+            }}
+          />
+        ))
       )}
     </View>
   )

app/src/bcsc-theme/features/pairing/ManualPairing.tsx

@@ -57,16 +57,14 @@ const ManualPairing: React.FC<ManualPairingProps> = ({ navigation }) => {
       try {
         setLoading(true)
         logger.info(`Submitting pairing code: ${code}`)
-        const { success } = await pairing.loginByPairingCode(code)
-        if (success) {
-          logger.info('Pairing code submitted successfully.')
-          navigation.navigate(BCSCScreens.PairingConfirmation, {
-            serviceId: mockServices[0].id,
-            serviceName: mockServices[0].title,
-          })
-        } else {
-          throw new Error('unsuccessful response from pairing API')
-        }
+        const serviceClient = await pairing.loginByPairingCode(code)
+
+        logger.info('Pairing code submitted successfully.')
+
+        navigation.navigate(BCSCScreens.PairingConfirmation, {
+          serviceId: serviceClient.client_ref_id,
+          serviceName: serviceClient.client_name,
+        })
       } catch (error) {
         logger.error(`Error submitting pairing code: ${error}`)
         setMessage('Failed to submit pairing code.')