ordering-ui-react-native 0.15.29 → 0.15.30-release

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

@@ -6,9 +6,10 @@ export const WrapHeader = styled.View`
 `
 
 export const TopActions = styled.TouchableOpacity`
-	height: 44px;
+	height: 60px;
 	justify-content: center;
   padding-horizontal: 30px;
+  width: 80px;
 `;
 
 export const TopHeader = styled.View`
@@ -48,7 +49,6 @@ export const ProductDescription = styled.View`
 `
 
 export const ProductEditions = styled.View`
-
 `
 
 export const SectionTitle = styled.View`

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

@@ -40,7 +40,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 
 	const pickerStyle = StyleSheet.create({
 		inputAndroid: {
-			width: 27,
+			width: 34,
 			textAlign: 'center',
 			overflow: 'visible',
 			fontSize: 12,
@@ -49,7 +49,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 			color: theme.colors.textNormal
 		},
 		inputIOS: {
-			width: 27,
+			width: 34,
 			textAlign: 'center',
 			overflow: 'visible',
 			fontSize: 12,

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

@@ -28,36 +28,40 @@ export const ProductOptionSubOptionUI = (props: any) => {
 		toggleSelect,
 		changePosition,
 		disabled,
-		error,
-		scrollDown
+		setIsScrollAvailable
 	} = props
 
+	const disableIncrement = option?.limit_suboptions_by_max ? balance === option?.max : state.quantity === suboption?.max || (!state.selected && balance === option?.max)
+	const price = option?.with_half_option && suboption?.half_price && state.position !== 'whole' ? suboption?.half_price : suboption?.price
+	
 	const theme = useTheme();
-
 	const [, t] = useLanguage()
 	const [{ parsePrice }] = useUtils()
 	const [showMessage, setShowMessage] = useState(false)
+	const [isDirty, setIsDirty] = useState(false)
 
 	const handleSuboptionClick = () => {
 		toggleSelect()
-
-		if (balance === option?.max - 1 && !state.selected) {
-			scrollDown(option?.id)
-		}
+		setIsDirty(true)
 
 		if (balance === option?.max && option?.suboptions?.length > balance && !(option?.min === 1 && option?.max === 1)) {
 			setShowMessage(true)
 		}
 	}
 
+	useEffect(() => {
+		if (balance === option?.max && state?.selected && isDirty) {
+			setIsDirty(false)
+			setIsScrollAvailable(option?.id)
+		}
+	}, [state?.selected])
+
 	useEffect(() => {
 		if (!(balance === option?.max && option?.suboptions?.length > balance && !(option?.min === 1 && option?.max === 1))) {
 			setShowMessage(false)
 		}
 	}, [balance])
 
-	const disableIncrement = option?.limit_suboptions_by_max ? balance === option?.max : state.quantity === suboption?.max || (!state.selected && balance === option?.max)
-	const price = option?.with_half_option && suboption?.half_price && state.position !== 'whole' ? suboption?.half_price : suboption?.price
 	return (
 		<View>
 			<Container onPress={() => handleSuboptionClick()}>
@@ -130,9 +134,11 @@ export const ProductOptionSubOptionUI = (props: any) => {
 						</>
 					)}
 				</PositionControl>
-				<OText size={12} lineHeight={18} color={theme.colors.textSecondary}>
-					+ {parsePrice(price)}
-				</OText>
+				{price > 0 && (
+					<OText size={12} lineHeight={18} color={theme.colors.textSecondary}>
+						+ {parsePrice(price)}
+					</OText>
+				)}
 			</Container>
 			{showMessage && <OText size={10} mLeft={4} mRight={4} style={{ flex: 1, textAlign: 'center' }} color={theme.colors.primary}>{`${t('OPTIONS_MAX_LIMIT', 'Maximum options to choose')}: ${option?.max}`}</OText>}
 		</View>

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

@@ -0,0 +1,250 @@
+import React, { useState } from 'react'
+import { PromotionsController, useLanguage, useUtils } from 'ordering-components/native'
+import {
+    PromotionsContainer,
+    SingleOfferContainer,
+    OfferInformation,
+    SearchBarContainer,
+    SingleBusinessOffer,
+    AvailableBusinesses,
+    OfferData,
+    Code,
+    BusinessInfo
+} from './styles'
+import { SearchBar } from '../SearchBar'
+import NavBar from '../NavBar'
+import { useTheme } from 'styled-components/native';
+import { OButton, OIcon, OModal, OText } from '../shared'
+import { Placeholder, PlaceholderLine } from 'rn-placeholder'
+import { NotFoundSource } from '../NotFoundSource'
+import { View, StyleSheet, ScrollView, Platform, RefreshControl } from 'react-native'
+import FastImage from 'react-native-fast-image'
+import { PromotionParams } from '../../types'
+import { Container } from '../../layouts/Container'
+
+const PromotionsUI = (props: PromotionParams) => {
+    const {
+        navigation,
+        offersState,
+        handleSearchValue,
+        searchValue,
+        loadOffers,
+        offerSelected,
+        setOfferSelected
+    } = props
+
+    const theme = useTheme();
+
+    const styles = StyleSheet.create({
+        productStyle: {
+            width: 75,
+            height: 75,
+            borderRadius: 7.6
+        },
+        buttonStyle: {
+            width: 55,
+            height: 25,
+            paddingLeft: 0,
+            paddingRight: 0
+        },
+        offerTitle: {
+            fontSize: 12
+        },
+        offerDescription: {
+            color: '#909BA9',
+            fontSize: 10
+        },
+        offerExtraInfo: {
+            fontSize: 10
+        },
+        modalButtonStyle: {
+            width: 100,
+            height: 35,
+            paddingLeft: 0,
+            paddingRight: 0,
+            borderRadius: 7.6
+        }
+    });
+
+    const [, t] = useLanguage()
+    const [{ parseDate, parsePrice, optimizeImage }] = useUtils()
+    const [openModal, setOpenModal] = useState(false)
+    const [refreshing] = useState(false);
+
+    const handleClickOffer = (offer: any) => {
+        setOpenModal(true)
+        setOfferSelected(offer)
+    }
+
+    const handleBusinessClick = (store: any) => {
+        setOpenModal(false)
+        navigation.navigate('Business', { store: store.slug })
+    }
+
+    const handleOnRefresh = () => {
+        if (!offersState.loading) {
+            loadOffers();
+        }
+    }
+
+    const filteredOffers = offersState?.offers?.filter((offer: any) => offer.name.toLowerCase().includes(searchValue.toLowerCase()))
+    const targetString = offerSelected?.target === 1
+        ? t('SUBTOTAL', 'Subtotal')
+        : offerSelected?.target === 2
+            ? t('DELIVERY_FEE', 'Delivery fee')
+            : t('SERVICE_FEE', 'Service fee')
+
+    return (
+        <Container
+            noPadding
+            refreshControl={
+                <RefreshControl
+                    refreshing={refreshing}
+                    onRefresh={() => handleOnRefresh()}
+                />
+            }
+        >
+            <NavBar
+                title={t('PROMOTIONS', 'Promotions')}
+                titleAlign={'center'}
+                onActionLeft={() => navigation.goBack()}
+                showCall={false}
+                style={{ paddingVertical: Platform.OS === 'ios' ? 0 : 20, marginLeft: 20 }}
+            />
+            <PromotionsContainer>
+                <SearchBarContainer>
+                    <SearchBar
+                        placeholder={t('SEARCH_OFFERS', 'Search offers')}
+                        onSearch={handleSearchValue}
+                    />
+                </SearchBarContainer>
+
+                {offersState?.loading && (
+                    <>
+                        {[...Array(5).keys()].map((key, i) => (
+                            <Placeholder key={i} style={{ flexDirection: 'row', marginBottom: 20 }}>
+                                <PlaceholderLine height={10} width={45} />
+                                <PlaceholderLine height={10} width={60} />
+                                <PlaceholderLine height={10} width={75} />
+                            </Placeholder>
+                        ))}
+                    </>
+                )}
+                {((!offersState?.loading && filteredOffers?.length === 0) || offersState?.error) && (
+                    <NotFoundSource
+                        content={offersState?.error || t('NOT_FOUND_OFFERS', 'Not found offers')}
+                    />
+                )}
+                <ScrollView>
+                    {!offersState?.loading && offersState.offers?.length > 0 && filteredOffers?.map((offer: any) => (
+                        <SingleOfferContainer key={offer.id}>
+                            <OfferInformation>
+                                <OText style={styles.offerTitle} numberOfLines={2}>{offer?.name}</OText>
+                                {!!offer?.description && (
+                                    <OText style={styles.offerDescription} numberOfLines={2}>{offer?.description}</OText>
+                                )}
+                                <OText style={styles.offerExtraInfo}>
+                                    {t('EXPIRES', 'Expires')} {parseDate(offer?.end, { outputFormat: 'MMM DD, YYYY' })}
+                                </OText>
+                                <AvailableBusinesses>
+                                    <OText style={styles.offerExtraInfo} numberOfLines={1}>
+                                        {t('APPLY_FOR', 'Apply for')}:
+                                        {offer.businesses.map((business: any, i: number) => (
+                                            <React.Fragment key={i}>{' '}{business?.name}{i + 1 < offer.businesses?.length ? ',' : ''}</React.Fragment>
+                                        ))}
+                                    </OText>
+                                </AvailableBusinesses>
+                            </OfferInformation>
+                            <OButton
+                                onClick={() => handleClickOffer(offer)}
+                                text={t('VIEW', 'View')}
+                                style={styles.buttonStyle}
+                                textStyle={{ fontSize: 10, color: '#fff', flexWrap: 'nowrap' }}
+                            />
+                        </SingleOfferContainer>
+                    ))}
+                </ScrollView>
+                <OModal
+                    open={openModal}
+                    onClose={() => setOpenModal(false)}
+                    entireModal
+
+                    title={``}
+                >
+                    <View style={{ padding: 20 }}>
+                        <OText style={{ alignSelf: 'center', fontWeight: '700' }} mBottom={20}>
+                            {offerSelected?.name} / {t('VALUE_OF_OFFER', 'Value of offer')}: {offerSelected?.rate_type === 1 ? `${offerSelected?.rate}%` : `${parsePrice(offerSelected?.rate)}`}
+                        </OText>
+                        <OfferData>
+                            {offerSelected?.type === 2 && (
+                                <Code>
+                                    <OText>{t('YOUR_CODE', 'Your code')}</OText>
+                                    <OText color={theme.colors.primary}>{offerSelected.coupon}</OText>
+                                </Code>
+                            )}
+                            <OText>{t('APPLIES_TO', 'Applies to')}: {targetString}</OText>
+                            {offerSelected?.auto && (
+                                <OText>{t('OFFER_AUTOMATIC', 'This offer applies automatic')}</OText>
+                            )}
+                            {!!offerSelected?.minimum && (
+                                <OText>{t('MINIMUM_PURCHASE_FOR_OFFER', 'Minimum purchase for use this offer')}: {parsePrice(offerSelected?.minimum)}</OText>
+                            )}
+                            {!!offerSelected?.max_discount && (
+                                <OText>{t('MAX_DISCOUNT_ALLOWED', 'Max discount allowed')}: {parsePrice(offerSelected?.max_discount)}</OText>
+                            )}
+                            {!!offerSelected?.description && (
+                                <OText>{offerSelected?.description}</OText>
+                            )}
+                        </OfferData>
+                        <OText style={{ marginTop: 10, marginBottom: 10 }}>
+                            {t('AVAILABLE_BUSINESSES_FOR_OFFER', 'Available businesses for this offer')}:
+                        </OText>
+                        <ScrollView style={{ height: '75%' }}>
+                            {offerSelected?.businesses?.map((business: any) => {
+                                return (
+                                    <SingleBusinessOffer key={business.id}>
+                                        {business?.logo ? (
+                                            <FastImage
+                                                style={styles.productStyle}
+                                                source={{
+                                                    uri: optimizeImage(business?.logo, 'h_250,c_limit'),
+                                                    priority: FastImage.priority.normal,
+                                                }}
+                                                resizeMode={FastImage.resizeMode.cover}
+                                            />
+                                        ) : (
+                                            <OIcon
+                                                src={theme?.images?.dummies?.product}
+                                                style={styles.productStyle}
+                                            />
+                                        )}
+                                        <BusinessInfo>
+                                            <OText style={{ maxWidth: '60%' }}>{business.name}</OText>
+                                            <OButton
+                                                onClick={() => handleBusinessClick(business)}
+                                                text={t('GO_TO_BUSINESSS', 'Go to business')}
+                                                style={styles.modalButtonStyle}
+                                                textStyle={{ fontSize: 10, color: '#fff' }}
+                                            />
+                                        </BusinessInfo>
+                                    </SingleBusinessOffer>
+                                )
+                            })}
+                        </ScrollView>
+                    </View>
+                </OModal>
+            </PromotionsContainer>
+        </Container>
+    )
+}
+
+export const Promotions = (props: PromotionParams) => {
+    const PromotionsProps = {
+        ...props,
+        UIComponent: PromotionsUI
+    }
+
+    return (
+        <PromotionsController {...PromotionsProps} />
+    )
+}

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

@@ -0,0 +1,60 @@
+import styled, { css } from 'styled-components/native'
+
+export const PromotionsContainer = styled.View`
+  width: 100%;
+  padding-left: 40px;
+	padding-right: 40px;
+`
+
+export const SingleOfferContainer = styled.View`
+  flex-direction: row;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+
+`
+
+export const OfferInformation = styled.View`
+  justify-content: space-between;
+  max-width: 75%;
+`
+
+export const SearchBarContainer = styled.View`
+  display: flex;
+  width: 100%;
+  justify-content: flex-start;
+  margin-bottom: 20px;
+`
+
+export const SingleBusinessOffer = styled.View`
+  flex-direction: row;
+`
+
+export const AvailableBusinesses = styled.View`
+  flex-direction: row;
+  overflow: hidden;
+`
+
+export const OfferData = styled.View`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+`
+
+export const Code = styled.View`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 10px;
+`
+
+export const ValueOfOffer = styled.View``
+
+export const BusinessInfo = styled.View`
+  flex: 1;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin-left: 10px;
+`

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

@@ -43,7 +43,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
     logoWrapper: {
       shadowColor: theme.colors.black,
       shadowRadius: 3,
-      shadowOffset: {width: 1, height: 4},
+      shadowOffset: { width: 1, height: 4 },
       elevation: 3,
       borderRadius: 8,
       shadowOpacity: 0.1,
@@ -108,11 +108,11 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
   }
 
   const qualificationList = [
-    { key: 1, text: t('TERRIBLE', 'Terrible'), percent: 0,  parentStyle: { left: '0%' }, isInnerStyle: false, pointerColor: false },
+    { key: 1, text: t('TERRIBLE', 'Terrible'), percent: 0, parentStyle: { left: '0%' }, isInnerStyle: false, pointerColor: false },
     { key: 2, text: t('BAD', 'Bad'), percent: 0.25, parentStyle: { left: '25%' }, isInnerStyle: true, pointerColor: true },
     { key: 3, text: t('OKAY', 'Okay'), percent: 0.5, parentStyle: { left: '50%' }, isInnerStyle: true, pointerColor: true },
     { key: 4, text: t('GOOD', 'Good'), percent: 0.75, parentStyle: { left: '75%' }, isInnerStyle: true, pointerColor: true },
-    { key: 5, text: t('GREAT', 'Great'), percent: 1, parentStyle: { right: '0%' }, isInnerStyle: false,  pointerColor: false }
+    { key: 5, text: t('GREAT', 'Great'), percent: 1, parentStyle: { right: '0%' }, isInnerStyle: false, pointerColor: false }
   ]
 
   const commentsList = reviewCommentList('order')
@@ -137,7 +137,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
     return found
   }
 
-  const handleContinueClick  = () => {
+  const handleContinueClick = () => {
     if (!order?.review) {
       onSubmit()
     } else {
@@ -183,7 +183,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
       comments.map(comment => _comments += comment.content + '. ')
     }
     let _comment
-    _comment = _comments  + extraComment
+    _comment = _comments + extraComment
     setStars({ ...stars, comments: _comment })
   }, [comments, extraComment])
 
@@ -214,7 +214,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
             <OText color={theme.colors.primary}>{t('ORDER_REVIEWED', 'This order has been already reviewed')}</OText>
           </View>
         ) : (
-          <View style={{flex: 1, justifyContent: 'flex-end'}}>
+          <View style={{ flex: 1, justifyContent: 'flex-end' }}>
             <FormReviews>
               <OText mBottom={13} color={theme.colors.textNormal}>{t('HOW_WAS_YOUR_ORDER', 'How was your order?')}</OText>
               <RatingBarContainer>
@@ -266,7 +266,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
                     style={{ height: 35, paddingLeft: 5, paddingRight: 5, marginHorizontal: 3, marginVertical: 10 }}
                     imgRightSrc={isSelectedComment(commentItem.key) ? theme.images.general.close : null}
                     imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}
-                    onClick={() => handleChangeComment(commentItem) }
+                    onClick={() => handleChangeComment(commentItem)}
                   />
                 ))}
               </CommentsButtonGroup>
