ordering-ui-react-native 0.16.47 → 0.16.48-release

package/src/components/NotificationSetting/index.tsx

@@ -0,0 +1,85 @@
+import React, { useEffect } from 'react';
+import { useTheme } from 'styled-components/native';
+import { StyleSheet, View } from 'react-native';
+import {
+  openSettings,
+  checkNotifications
+} from 'react-native-permissions';
+import { useLanguage } from 'ordering-components/native'
+import { OBottomPopup, OButton, OText } from '../shared';
+interface NotificationSettingPropsParams {
+  checkNotificationStatus: { open: boolean, checked: boolean };
+  setCheckNotificationStatus: (notificationStatus: any) => void;
+}
+export const NotificationSetting = (props: NotificationSettingPropsParams) => {
+  const { checkNotificationStatus, setCheckNotificationStatus } = props
+  const theme = useTheme();
+  const [, t] = useLanguage();
+
+  const requestLocationPermission = async () => {
+    const notificationStatus = await checkNotifications()
+    if (notificationStatus?.status === 'blocked') {
+      setCheckNotificationStatus({ open: true, checked: false })
+      return
+    }
+    setCheckNotificationStatus({ open: false, checked: true })
+  };
+
+  const callOpenSettings = () => {
+    openSettings().catch(() => console.warn('cannot open settings'));
+    setCheckNotificationStatus({ open: false, checked: true })
+  }
+
+  useEffect(() => {
+    requestLocationPermission()
+  }, [])
+  return (
+    <OBottomPopup
+      open={checkNotificationStatus?.open}
+      onClose={() => setCheckNotificationStatus({ open: false, checked: true })}
+      title={t('ENABLE_NOTIFICATIONS', 'Enable notifications')}
+      titleStyle={{ textAlign: 'center' }}
+      containerStyle={{ borderRadius: 10, borderTopRightRadius: 10, borderTopLeftRadius: 10 }}
+    >
+      <View style={styles.container}>
+        <View style={styles.textContainer}>
+          <OText style={{ textAlign: 'center' }}>
+            {t('ACTIVE_NOTIFICATION_TO_RECEIVE_INFORMATION', 'Activate notifications to receive information about your orders')}
+          </OText>
+        </View>
+        <OButton
+          text={t('ENABLE_NOTIFICATIONS', 'Enable notifications')}
+          bgColor={theme.colors.primary}
+          borderColor={theme.colors.primary}
+          parentStyle={styles.parentStyle}
+          style={styles.button}
+          textStyle={{ color: 'white' }}
+          onClick={() => callOpenSettings()}
+        />
+      </View>
+    </OBottomPopup>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    textAlign: 'center'
+  },
+  textContainer: {
+    width: '100%',
+    paddingHorizontal: 25,
+    paddingBottom: 20
+  },
+  parentStyle: {
+    display: 'flex',
+    width: '70%',
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    marginBottom: 25
+
+  },
+  button: {
+    borderRadius: 5
+  }
+});

package/src/components/OrdersOption/index.tsx

