ordering-ui-react-native 0.16.67 → 0.16.70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.16.67",
+  "version": "0.16.70",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/src/components/ActiveOrders/index.tsx

@@ -48,75 +48,73 @@ export const ActiveOrders = (props: ActiveOrdersParams) => {
   }, [orders.length])
 
   const Order = ({ order }: { order: any }) => (
-    <React.Fragment>
-      <Card
-        isMiniCard={configs?.google_maps_api_key?.value}
-        onPress={() => handleClickCard(order?.uuid)}
-      >
-        {!!(configs?.google_maps_api_key?.value) && (
-          <Map>
+    <Card
+      isMiniCard={configs?.google_maps_api_key?.value}
+      onPress={() => handleClickCard(order?.uuid)}
+    >
+      {!!(configs?.google_maps_api_key?.value) && (
+        <Map>
+          <OIcon
+            url={getGoogleMapImage(order?.business?.location, configs?.google_maps_api_key?.value)}
+            height={100}
+            width={320}
+            style={{resizeMode: 'cover', borderTopRightRadius: 24, borderTopLeftRadius: 24}}
+          />
+        </Map>
+      )}
+      <Information>
+        {!!order.business?.logo && (
+          <Logo>
             <OIcon
-              url={getGoogleMapImage(order?.business?.location, configs?.google_maps_api_key?.value)}
-              height={100}
-              width={320}
-              style={{resizeMode: 'cover', borderTopRightRadius: 24, borderTopLeftRadius: 24}}
+              url={optimizeImage(order.business?.logo, 'h_300,c_limit')}
+              style={styles.logo}
             />
-          </Map>
+          </Logo>
         )}
-        <Information>
-          {!!order.business?.logo && (
-            <Logo>
-              <OIcon
-                url={optimizeImage(order.business?.logo, 'h_300,c_limit')}
-                style={styles.logo}
-              />
-            </Logo>
-          )}
-          <OrderInformation>
-            <BusinessInformation style={{ width: '60%' }}>
-              <GestureHandlerScrollView
-                  showsVerticalScrollIndicator={false}
-                  showsHorizontalScrollIndicator={false}
-                  horizontal
-              >
-                <TouchableWithoutFeedback>
-                  <View>
-                    <OText
-                      size={16}
-                      numberOfLines={1}
-                      ellipsizeMode='tail'
-                    >
-                      {order.business?.name}
-                    </OText>
-                  </View>
-                </TouchableWithoutFeedback>
-              </GestureHandlerScrollView>
-              <GestureHandlerScrollView
+        <OrderInformation>
+          <BusinessInformation style={{ width: '60%' }}>
+            <GestureHandlerScrollView
                 showsVerticalScrollIndicator={false}
                 showsHorizontalScrollIndicator={false}
                 horizontal
-              >
-                <TouchableWithoutFeedback>
-                  <View style={styles.orderNumber}>
-                    <OText size={12} space color={theme.colors.textSecondary}>{t('ORDER_NUMBER', 'Order No.')}</OText>
-                    <OText size={12} color={theme.colors.textSecondary}>{order.id}</OText>
-                  </View>
-                </TouchableWithoutFeedback>
-              </GestureHandlerScrollView>
-              <OText size={12} color={theme.colors.textSecondary}>{order?.delivery_datetime_utc
-                ? parseDate(order?.delivery_datetime_utc)
-                : parseDate(order?.delivery_datetime, { utc: false })}</OText>
-            </BusinessInformation>
-            <Price>
-              <OText size={16}>{parsePrice(order?.summary?.total || order?.total)}</OText>
-              {order?.status !== 0 && (
-                <OText color={theme.colors.primary} size={12} numberOfLines={2}>{getOrderStatus(order.status)?.value}</OText>
-              )}
-            </Price>
-          </OrderInformation>
-        </Information>
-      </Card>
-    </React.Fragment>
+            >
+              <TouchableWithoutFeedback>
+                <View>
+                  <OText
+                    size={16}
+                    numberOfLines={1}
+                    ellipsizeMode='tail'
+                  >
+                    {order.business?.name}
+                  </OText>
+                </View>
+              </TouchableWithoutFeedback>
+            </GestureHandlerScrollView>
+            <GestureHandlerScrollView
+              showsVerticalScrollIndicator={false}
+              showsHorizontalScrollIndicator={false}
+              horizontal
+            >
+              <TouchableWithoutFeedback>
+                <View style={styles.orderNumber}>
+                  <OText size={12} space color={theme.colors.textSecondary}>{t('ORDER_NUMBER', 'Order No.')}</OText>
+                  <OText size={12} color={theme.colors.textSecondary}>{order.id}</OText>
+                </View>
+              </TouchableWithoutFeedback>
+            </GestureHandlerScrollView>
+            <OText size={12} color={theme.colors.textSecondary}>{order?.delivery_datetime_utc
+              ? parseDate(order?.delivery_datetime_utc)
+              : parseDate(order?.delivery_datetime, { utc: false })}</OText>
+          </BusinessInformation>
+          <Price>
+            <OText size={16}>{parsePrice(order?.summary?.total || order?.total)}</OText>
+            {order?.status !== 0 && (
+              <OText color={theme.colors.primary} size={12} numberOfLines={2}>{getOrderStatus(order.status)?.value}</OText>
+            )}
+          </Price>
+        </OrderInformation>
+      </Information>
+    </Card>
   )
 
   return (

package/src/components/ActiveOrders/styles.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components/native'
 
 export const ActiveOrdersContainer = styled.ScrollView`
   margin-bottom: 20px;
-  height: ${({ isMiniCards }: { isMiniCards: boolean }) => !isMiniCards ? '150px' : '220px'};
+  height: ${({ isMiniCards }: { isMiniCards: boolean }) => !isMiniCards ? '150px' : '450px'};
   max-height: ${({ isMiniCards }: { isMiniCards: boolean }) => !isMiniCards ? '150px' : '220px'};
 `
 

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/shared/OBottomPopup.tsx

@@ -4,14 +4,18 @@ const deviceHeight = Dimensions.get('window').height
 
 interface Props {
   open: boolean;
+  containerStyle: any;
   title?: string;
+  titleStyle?: any;
   children?: any;
   onClose?: any;
 }
 const OBottomPopup = (props: Props) => {
   const {
     open,
+    containerStyle,
     title,
+    titleStyle,
     onClose,
     children
   } = props
@@ -29,9 +33,9 @@ const OBottomPopup = (props: Props) => {
         >
           <View style={styles.touchableOutsideStyle} />
         </TouchableWithoutFeedback>
-        <View style={styles.bottomContainer}>
+        <View style={{ ...styles.bottomContainer, ...containerStyle }}>
           <View>
-            <Text style={styles.titleStyle}>
+            <Text style={{ ...styles.titleStyle, ...titleStyle }}>
               {title}
             </Text>
             {children}

package/src/index.tsx

@@ -36,6 +36,7 @@ import { LogoutButton } from './components/LogoutButton';
 import { Messages } from './components/Messages';
 import { MomentOption } from './components/MomentOption';
 import NavBar from './components/NavBar';
+import { NotificationSetting } from './components/NotificationSetting'
 import { NotFoundSource } from './components/NotFoundSource';
 import { OrderCreating } from './components/OrderCreating';
 import { OrderDetails } from './components/OrderDetails';
@@ -136,6 +137,7 @@ export {
   Messages,
   MomentOption,
   NavBar,
+  NotificationSetting,
   NotFoundSource,
   OrderCreating,
   OrderDetails,

package/themes/business/src/components/OrdersListManager/index.tsx

@@ -6,7 +6,7 @@ import FontistoIcon from 'react-native-vector-icons/Fontisto'
 import FeatherIcon from 'react-native-vector-icons/Feather';
 import SelectDropdown from 'react-native-select-dropdown'
 import { useTheme } from 'styled-components/native';
-
+import { NotificationSetting } from '../../../../../src/components/NotificationSetting'
 import {
   FiltersTab,
   TabsContainer,
@@ -611,7 +611,7 @@ const OrdersListManagerUI = (props: OrdersOptionParams) => {
         </LeftSide>
 
         <RightSide style={{ paddingBottom: 110, paddingHorizontal: 20 }}>
-          {currentOrderSelected &&  (
+          {currentOrderSelected && (
             <OrderDetailsBusiness {...props.orderDetailsProps} order={currentOrderSelected} isCustomView />
           )}
         </RightSide>
@@ -756,6 +756,7 @@ const OrdersListManagerUI = (props: OrdersOptionParams) => {
 
 export const OrdersListManager = (props: OrdersOptionParams) => {
   const [, t] = useLanguage();
+  const [checkNotificationStatus, setCheckNotificationStatus] = useState({ open: false, checked: false })
   const ordersProps = {
     ...props,
     UIComponent: OrdersListManagerUI,
@@ -870,5 +871,11 @@ export const OrdersListManager = (props: OrdersOptionParams) => {
     ]
   };
 
-  return <OrderListGroups {...ordersProps} />;
+  return (<>
+    <OrderListGroups {...ordersProps} />
+    {props?.checkNotification && (
+      <NotificationSetting checkNotificationStatus={checkNotificationStatus}
+        setCheckNotificationStatus={setCheckNotificationStatus} />
+    )}
+  </>);
 };

package/themes/business/src/components/OrdersOption/index.tsx

@@ -7,6 +7,7 @@ import FeatherIcon from 'react-native-vector-icons/Feather';
 import FontistoIcon from 'react-native-vector-icons/Fontisto'
 import { useTheme } from 'styled-components/native';
 import { DeviceOrientationMethods } from '../../../../../src/hooks/DeviceOrientation'
+import { NotificationSetting } from '../../../../../src/components/NotificationSetting'
 import { NewOrderNotification } from '../NewOrderNotification';
 
 import { OText, OButton, OModal, OIconButton, OInput, OIcon } from '../shared';
@@ -726,11 +727,11 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
         </ScrollView>
       </View>
       {/* </GestureRecognizer> */}
-                
+
       {isBusinessApp && (
         <NewOrderNotification isBusinessApp={isBusinessApp} />
       )}
-      
+
       {(openSearchModal || openSLASettingModal) && (
         <OModal open={openSearchModal || openSLASettingModal} entireModal customClose>
           <ModalContainer
@@ -935,6 +936,7 @@ export const OrdersOption = (props: OrdersOptionParams) => {
   const [, t] = useLanguage();
   const [configState] = useConfig()
   const theme = useTheme()
+  const [checkNotificationStatus, setCheckNotificationStatus] = useState({ open: false, checked: false })
   const ordersProps = {
     ...props,
     UIComponent: OrdersOptionUI,
@@ -1049,5 +1051,11 @@ export const OrdersOption = (props: OrdersOptionParams) => {
     ]
   };
 
-  return <OrderListGroups {...ordersProps} />;
+  return (<>
+    <OrderListGroups {...ordersProps} />
+    {props?.checkNotification && (
+      <NotificationSetting checkNotificationStatus={checkNotificationStatus}
+        setCheckNotificationStatus={setCheckNotificationStatus} />
+    )}
+  </>);
 };

package/themes/business/src/types/index.tsx

@@ -21,8 +21,8 @@ export interface LoginParams {
   allowedLevels?: any;
   useRootPoint?: any;
   notificationState?: any;
-	handleReCaptcha?: any;
-	enableReCaptcha?: any;
+  handleReCaptcha?: any;
+  enableReCaptcha?: any;
 }
 export interface ProfileParams {
   navigation?: any;
@@ -266,7 +266,7 @@ export interface OrdersOptionParams {
   titleContent?: string;
   customArray?: Array<any>;
   loadMoreOrders?: () => {};
-  loadOrders?: ({}: any) => {};
+  loadOrders?: ({ }: any) => {};
   messages?: any;
   setMessages?: () => {};
   loadMessages?: () => {};
@@ -280,7 +280,7 @@ export interface OrdersOptionParams {
   ordersGroup?: any;
   setOrdersGroup?: any;
   setCurrentFilters?: any;
-  onFiltered?: ({}: any) => {};
+  onFiltered?: ({ }: any) => {};
   filtered?: any;
   handleClickOrder?: any;
   orderGroupStatusCustom?: {
@@ -291,10 +291,11 @@ export interface OrdersOptionParams {
   };
   isBusinessApp?: boolean;
   handleClickLogisticOrder: (status: number, orderId: number) => void,
-  logisticOrders: {orders: Array<any>, loading: boolean, error: Array<string> | string},
+  logisticOrders: { orders: Array<any>, loading: boolean, error: Array<string> | string },
   loadLogisticOrders: () => void;
   isLogisticActivated?: boolean;
   isAlsea?: boolean;
+  checkNotification?: boolean;
 }
 export interface ActiveOrdersParams {
   orders?: any;
@@ -563,13 +564,13 @@ export interface AcceptOrRejectOrderParams {
 }
 
 export interface MapViewParams {
-  onNavigationRedirect: (page : string, params ?: any) => void,
+  onNavigationRedirect: (page: string, params?: any) => void,
   getBusinessLocations: () => void,
   isLoadingBusinessMarkers?: boolean,
   markerGroups: Array<any>,
   customerMarkerGroups: Array<any>,
   alertState: { open: boolean, content: Array<string>, key?: string | null },
-  setAlertState: ({open, content, key} : { open: boolean, content: Array<string>, key?: string | null }) => void
+  setAlertState: ({ open, content, key }: { open: boolean, content: Array<string>, key?: string | null }) => void
 }
 
 export interface ReviewCustomerParams {

package/themes/original/index.tsx

@@ -59,6 +59,7 @@ import { PaymentOptions } from './src/components/PaymentOptions';
 import { DriverTips } from './src/components/DriverTips';
 import { UserDetails } from './src/components/UserDetails';
 import { OrderSummary } from './src/components/OrderSummary';
+import { OrderItAgain } from './src/components/OrderItAgain';
 import { CartStoresListing } from './src/components/CartStoresListing';
 import { PaymentOptionsWebView } from '../../src/components/PaymentOptionsWebView';
 import { GoogleMap } from './src/components/GoogleMap';
@@ -219,6 +220,7 @@ export {
 	DriverTips,
 	UserDetails,
 	OrderSummary,
+	OrderItAgain,
 	CartStoresListing,
 	PaymentOptionsWebView,
 	GoogleMap,

package/themes/original/src/components/BusinessBasicInformation/index.tsx

@@ -48,7 +48,7 @@ export const BusinessBasicInformation = (
 	const [businessReviewsObtained, setBusinessReviewsObtainedbtained] = useState(false)
 	const isChewLayout = orderingTheme?.theme?.business_view?.components?.header?.components?.layout?.type === 'chew'
 	const showLogo = !orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.logo?.hidden
-	
+
 	const styles = StyleSheet.create({
 		businesInfoheaderStyle: {
 			height: 150,
@@ -247,7 +247,7 @@ export const BusinessBasicInformation = (
 						)}
 						{isChewLayout && (
 							<TouchableOpacity onPress={() => handleClickBusinessInformation()}>
-								<OText style={{textDecorationColor: theme.colors.black, textDecorationLine: 'underline'}}>
+								<OText style={{ textDecorationColor: theme.colors.black, textDecorationLine: 'underline' }}>
 									{t('SEE_MORE_DESCRIPTION', 'See more')}
 								</OText>
 							</TouchableOpacity>
@@ -298,22 +298,14 @@ export const BusinessBasicInformation = (
 			<BusinessInfo style={styles.businessInfo}>
 				{showLogo && (
 					<BusinessLogo isChewLayout={isChewLayout}>
-						{loading ? (
-							<View>
-								<Placeholder Animation={Fade}>
-									<PlaceholderLine height={50} width={20} />
-								</Placeholder>
-							</View>
-						) : (
-							!isBusinessInfoShow && (
-								<OIcon
-									url={
-										logo ||
-										optimizeImage(businessState?.business?.logo, 'h_70,c_limit')
-									}
-									style={styles.businessLogo}
-								/>
-							)
+						{!isBusinessInfoShow && (
+							<OIcon
+								url={
+									logo ||
+									optimizeImage(businessState?.business?.logo, 'h_70,c_limit')
+								}
+								style={styles.businessLogo}
+							/>
 						)}
 					</BusinessLogo>
 				)}

package/themes/original/src/components/BusinessProductsList/index.tsx

@@ -11,6 +11,7 @@ import { StyleSheet } from 'react-native';
 import { useTheme } from 'styled-components/native';
 import { shape } from '../../utils'
 import { CategoryDescriptionMemoized } from './CategoryDescription';
+import { OrderItAgain } from '../OrderItAgain'
 
 const BusinessProductsListUI = (props: BusinessProductsListParams) => {
   const {
@@ -35,6 +36,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
     onClickCategory,
     lazyLoadProductsRecommended,
     handleUpdateProducts,
+    previouslyProducts,
     isFiltMode,
     navigation
   } = props;
@@ -113,6 +115,17 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
           <SubcategoriesComponent category={category} />
         )}
       </HeaderWrapper>
+      {previouslyProducts?.length > 0 && (
+        <OrderItAgain
+          onProductClick={onProductClick}
+          productList={previouslyProducts}
+          businessId={businessId}
+          categoryState={categoryState}
+          navigation={navigation}
+          handleUpdateProducts={handleUpdateProducts}
+          currentCart={currentCart}
+        />
+      )}
       {category.id &&
         categoryState.products
           ?.filter((product: any) =>
@@ -123,6 +136,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
             <SingleProductCard
               key={'prod_' + product.id + `_${i}`}
               isSoldOut={product.inventoried && !product.quantity}
+              enableIntersection
               product={product}
               businessId={businessId}
               categoryState={categoryState}
@@ -150,6 +164,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                       key={'feat_' + product.id + `_${i}`}
                       isSoldOut={product.inventoried && !product.quantity}
                       product={product}
+                      enableIntersection
                       businessId={businessId}
                       categoryState={categoryState}
                       onProductClick={onProductClick}

package/themes/original/src/components/BusinessProductsListing/index.tsx

@@ -323,6 +323,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 								setSubcategoriesSelected={setSubcategoriesSelected}
 								onClickCategory={handleChangeCategory}
 								handleUpdateProducts={handleUpdateProducts}
+								previouslyProducts={business?.previously_products}
 								navigation={navigation}
 								isFiltMode
 							/>
@@ -427,6 +428,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 									onClickCategory={handleChangeCategory}
 									handleUpdateProducts={handleUpdateProducts}
 									navigation={navigation}
+									previouslyProducts={business?.previously_products}
 								/>
 							</WrapContent>
 						</>

package/themes/original/src/components/BusinessesListing/Layout/Original/index.tsx

@@ -474,14 +474,15 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					onCancel={() => handleChangeSearch('')}
 					placeholder={t('SEARCH', 'Search')}
 					height={50}
-					isDisabled={!businessTypes}
+					isDisabled={true}
 					inputContainerStyles={styles.inputContainerStyles}
 					containerStyles={{
 						marginHorizontal: 40,
 						marginTop: 20
 					}}
 					inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? { paddingBottom: 6 } : { paddingBottom: 4 } }}
-					onSubmitEditing={() => { configs?.advanced_business_search_enabled?.value === '1' && navigation.navigate('BusinessSearch', { businessTypes, defaultTerm: searchValue }) }}
+					onPress={() => { navigation.navigate('BusinessSearch', { businessTypes }) }}
+					onSubmitEditing={() => { navigation.navigate('BusinessSearch', { businessTypes, defaultTerm: searchValue }) }}
 				/>
 			)}
 

package/themes/original/src/components/BusinessesListing/index.tsx

@@ -7,6 +7,7 @@ import { BusinessesListing as OriginalBusinessListing } from './Layout/Original'
 import { BusinessesListing as AppointmentBusinessListing } from './Layout/Appointment'
 import { OBottomPopup } from '../shared';
 import { ReviewTrigger } from '../ReviewTrigger';
+import { NotificationSetting } from '../../../../../src/components/NotificationSetting';
 
 export const BusinessesListing = (props: any) => {
   const { logosLayout } = props
@@ -18,6 +19,7 @@ export const BusinessesListing = (props: any) => {
   const [, { getLastOrderHasNoReview }] = useOrder();
 
   const [, setIsReviewed] = useState()
+  const [checkNotificationStatus, setCheckNotificationStatus] = useState({ open: false, checked: false })
   const defaultOrder = {
     id: 0,
     business_id: 0,
@@ -72,9 +74,11 @@ export const BusinessesListing = (props: any) => {
     )
   }
 
+
+
   useEffect(() => {
-    auth && _getLastOrderHasNoReview()
-  }, [auth])
+    (checkNotificationStatus?.checked && auth) && _getLastOrderHasNoReview()
+  }, [checkNotificationStatus, auth])
 
   return (
     <>
@@ -92,9 +96,10 @@ export const BusinessesListing = (props: any) => {
           closeIcon={theme.images.general.close}
         >
           {lastOrderReview?.order && <ReviewTrigger order={lastOrderReview?.order} handleOpenOrderReview={handleOpenOrderReview} />}
-
         </OBottomPopup>
       )}
+      <NotificationSetting checkNotificationStatus={checkNotificationStatus}
+        setCheckNotificationStatus={setCheckNotificationStatus} />
     </>
   )
 }