@nuskin/routine-feature 1.0.1 → 2.0.1

package/src/index.tsx

@@ -1,166 +1,217 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   FlatList,
   Image,
   SafeAreaView,
-  SectionList,
   StyleSheet,
   Text,
   TouchableOpacity,
   View,
+  ActivityIndicator,
 } from 'react-native';
-import { createNativeStackNavigator } from '@nuskin/mobile-navigation';
-import { VeraHeader, Logo, HeaderCart } from '@ns/mobile-ui';
-
-const Stack = createNativeStackNavigator();
-
-const SECTIONS = [
-  {
-    title: 'My Routines',
-    horizontal: true,
-    data: [
-      {
-        key: '1',
-        text: 'Card Title Onessssss',
-        uri: 'https://picsum.photos/id/1/200',
-      },
-      {
-        key: '2',
-        text: 'Card Title 2',
-        uri: 'https://picsum.photos/id/10/200',
-      },
-
-      {
-        key: '3',
-        text: 'Card Title 3',
-        uri: 'https://picsum.photos/id/1002/200',
-      },
-    ],
-  },
-  {
-    title: 'Featured Routines',
-    horizontal: true,
-    data: [
-      {
-        key: '1',
-        text: 'Card Title 1',
-        uri: 'https://picsum.photos/id/1011/200',
-      },
-      {
-        key: '2',
-        text: 'Card Title 2',
-        uri: 'https://picsum.photos/id/1012/200',
-      },
-
-      {
-        key: '3',
-        text: 'Card Title 3',
-        uri: 'https://picsum.photos/id/1013/200',
-      },
-    ],
-  },
-  {
-    title: 'Suggested Routines',
-    horizontal: true,
-    data: [
-      {
-        key: '1',
-        text: 'Card Title 1',
-        uri: 'https://picsum.photos/id/1020/200',
-      },
-      {
-        key: '2',
-        text: 'Card Title 2',
-        uri: 'https://picsum.photos/id/1024/200',
-      },
+import { gql, useQuery } from '@apollo/client';
+import { useNavigation } from '@react-navigation/native';
+import {
+  VeraHeader,
+  Logo,
+  HeaderCart,
+  colors,
+  ErrorScreen,
+} from '@ns/mobile-ui';
+import { localization, localizationState } from '@nuskin/utils-module';
+import { useSnapshot } from 'valtio';
+import RoutineDetails from './RoutineDetails';
+import { Logger } from '@nuskin/mobile-logging';
+import { accessibility } from './helpers/Accessibility';
+import { createStackNavigator } from '@react-navigation/stack';
 
-      {
-        key: '3',
-        text: 'Card Title 3',
-        uri: 'https://picsum.photos/id/1027/200',
-      },
-    ],
-  },
-];
+const Stack = createStackNavigator();
+export const FETCH_ROUTINES_PAGE = gql`
+  query fetchAllHomePages($locale: String) {
+    result: all_routine(fallback_locale: true, locale: $locale) {
+      items {
+        products_used_label
+        sort_list_label
+        title
+        routines {
+          products {
+            product_name
+            product_category
+            product_imageConnection {
+              edges {
+                node {
+                  url
+                }
+              }
+            }
+          }
+          products_used_label
+          routine_title
+          routine_subtitle
+          routines_description
+          routine_step_label
+          reference
+          routine_imageConnection {
+            edges {
+              node {
+                url
+              }
+            }
+          }
+          steps {
+            imageConnection {
+              edges {
+                node {
+                  url
+                }
+              }
+            }
+            step_sub_description
+            step_title
+            step_description
+            style
+            image_title
+            image_description
+          }
+        }
+      }
+    }
+  }
+`;
 
 const ListItem = ({ item, index }) => {
+  const navigation = useNavigation();
+  const handleOnPress = () => {
+    navigation.navigate('RoutineDetails' as never, item as never);
+  };
   return (
-    <View style={[styles.item, index === 0 ? { marginLeft: 0 } : {}]}>
-      <Image
-        source={{
-          uri: item.uri,
-        }}
-        style={styles.itemPhoto}
-        resizeMode="cover"
-      />
-      <Text style={styles.itemText}>{item.text}</Text>
+    <View style={styles.itemContainer}>
+      <TouchableOpacity onPress={handleOnPress}>
+        <View>
+          <Image
+            {...accessibility(`list-item-${index}`)}
+            source={{
+              uri: item.routine_imageConnection?.edges[0]?.node?.url,
+            }}
+            style={styles.itemPhoto}
+          />
+        </View>
+        <View style={styles.itemTextContainer}>
+          <View style={styles.itemTitleContainer}>
+            <Text
+              {...accessibility(`list-item-title-${index}`)}
+              style={styles.itemTextTitle}
+            >
+              {item.routine_title}
+            </Text>
+            <Text style={styles.itemTextSteps}>
+              {item.steps.length} {item.routine_step_label}
+            </Text>
+          </View>
+          <View style={styles.listContainer}>
+            <Text style={styles.itemText}>{item.products_used_label}</Text>
+            <FlatList
+              data={item.products}
+              horizontal
+              renderItem={({ item, index }) => (
+                <Image
+                  key={index}
+                  {...accessibility(`list-item-product-${index}`)}
+                  source={{
+                    uri: item.product_imageConnection?.edges[0]?.node?.url,
+                  }}
+                  style={styles.productPhoto}
+                  resizeMode="contain"
+                />
+              )}
+              showsHorizontalScrollIndicator={false}
+            />
+          </View>
+        </View>
+      </TouchableOpacity>
     </View>
   );
 };
 
 const Routines = () => {
-  const handleOnPress = () => {
-    // console.log('onPress', section)
-  };
+  const localizationStore = useSnapshot(localizationState);
+  const [refresh, setRefresh] = useState(false);
+  const locale = localization.getLocalization(
+    localization.LocalizationFormat.CONTENT_STACK
+  );
+
+  const { loading, error, data, refetch } = useQuery(FETCH_ROUTINES_PAGE, {
+    variables: { locale },
+  });
+
+  useEffect(() => {
+    setRefresh(!refresh);
+  }, [localizationStore]);
+
+  const routinesPageData = data ? data.result.items[0] : {};
+  if (error || !routinesPageData) {
+    const errorCode = error?.graphQLErrors[0]?.extensions?.errors[0]?.code;
+
+    return (
+      <SafeAreaView style={styles.container}>
+        <ErrorScreen errorCode={errorCode} refresh={() => refetch()} />
+      </SafeAreaView>
+    );
+  }
+  if (loading) {
+    return (
+      <SafeAreaView
+        style={styles.container}
+        {...accessibility('routine-container-loading')}
+      >
+        <ActivityIndicator
+          size="large"
+          {...accessibility('routine-activity-indicator')}
+        />
+      </SafeAreaView>
+    );
+  }
 
   return (
     <SafeAreaView style={styles.container} testID="routineStack">
       <VeraHeader
         left={<Logo accessibilityLabel="logo" />}
         right={<HeaderCart accessibilityLabel="crt-btn" />}
-        title="Routines"
-        accessibilityLabel="header"
+        title={routinesPageData.title}
+        {...accessibility('routine-activity-indicator')}
       />
-      <View style={{ flex: 1, backgroundColor: 'white' }}>
-        <SectionList
-          stickySectionHeadersEnabled={false}
-          sections={SECTIONS}
-          renderSectionHeader={({ section }) => (
-            <>
-              <Text style={styles.sectionHeader}>{section.title}</Text>
-              <FlatList
-                horizontal
-                data={section.data}
-                renderItem={({ item, index }) => (
-                  <TouchableOpacity onPress={handleOnPress}>
-                    <ListItem item={item} index={index} />
-                  </TouchableOpacity>
-                )}
-                showsHorizontalScrollIndicator={false}
-                contentContainerStyle={{ paddingHorizontal: 15 }}
-              />
-            </>
-          )}
-          renderItem={({ item, section, index }) => {
-            if (section.horizontal) {
-              return null;
-            }
-            return <ListItem item={item} index={index} />;
-          }}
-        />
+      <View style={styles.routinesContainer}>
+        {routinesPageData && (
+          <>
+            <Text style={styles.sortListText}>
+              {routinesPageData.sort_list_label}
+            </Text>
+            <FlatList
+              data={routinesPageData.routines}
+              renderItem={({ item, index }) => (
+                <ListItem index={index} item={item} key={index} />
+              )}
+              showsHorizontalScrollIndicator={false}
+              contentContainerStyle={{ paddingHorizontal: 15 }}
+            />
+          </>
+        )}
       </View>
     </SafeAreaView>
   );
 };
 