@@ -102,46 +102,71 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
   }
 
   useEffect(() => {
+    const length = orders.filter((order : any) => orderStatus.includes(order.status)).length
+
     setOrdersLength && setOrdersLength({
       ...ordersLength,
-      [activeOrders ? 'activeOrdersLength' : 'previousOrdersLength']: orders.length
+      [activeOrders ? 'activeOrdersLength' : 'previousOrdersLength']: length
     })
-  }, [orders.length])
+    ordersLength[activeOrders ? 'activeOrdersLength' : 'previousOrdersLength'] = length
+  }, [orders])
 
   useEffect(() => {
-    setOrdersFiltered(filterForOrders === 'preorders' ? orders.filter((order : any) => order.status === 13) : orders.filter((order : any) => orderStatus.includes(order.status) && order.status !== 13))
+    setOrdersFiltered(filterForOrders === 'preorders'
+      ? orders.filter((order : any) => order.status === 13)
+      : orders.filter((order : any) => orderStatus.includes(order.status) && order.status !== 13)
+    )
   }, [filterForOrders, orders])
 
   return (
-    <>
+    <View style={{ marginBottom: 20 }}>
       <OptionTitle>
-        {(!activeOrders || (activeOrders && ordersLength.activeOrdersLength > 0) || (ordersLength.previousOrdersLength === 0 && ordersLength.activeOrdersLength === 0)) && !isLoadingFirstRender && (
-          <>
-            <TouchableOpacity onPress={() => setFilterForOrders('active-orders')}>
-              <OText size={16} color={filterForOrders === 'active-orders' ? theme.colors.black : theme.colors.textSecondary} mBottom={10} mRight={10} >
-                {titleContent || (activeOrders
-                  ? t('ACTIVE_ORDERS', 'Active Orders')
-                  : t('PREVIOUS_ORDERS', 'Previous Orders'))}
-              </OText>
-            </TouchableOpacity>
-            {activeOrders && orders.filter((order : any) => order.status === 13)?.length > 0 && (
-            <TouchableOpacity onPress={() => setFilterForOrders('preorders')}>
-              <OText size={16} color={filterForOrders === 'preorders' ? theme.colors.black : theme.colors.textSecondary} mBottom={10} >
-                {t('PREORDERS', 'Preorders')}
-              </OText>
-            </TouchableOpacity>
-            )}
-          </>
+        <TouchableOpacity onPress={() => setFilterForOrders('active-orders')}>
+          <OText size={16} color={filterForOrders === 'active-orders' ? theme.colors.black : theme.colors.textSecondary} mBottom={10} mRight={10} >
+            {titleContent || (activeOrders
+              ? t('ACTIVE_ORDERS', 'Active Orders')
+              : t('PREVIOUS_ORDERS', 'Previous Orders'))}
+          </OText>
+        </TouchableOpacity>
+        {activeOrders && orders.filter((order : any) => order.status === 13)?.length > 0 && (
+          <TouchableOpacity onPress={() => setFilterForOrders('preorders')}>
+            <OText size={16} color={filterForOrders === 'preorders' ? theme.colors.black : theme.colors.textSecondary} mBottom={10} >
+              {t('PREORDERS', 'Preorders')}
+            </OText>
+          </TouchableOpacity>
         )}
       </OptionTitle>
-      {!loading && orders.length === 0 && !isLoadingFirstRender && activeOrders && ordersLength.previousOrdersLength === 0 && ordersLength.activeOrdersLength !== 0 && (
-        <NotFoundSource
-          content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
-          image={imageFails}
-          conditioned
-        />
+      {!loading && !error && orders.length > 0 && !isLoadingFirstRender && (
+        activeOrders ? (
+          <ActiveOrders
+            orders={ordersFiltered}
+            pagination={pagination}
+            loadMoreOrders={loadMoreOrders}
+            reorderLoading={reorderLoading}
+            customArray={customArray}
+            getOrderStatus={getOrderStatus}
+            onNavigationRedirect={onNavigationRedirect}
+            setScreen={setScreen}
+            screen={screen}
+            isPreorders={filterForOrders === 'preorders'}
+            preordersLength={orders.filter((order : any) => order.status === 13)?.length}
+          />
+        ) : (
+          <PreviousOrders
+            reorderLoading={reorderLoading}
+            orders={ordersFiltered}
+            pagination={pagination}
+            loadMoreOrders={loadMoreOrders}
+            getOrderStatus={getOrderStatus}
+            onNavigationRedirect={onNavigationRedirect}
+            handleReorder={handleReorder}
+          />
+        )
       )}
-      {!loading && orders.length === 0 && !isLoadingFirstRender && ordersLength.previousOrdersLength === 0 && (
+      {!loading &&
+        !isLoadingFirstRender &&
+        ordersLength[activeOrders ? 'activeOrdersLength' : 'previousOrdersLength'] === 0 &&
+      (
         <NotFoundSource
           content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
           image={imageFails}
@@ -179,34 +204,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
           )}
         </>
       )}
-      {!loading && !error && orders.length > 0 && !isLoadingFirstRender && (
-        activeOrders ? (
-          <ActiveOrders
-            orders={ordersFiltered}
-            pagination={pagination}
-            loadMoreOrders={loadMoreOrders}
-            reorderLoading={reorderLoading}
-            customArray={customArray}
-            getOrderStatus={getOrderStatus}
-            onNavigationRedirect={onNavigationRedirect}
-            setScreen={setScreen}
-            screen={screen}
-            isPreorders={filterForOrders === 'preorders'}
-            preordersLength={orders.filter((order : any) => order.status === 13)?.length}
-          />
-        ) : (
-          <PreviousOrders
-            reorderLoading={reorderLoading}
-            orders={ordersFiltered}
-            pagination={pagination}
-            loadMoreOrders={loadMoreOrders}
-            getOrderStatus={getOrderStatus}
-            onNavigationRedirect={onNavigationRedirect}
-            handleReorder={handleReorder}
-          />
-        )
-      )}
-    </>
+    </View>
   )
 }