@@ -304,7 +304,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
             textStyle={{ color: theme.colors.white, paddingRight: 10 }}
             text={t('CONTINUE', 'Continue')}
             style={{ borderRadius: 8 }}
-			      imgRightSrc={theme.images.general.arrow_right}
+            imgRightSrc={theme.images.general.arrow_right}
             imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}
             onClick={handleSubmit(handleContinueClick)}
           />
@@ -317,7 +317,8 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
 export const ReviewOrder = (props: ReviewOrderParams) => {
   const reviewOrderProps = {
     ...props,
-    UIComponent: ReviewOrderUI
+    UIComponent: ReviewOrderUI,
+    defaultStar: 5
   }
   return <ReviewOrderController {...reviewOrderProps} />
 }

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

@@ -74,7 +74,7 @@ const ReviewProductsUI = (props: ReviewProductParams) => {
           titleWrapStyle={{ paddingHorizontal: 0 }}
           titleStyle={{ marginRight: 0, marginLeft: 0 }}
         />
-        {order?.products.map((product: any) => (
+        {order?.products?.map((product: any) => (
           <SingleProductReview
             key={product.id}
             product={product}

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

@@ -20,7 +20,9 @@ export const SearchBar = (props: any) => {
 		inputStyle,
 		onPress,
 		isDisabled,
-		iconCustomRight
+		iconCustomRight,
+		onSubmitEditing,
+		blurOnSubmit
 	} = props
 
 	const theme = useTheme();
@@ -88,6 +90,7 @@ export const SearchBar = (props: any) => {
 				inputStyle={{padding: 0, paddingTop: Platform.OS == 'android' ? 2 : 0, ...inputStyle}}
 				onPress={() => onPress && onPress()}
 				iconCustomRight={iconCustomRight}
+				onSubmitEditing={() => onSubmitEditing && onSubmitEditing()}
 			/>
 			{isCancelButtonShow && (
 				<OButton

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

@@ -0,0 +1,160 @@
+import React, { useState } from 'react'
+import { View, TouchableOpacity } from 'react-native'
+import { useLanguage, useSession, useUtils, Sessions as SessionsController } from 'ordering-components/native'
+import NavBar from '../NavBar'
+import { SessionsParams } from '../../types'
+import { OAlert } from '../../../../../src/components/shared'
+import { OButton, OIcon, OText } from '../shared'
+import { useTheme } from 'styled-components/native'
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
+import AntIcon from 'react-native-vector-icons/AntDesign'
+
+import {
+  SessionsWrapper,
+  SessionItem,
+  DurationWrapper
+} from './styles'
+
+export const SessionsUI = (props: SessionsParams) => {
+  const {
+    navigation,
+    sessionsList,
+    actionState,
+    handleDeleteSession,
+    handleDeleteAllSessions
+  } = props
+
+  const [, t] = useLanguage()
+  const [{ user }] = useSession()
+  const [{ parseDate }] = useUtils()
+	const theme = useTheme()
+  const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
+  const goToBack = () => navigation?.canGoBack() && navigation.goBack()
+
+  const onDeleteSession = (session: any) => {
+    setConfirm({
+      open: true,
+      title: t('WEB_APPNAME', 'Ordering'),
+      content: [t('QUESTION_DELETE_SESSION', 'Are you sure to delete this session?')],
+      handleOnAccept: () => {
+        handleDeleteSession(session)
+        setConfirm({ ...confirm, open: false })
+      }
+    })
+  }
+
+  const onDeleteAllSessions = (isOldUser: any, deleteCurrent: any) => {
+    setConfirm({
+      open: true,
+      title: t('WEB_APPNAME', 'Ordering'),
+      content:
+        isOldUser
+          ? [t('QUESTION_ENABLE_ALL_SESSIONS', 'Are you sure to enable all sessions?')]
+          : deleteCurrent
+            ? [t('QUESTION_DELETE_ALL_SESSIONS', 'Are you sure that you want to delete all sessions?')]
+            : [t('QUESTION_DELETE_ALL_SESSIONS_EXCEPT_CURRENT', 'Are you sure that you want to delete all sessions except current?')],
+      handleOnAccept: () => {
+        handleDeleteAllSessions(deleteCurrent)
+        setConfirm({ ...confirm, open: false })
+      }
+    })
+  }
+
+  return (
+    <>
+      <NavBar
+        title={t('SESSIONS', 'Sessions')}
+        titleAlign={'center'}
+        onActionLeft={goToBack}
+        showCall={false}
+        paddingTop={10}
+        btnStyle={{ paddingLeft: 0 }}
+      />
+      {user?.session_strategy === 'jwt_session' ? (
+        <>
+          {sessionsList.loading ? (
+            [...Array(5).keys()].map(i => (
+              <SessionItem key={i}>
+                <Placeholder Animation={Fade}>
+                  <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                    <View style={{ flex: 1}}>
+                      <PlaceholderLine width={40} />
+                      <PlaceholderLine width={40} />
+                    </View>
+                    <PlaceholderLine width={5}/>
+                  </View>
+                </Placeholder>
+              </SessionItem>
+            ))
+          ) : (
+            sessionsList.sessions.length > 0 ? (
+              <SessionsWrapper>
+                {sessionsList.sessions.map((session: any) => (
+                  <SessionItem key={session.id}>
+                    <DurationWrapper>
+                      <OText>{parseDate(session.created_at)}</OText>
+                      <OText>{parseDate(session.valid_thru)}</OText>
+                    </DurationWrapper>
+                    {session.current && (
+                      <OText mLeft={15} style={{ flex: 1 }}>({t('CURRENT', 'Current')})</OText>
+                    )}
+                    <TouchableOpacity
+                      onPress={() => onDeleteSession(session)}
+                    >
+                      <AntIcon name='close' size={16} color={theme.colors.red} />
+                    </TouchableOpacity>
+                  </SessionItem>
+                ))}
+                <OButton
+                  text={t('DELETE_ALL_SESSIONS', 'Delete all sessions')}
+                  isDisabled={actionState.loading}
+                  textStyle={{ color: theme.colors.white, fontSize: 14 }}
+                  onClick={() => onDeleteAllSessions(false, true)}
+                  style={{ borderRadius: 7.6, marginTop: 30 }}
+                />
+                <OButton
+                  text={t('DELETE_ALL_SESSIONS_EXCEPT_CURRENT', 'Delete all sessions except current')}
+                  isDisabled={actionState.loading}
+                  textStyle={{ color: theme.colors.white, fontSize: 14 }}
+                  onClick={() => onDeleteAllSessions(false, false)}
+                  style={{ borderRadius: 7.6, marginTop: 20 }}
+                />
+              </SessionsWrapper>
+             ) : (
+              <OText>{t('YOU_DONT_HAVE_ANY_SESSIONS', 'You don\'t have any sessions')}</OText>
+            )
+          )}
+        </>
+      ) : (
+        <View>
+          <OText>
+            {t('YOU_DONT_HAVE_ENABLED_THE_SESSIONS', 'You don\'t have enabled the sessions, please active them to have a better control of your sessions.')}
+          </OText>
+          <OButton
+            text={t('ACTIVE_SESSIONS', 'Active sessions')}
+            isDisabled={actionState.loading}
+            textStyle={{ color: theme.colors.white, fontSize: 14 }}
+            onClick={() => onDeleteAllSessions(true, false)}
+            style={{ borderRadius: 7.6, marginTop: 20 }}
+          />
+        </View>
+      )}
+      <OAlert
+        open={confirm.open}
+        title={confirm.title}
+        content={confirm.content}
+        onAccept={confirm.handleOnAccept}
+        onCancel={() => setConfirm({ ...confirm, open: false, title: null })}
+        onClose={() => setConfirm({ ...confirm, open: false, title: null })}
+      />
+    </>
+  )
+}
+
+export const Sessions = (props: SessionsParams) => {
+  const sessionsProps = {
+    ...props,
+    UIComponent: SessionsUI
+  }
+  return <SessionsController {...sessionsProps} />
+}