ordering-ui-react-native 0.21.49-test → 0.21.49-test-v2

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

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { View } from 'react-native';
 import { useTheme } from 'styled-components/native';
-import { useLanguage } from 'ordering-components/native';
+import { useLanguage, useConfig } from 'ordering-components/native';
 
 import { AcceptOrRejectOrder as AcceptOrRejectOrderStyle } from './styles';
 
@@ -24,12 +24,15 @@ export const PreviousOrders = (props: any) => {
     currentTabSelected,
     currentOrdenSelected,
     handleChangeOrderStatus,
-    handleSendCustomerReview
+    handleSendCustomerReview,
+    isBusinessApp
   } = props;
 
   let hash: any = {};
   const [, t] = useLanguage();
   const theme = useTheme();
+  const [{ configs }] = useConfig();
+
 
   // const [, setCurrentTime] = useState()
   const [openModal, setOpenModal] = useState(false)
@@ -41,6 +44,7 @@ export const PreviousOrders = (props: any) => {
   const viewMapStatus = [9, 18, 19, 23]
   const deliveryPickupBtn = props.appTitle?.text?.includes('Delivery') && [3, 8, 18]
   const deliveryStatusCompleteBtn = props.appTitle?.text?.includes('Delivery') && [9, 19, 23]
+  const isHideRejectButtons = configs?.reject_orders_enabled && configs?.reject_orders_enabled?.value !== '1' && !isBusinessApp
 
   const handlePressOrder = (order: any) => {
     if (order?.locked && isLogisticOrder) return
@@ -168,28 +172,30 @@ export const PreviousOrders = (props: any) => {
                   }
                   {_ordersGrouped[k][0]?.status === 0 && (
                     <AcceptOrRejectOrderStyle>
-                      <OButton
-                        text={t('REJECT_ALL', 'Reject all')}
-                        bgColor={theme.colors.danger100}
-                        borderColor={theme.colors.danger100}
-                        imgRightSrc={null}
-                        style={{ borderRadius: 7, height: 40 }}
-                        parentStyle={{ width: '45%' }}
-                        textStyle={{ color: theme.colors.danger500, fontSize: 12 }}
-                        onClick={() => onNavigationRedirect('AcceptOrRejectOrder', {
-                          action: 'reject',
-                          order: _ordersGrouped[k][0],
-                          ids: _ordersGrouped[k].map((o: any) => o.id),
-                          handleChangeOrderStatus
-                        })}
-                      />
+                      {!isHideRejectButtons && (
+                        <OButton
+                          text={t('REJECT_ALL', 'Reject all')}
+                          bgColor={theme.colors.danger100}
+                          borderColor={theme.colors.danger100}
+                          imgRightSrc={null}
+                          style={{ borderRadius: 7, height: 40 }}
+                          parentStyle={{ width: '45%' }}
+                          textStyle={{ color: theme.colors.danger500, fontSize: 12 }}
+                          onClick={() => onNavigationRedirect('AcceptOrRejectOrder', {
+                            action: 'reject',
+                            order: _ordersGrouped[k][0],
+                            ids: _ordersGrouped[k].map((o: any) => o.id),
+                            handleChangeOrderStatus
+                          })}
+                        />
+                      )}
                       <OButton
                         text={t('ACCEPT_ALL', 'Accept all')}
                         bgColor={theme.colors.success100}
                         borderColor={theme.colors.success100}
                         imgRightSrc={null}
                         style={{ borderRadius: 7, height: 40 }}
-                        parentStyle={{ width: '45%' }}
+                        parentStyle={{ width: isHideRejectButtons ? '100%' : '45%' }}
                         textStyle={{ color: theme.colors.success500, fontSize: 12 }}
                         onClick={() => onNavigationRedirect('AcceptOrRejectOrder', {
                           action: 'accept',
@@ -236,7 +242,7 @@ export const PreviousOrders = (props: any) => {
                         />
                       </AcceptOrRejectOrderStyle>
                     )}
-                  {_ordersGrouped[k][0]?.status === 3 && _ordersGrouped[k][0]?.delivery_type === 1 &&
+                  {_ordersGrouped[k][0]?.status === 3 && _ordersGrouped[k][0]?.delivery_type === 1 && !isHideRejectButtons &&
                     (
                       <AcceptOrRejectOrderStyle>
                         <OButton
@@ -276,26 +282,28 @@ export const PreviousOrders = (props: any) => {
                     ![1].includes(_ordersGrouped[k][0]?.delivery_type) &&
                     (
                       <AcceptOrRejectOrderStyle>
-                        <OButton
-                          text={t('ORDER_NOT_PICKEDUP_BY_CUSTOMER', 'Order not picked up by customer')}
-                          bgColor={theme.colors.danger100}
-                          borderColor={theme.colors.danger100}
-                          imgRightSrc={null}
-                          style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
-                          parentStyle={{ width: '45%' }}
-                          textStyle={{ color: theme.colors.danger500, fontSize: 12, textAlign: 'center' }}
-                          onClick={() => handleChangeOrderStatus(
-                            17,
-                            _ordersGrouped[k].map((o: any) => o.id),
-                          )}
-                        />
+                        {!isHideRejectButtons && (
+                          <OButton
+                            text={t('ORDER_NOT_PICKEDUP_BY_CUSTOMER', 'Order not picked up by customer')}
+                            bgColor={theme.colors.danger100}
+                            borderColor={theme.colors.danger100}
+                            imgRightSrc={null}
+                            style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
+                            parentStyle={{ width: '45%' }}
+                            textStyle={{ color: theme.colors.danger500, fontSize: 12, textAlign: 'center' }}
+                            onClick={() => handleChangeOrderStatus(
+                              17,
+                              _ordersGrouped[k].map((o: any) => o.id),
+                            )}
+                          />
+                        )}
                         <OButton
                           text={t('PICKUP_COMPLETED_BY_CUSTOMER', 'Pickup completed by customer')}
                           bgColor={theme.colors.success100}
                           borderColor={theme.colors.success100}
                           imgRightSrc={null}
                           style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
-                          parentStyle={{ width: '45%' }}
+                          parentStyle={{ width: isHideRejectButtons ? '100%' : '45%' }}
                           textStyle={{ color: theme.colors.success500, fontSize: 12, textAlign: 'center' }}
                           onClick={() => handleChangeOrderStatus(
                             15,
@@ -324,28 +332,30 @@ export const PreviousOrders = (props: any) => {
                     )}
                   {!!deliveryPickupBtn && deliveryPickupBtn?.includes(_ordersGrouped[k][0]?.status) && (
                     <AcceptOrRejectOrderStyle>
-                      <OButton
-                        text={t('PICKUP_FAILED', 'Pickup failed')}
-                        bgColor={theme.colors.danger100}
-                        borderColor={theme.colors.danger100}
-                        imgRightSrc={null}
-                        style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
-                        parentStyle={{ width: '45%' }}
-                        textStyle={{ color: theme.colors.danger500, fontSize: 12, textAlign: 'center' }}
-                        onClick={() => onNavigationRedirect('AcceptOrRejectOrder', {
-                          action: 'pickupFailed',
-                          order: _ordersGrouped[k][0],
-                          ids: _ordersGrouped[k].map((o: any) => o.id),
-                          handleChangeOrderStatus
-                        })}
-                      />
+                      {!isHideRejectButtons && (
+                        <OButton
+                          text={t('PICKUP_FAILED', 'Pickup failed')}
+                          bgColor={theme.colors.danger100}
+                          borderColor={theme.colors.danger100}
+                          imgRightSrc={null}
+                          style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
+                          parentStyle={{ width: '45%' }}
+                          textStyle={{ color: theme.colors.danger500, fontSize: 12, textAlign: 'center' }}
+                          onClick={() => onNavigationRedirect('AcceptOrRejectOrder', {
+                            action: 'pickupFailed',
+                            order: _ordersGrouped[k][0],
+                            ids: _ordersGrouped[k].map((o: any) => o.id),
+                            handleChangeOrderStatus
+                          })}
+                        />
+                      )}
                       <OButton
                         text={t('PICKUP_COMPLETE', 'Pickup complete')}
                         bgColor={theme.colors.success100}
                         borderColor={theme.colors.success100}
                         imgRightSrc={null}
                         style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
-                        parentStyle={{ width: '45%' }}
+                        parentStyle={{ width: isHideRejectButtons ? '100%' : '45%' }}
                         textStyle={{ color: theme.colors.success500, fontSize: 12, textAlign: 'center' }}
                         onClick={() => handleChangeOrderStatus(
                           9,
@@ -356,28 +366,30 @@ export const PreviousOrders = (props: any) => {
                   )}
                   {!!deliveryStatusCompleteBtn && deliveryStatusCompleteBtn.includes(_ordersGrouped[k][0]?.status) && (
                     <AcceptOrRejectOrderStyle>
-                      <OButton
-                        text={t('DELIVERY_FAILED', 'Delivery Failed')}
-                        bgColor={theme.colors.danger100}
-                        borderColor={theme.colors.danger100}
-                        imgRightSrc={null}
-                        style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
-                        parentStyle={{ width: '45%' }}
-                        textStyle={{ color: theme.colors.danger500, fontSize: 12, textAlign: 'center' }}
-                        onClick={() => onNavigationRedirect('AcceptOrRejectOrder', {
-                          action: 'deliveryFailed',
-                          order: _ordersGrouped[k][0],
-                          ids: _ordersGrouped[k].map((o: any) => o.id),
-                          handleChangeOrderStatus
-                        })}
-                      />
+                      {!isHideRejectButtons && (
+                        <OButton
+                          text={t('DELIVERY_FAILED', 'Delivery Failed')}
+                          bgColor={theme.colors.danger100}
+                          borderColor={theme.colors.danger100}
+                          imgRightSrc={null}
+                          style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
+                          parentStyle={{ width: '45%' }}
+                          textStyle={{ color: theme.colors.danger500, fontSize: 12, textAlign: 'center' }}
+                          onClick={() => onNavigationRedirect('AcceptOrRejectOrder', {
+                            action: 'deliveryFailed',
+                            order: _ordersGrouped[k][0],
+                            ids: _ordersGrouped[k].map((o: any) => o.id),
+                            handleChangeOrderStatus
+                          })}
+                        />
+                      )}
                       <OButton
                         text={t('DELIVERY_COMPLETE', 'Delivery complete')}
                         bgColor={theme.colors.success100}
                         borderColor={theme.colors.success100}
                         imgRightSrc={null}
                         style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
-                        parentStyle={{ width: '45%' }}
+                        parentStyle={{ width: isHideRejectButtons ? '100%' : '45%' }}
                         textStyle={{ color: theme.colors.success500, fontSize: 12, textAlign: 'center' }}
                         onClick={() => handleChangeOrderStatus(
                           11,

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

@@ -0,0 +1,171 @@
+import React, { useState } from 'react'
+import { useLanguage, useUtils, WebsocketStatus as WebsocketStatusController } from 'ordering-components/native'
+import { TouchableOpacity, View, StyleSheet } from 'react-native'
+import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
+import { useTheme } from 'styled-components/native'
+import RNRestart from 'react-native-restart'
+import { OModal, OButton, OText, OIcon } from '../shared'
+
+import {
+  Container,
+  ModalContainer,
+  ModalTitle,
+  StatusItemWrapper,
+  StatusText
+} from './styles'
+
+const SocketStatusUI = (props: any) => {
+  const {
+    socketStatus,
+    connectedDate
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [{ parseDate }] = useUtils()
+  const [openModal, setOpenModal] = useState(false)
+
+  const styles = StyleSheet.create({
+    btnBackArrow: {
+      borderWidth: 0,
+      width: 32,
+      height: 32,
+      tintColor: theme.colors.textGray,
+      backgroundColor: theme.colors.clear,
+      borderColor: theme.colors.clear,
+      shadowColor: theme.colors.clear,
+      paddingLeft: 0,
+      paddingRight: 0,
+      marginBottom: 30,
+      marginTop: 30
+    },
+  })
+
+  const getStatusColor = (status: number) => {
+    switch (status) {
+      case 0:
+        return '#FF9922';
+      case 1:
+        return '#00D27A';
+      case 2:
+        return '#E63757';
+      default:
+        return '#FF9922';
+    }  
+  }
+
+  return (
+    <Container>
+      <TouchableOpacity
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: theme.colors.inputChat,
+          borderRadius: 7.6,
+          marginVertical: 10,
+          paddingVertical: 10,
+          paddingHorizontal: 15,
+        }}
+        activeOpacity={0.6}
+        onPress={() => setOpenModal(true)}
+      >
+        <OText
+          style={{ color: theme.colors.backArrow, fontSize: 16, marginBottom: 0, lineHeight: 16 }}
+        >
+          {t('CONNECTION_STATUS', 'Connection status')}
+        </OText>
+        <MaterialIcon
+          name='circle'
+          size={12}
+          color={getStatusColor(socketStatus)}
+          style={{ marginLeft: 8 }}
+        />
+      </TouchableOpacity>
+
+      <OModal
+        open={openModal}
+        onClose={() => setOpenModal(false)}
+        entireModal
+        customClose
+      >
+        <ModalContainer nestedScrollEnabled={true}>
+          <TouchableOpacity
+            onPress={() => setOpenModal(false)}
+            style={styles.btnBackArrow}
+          >
+            <OIcon src={theme.images.general.arrow_left} color={theme.colors.textGray} />
+          </TouchableOpacity>
+          <View>
+            <ModalTitle>{t('CONNECTION_STATUS', 'Connection status')}</ModalTitle>
+            <OText style={{ marginBottom: 20 }}>
+              {t('LAST_UPDATE', 'Last update')}: {parseDate(connectedDate)}
+            </OText>
+            <StatusItemWrapper>
+              <MaterialIcon
+                name='circle'
+                size={12}
+                color={getStatusColor(1)}
+                style={{ marginTop: 10, marginHorizontal: 8 }}
+              />
+              <View style={{ marginLeft: 16 }}>
+                <StatusText>{t('OK', 'Ok')}</StatusText>
+                <OText style={{ color: theme.colors.backArrow, fontSize: 14 }}>{t('WEBSOCKET_OK', 'The websocket works normally.')}</OText>
+              </View>
+            </StatusItemWrapper>
+            <StatusItemWrapper>
+              <MaterialIcon
+                name='circle'
+                size={12}
+                color={getStatusColor(0)}
+                style={{ marginTop: 10, marginHorizontal: 8 }}
+              />
+              <View style={{ marginLeft: 16 }}>
+                <StatusText>{t('CONNECTING', 'Connecting')}</StatusText>
+                <OText style={{ color: theme.colors.backArrow, fontSize: 14 }}>{t('WEBSOCKET_CONNECTING', 'The websocket is connecting.')}</OText>
+              </View>
+            </StatusItemWrapper>
+            <StatusItemWrapper>
+              <MaterialIcon
+                name='circle'
+                size={12}
+                color={getStatusColor(2)}
+                style={{ marginTop: 10, marginHorizontal: 8 }}
+              />
+              <View style={{ marginLeft: 16 }}>
+                <StatusText>{t('DISCONNECTED', 'Disconnected')}</StatusText>
+                <OText style={{ color: theme.colors.backArrow, fontSize: 14 }}>{t('WEBSOCKET_DISCONNECTED', 'The server is slow, please reload.')}</OText>
+              </View>
+            </StatusItemWrapper>
+
+            <View style={{ flexDirection: 'row', marginTop: 50 }}>
+              <OButton
+                onClick={() => setOpenModal(false)}
+                bgColor={theme.colors.white}
+                borderColor={theme.colors.primary}
+                textStyle={{ color: theme.colors.primary }}
+                style={{ borderRadius: 8, height: 48 }}
+                text={t('CLOSE', 'Close')}
+              />
+               <OButton
+                onClick={() => RNRestart.Restart()}
+                borderColor={theme.colors.primary}
+                textStyle={{ color: theme.colors.white }}
+                style={{ borderRadius: 8, marginLeft: 16, height: 48 }}
+                text={t('UPDATE', 'Update')}
+              />
+            </View>
+          </View>
+        </ModalContainer>
+      </OModal>
+    </Container>
+  )
+}
+
+export const WebsocketStatus = (props: any) => {
+  const socketProps = {
+    ...props,
+    UIComponent: SocketStatusUI
+  }
+  return <WebsocketStatusController {...socketProps} />
+}

package/themes/business/src/components/WebsocketStatus/styles.tsx

@@ -0,0 +1,28 @@
+import styled from 'styled-components/native'
+
+export const Container = styled.View`
+  display: flex;
+  flex-direction: column;
+`
+export const ModalContainer = styled.ScrollView`
+  padding: 0px 30px;
+`
+export const ModalTitle = styled.Text`
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 20px;
+  color: ${(props: any) => props.theme.colors.textGray};
+  margin-bottom: 10px;
+`
+export const StatusItemWrapper = styled.View`
+  flex-direction: row;
+  margin-bottom: 16px;
+`
+export const StatusText = styled.Text`
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 18px;
+  color: ${(props: any) => props.theme.colors.textGray};
+`

package/themes/kiosk/src/components/LoginForm/index.tsx

@@ -52,7 +52,7 @@ const LoginFormUI = (props: LoginParams) => {
   } = props;
 
   const theme = useTheme()
-  const [{ configs }] = useConfig()
+  const [{ configs }, { refreshConfigs }] = useConfig()
   const [ordering, { setOrdering }] = useApi();
   const [, { showToast }] = useToast();
   const [, t] = useLanguage();
@@ -347,13 +347,16 @@ const LoginFormUI = (props: LoginParams) => {
           project: projectName
         })
       }
-      if (isDeviceLoginEnabled) {
-        props.handleChangeTab('device_code')
-      }
     }, 1500)
     return () => clearTimeout(projectInputTimeout);
   }, [projectName, isDeviceLoginEnabled])
 
+  useEffect(() => {
+    if (ordering?.project) {
+      refreshConfigs()
+    }
+  }, [ordering?.project])
+
   const logo = (
     <LogoWrapper>
       <OIcon src={theme.images.logos.logotype} style={styles.logo} />

package/themes/original/index.tsx

@@ -99,6 +99,7 @@ import { Promotions } from './src/components/Promotions'
 import { PageBanner } from './src/components/PageBanner'
 import { MultiCart } from './src/components/MultiCart'
 import { USER_TYPE, ORDER_TYPES } from './src/config/constants'
+import { DatePickerUI } from './src/components/DatePicker'
 
 import { OSBill, OSTable, OSCoupon, OSTotal, OSRow } from './src/components/OrderSummary/styles';
 
@@ -263,7 +264,7 @@ export {
 	Promotions,
 	PageBanner,
 	MyOrders,
-  MultiCart,
+	MultiCart,
 	ORDER_TYPES,
 	USER_TYPE,
 
@@ -340,5 +341,8 @@ export {
 	_retrieveStoreData,
 	_setStoreData,
 	_removeStoreData,
-	_clearStoreData
+	_clearStoreData,
+
+	// Date Picker
+	DatePickerUI
 }

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

@@ -122,8 +122,8 @@ const AddressFormUI = (props: AddressFormParams) => {
 			width: 16
 		},
 		wrapperNavbar: Platform.OS === 'ios'
-			? { paddingVertical: 0, paddingLeft: 40, paddingRight: 20 }
-			: { paddingVertical: 10, paddingLeft: 40, paddingRight: 20 }
+			? { paddingVertical: 0, paddingLeft: 20, paddingRight: 20 }
+			: { paddingVertical: 10, paddingLeft: 20, paddingRight: 20 }
 	});
 
 	const [, t] = useLanguage();

package/themes/original/src/components/AddressForm/styles.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components/native'
 
 export const AddressFormContainer = styled.View`
     flex: 1;
-    padding: 0px 40px 20px;
+    padding: 0px 20px 20px;
     background-color: ${(props: any) => props.theme.colors.backgroundPage};
     justify-content: space-between;
 `

package/themes/original/src/components/AddressList/styles.tsx

@@ -3,10 +3,10 @@ import styled from 'styled-components/native'
 export const Container = styled.ScrollView`
     position: relative;
     flex: 1;
-	 paddingLeft: 40px;
-	 paddingRight: 40px;
-     margin-bottom: 40px;
-     padding-top: 10px;
+	paddingLeft: 20px;
+	paddingRight: 20px;
+    margin-bottom: 40px;
+    padding-top: 10px;
 `
 
 export const AddressItem = styled.TouchableOpacity`

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

@@ -72,7 +72,7 @@ export const BusinessBasicInformation = (
 			alignItems: 'flex-start'
 		},
 		businessInfo: {
-			paddingHorizontal: 40,
+			paddingHorizontal: 20,
 			paddingTop: isChewLayout ? 0 : 56,
 		},
 		bullet: {
@@ -95,7 +95,7 @@ export const BusinessBasicInformation = (
 			width: '100%',
 			top: 0,
 			zIndex: 100,
-			left: 40
+			left: 20
 		},
 		socialIcon: {
 			borderRadius: 3,

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

@@ -11,7 +11,7 @@ export const BusinessHeader = styled.ImageBackground`
 `;
 export const BusinessLogo = styled.View`
   position: absolute;
-  start: 40px;
+  start: 20px;
   top: -36px;
   z-index: 50;
   box-shadow: 0 0 2px ${Platform.OS == 'android' ? '#000000DD' : '#0000001A'};

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

@@ -106,7 +106,6 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
 										location={businessLocation.location}
 										markerTitle={businessState?.business?.name}
 										businessZones={businessState?.business?.zones}
-										delta={30}
 									/>
 								</WrapBusinessMap>
 							)}

package/themes/original/src/components/BusinessInformation/styles.tsx

@@ -17,7 +17,7 @@ export const MediaWrapper = styled.ScrollView`
   height: 127px;
 `
 export const InnerContent = styled.View`
-  padding: 20px 40px;
+  padding: 20px;
 `
 export const WrapScheduleBlock = styled.View`
   margin: 20px 0;
@@ -36,4 +36,4 @@ export const DivideView = styled.View`
 	height: 8px;
 	background-color: ${(props: any) => props.theme.colors.backgroundGray100};
 	margin-horizontal: -40px;
-`;
+`;

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

@@ -23,7 +23,10 @@ export const BusinessItemAccordion = (props: any) => {
 		handleClickCheckout,
 		checkoutButtonDisabled,
 		isMultiCheckout,
-		isFromUpselling
+		isFromUpselling,
+		changeActiveState,
+		isActive,
+		isGiftCart
 	} = props
 
 	const [orderState] = useOrder();
@@ -38,14 +41,13 @@ export const BusinessItemAccordion = (props: any) => {
 	const isProducts = cart?.products?.length
 	const isBusinessChangeEnabled = configs?.cart_change_business_validation?.value === '1'
 
-	const [isActive, setActiveState] = useState(!!singleBusiness)
 	const [viewedCart, setViewedCart] = useState<any>(null)
 
 	useEffect(() => {
 		const cartsArray = Object.values(orderState?.carts)
 		const cartsLength = cartsArray.filter((cart: any) => cart.products.length > 0).length ?? 0
 		if (cartsLength === 1) {
-			setActiveState(!isClosed)
+			changeActiveState(!isClosed, cart?.uuid)
 		}
 	}, [orderState?.carts, isClosed])
 
@@ -68,14 +70,14 @@ export const BusinessItemAccordion = (props: any) => {
 		<BIContainer isClosed={isClosed} isMultiCheckout={isMultiCheckout} checkoutVisible={!isActive && !isClosed && !!isProducts && !checkoutButtonDisabled}>
 			<BIHeader
 				isClosed={isClosed}
-				onPress={() => !isClosed ? setActiveState(!isActive) : isClosed}
+				onPress={() => !isClosed ? changeActiveState(!isClosed, cart?.uuid) : isClosed}
 				activeOpacity={1}
 			>
 				<BIInfo>
 					<BIContentInfo>
 						<OText size={16} lineHeight={24} weight={'600'}>{cart?.business?.name}</OText>
 						<View style={{ flexDirection: 'row' }}>
-							{props.onNavigationRedirect && !isClosed && (
+							{props.onNavigationRedirect && !isClosed && !isGiftCart && (
 								<>
 									<TouchableOpacity onPress={() => props.onNavigationRedirect('Business', { store: cart?.business?.slug })}>
 										<OText color={theme.colors.primary} size={12} lineHeight={18} style={{ textDecorationLine: 'underline' }}>{t('GO_TO_STORE', 'Go to store')}</OText>
@@ -84,7 +86,9 @@ export const BusinessItemAccordion = (props: any) => {
 							)}
 							{!isCartPending && (
 								<>
-									<OText color={theme.colors.textSecondary}>{' \u2022 '}</OText>
+									{!isGiftCart && (
+										<OText color={theme.colors.textSecondary}>{' \u2022 '}</OText>
+									)}
 									<OAlert
 										title={t('DELETE_CART', 'Delete Cart')}
 										message={t('QUESTION_DELETE_CART', 'Are you sure to you wants delete the selected cart')}
@@ -94,7 +98,7 @@ export const BusinessItemAccordion = (props: any) => {
 									</OAlert>
 								</>
 							)}
-							{isBusinessChangeEnabled && props.handleChangeStore && (
+							{isBusinessChangeEnabled && props.handleChangeStore && !isGiftCart && (
 								<>
 									<OText color={theme.colors.textSecondary}>{' \u2022 '}</OText>
 									<TouchableOpacity