-function RoutineDetails() {
-  return (
-    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Text>Routine</Text>
-    </View>
-  );
-}
-
-function RoutineStack(LOG, { navigation }) {
+function RoutineStack() {
+  const navigation = useNavigation();
   useEffect(() => {
     const unsubscribe = navigation.addListener('focus', () => {
-      LOG.info('User navigated to the RoutineStack page.');
+      Logger.info('User navigated to the RoutineStack page.');
     });
     return unsubscribe;
   }, [navigation]);
 
   return (
-    <Stack.Navigator>
+    <Stack.Navigator initialRouteName="Routines">
       <Stack.Screen
         name="Routines"
         component={Routines}
@@ -175,20 +226,25 @@ function RoutineStack(LOG, { navigation }) {
   );
 }
 
-function useRoutine() {
-  //
-}
-
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#F9F9F9',
+    backgroundColor: colors.white,
+  },
+  routinesContainer: {
+    backgroundColor: colors.primaryGray,
+    flex: 1,
+    paddingTop: 10,
+  },
+  listContainer: {
+    flexDirection: 'column',
+    paddingHorizontal: 15,
+    paddingVertical: 10,
   },
   sectionHeader: {
     textTransform: 'uppercase',
     fontWeight: '600',
     fontSize: 14,
-    // color: '#f4f4f4',
     marginTop: 20,
     paddingHorizontal: 15,
     marginBottom: 5,
@@ -197,19 +253,61 @@ const styles = StyleSheet.create({
     margin: 10,
     borderRadius: 14,
   },
+  itemContainer: {
+    backgroundColor: 'transparent',
+    flex: 1,
+    marginBottom: 10,
+  },
+  itemTextContainer: {
+    backgroundColor: colors.white,
+    paddingTop: 20,
+    paddingBottom: 10,
+  },
   itemPhoto: {
-    width: 230,
-    height: 160,
-    borderRadius: 14,
+    width: '100%',
+    minHeight: 160,
+  },
+  productPhoto: {
+    margin: 2,
+    width: 40,
+    height: 40,
+    borderRadius: 50,
+    borderColor: '#EDEDED',
+    borderWidth: 1,
+  },
+  itemTitleContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: 15,
+  },
+  itemTextTitle: {
+    color: colors.primaryBlack,
+    fontWeight: '600',
+    fontSize: 18,
   },
   itemText: {
-    color: 'rgba(255, 255, 255, 1)',
+    color: colors.primaryBlack,
     fontWeight: 'bold',
-    marginTop: 5,
-    position: 'absolute',
-    left: 16,
-    bottom: 16,
+    fontSize: 12,
+    letterSpacing: 0.05,
+    paddingBottom: 5,
+    textTransform: 'uppercase',
+  },
+  itemTextSteps: {
+    color: colors.primaryBlack,
+    fontWeight: 'bold',
+    textTransform: 'uppercase',
+  },
+  sortListText: {
+    color: colors.primaryBlack,
+    fontWeight: 'bold',
+    textTransform: 'uppercase',
+    textAlign: 'right',
+    marginRight: 10,
+    letterSpacing: 0.5,
+    paddingVertical: 10,
+    paddingRight: 20,
   },
 });
 
-export { RoutineStack, useRoutine };
+export { RoutineStack };