ordering-ui-react-native 0.15.57 → 0.15.58-release

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { PromotionsController, useLanguage, useUtils, useEvent } from 'ordering-components/native'
+import { PromotionsController, useLanguage, useUtils } from 'ordering-components/native'
 import {
     PromotionsContainer,
     SingleOfferContainer,
@@ -17,15 +17,18 @@ 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 } from 'react-native'
+import { View, StyleSheet, ScrollView, Platform, RefreshControl } from 'react-native'
 import FastImage from 'react-native-fast-image'
 import { PromotionParams } from '../../types'
-const PromotionsUI = (props : PromotionParams) => {
+import { Container } from '../../layouts/Container'
+
+const PromotionsUI = (props: PromotionParams) => {
     const {
         navigation,
         offersState,
         handleSearchValue,
         searchValue,
+        loadOffers,
         offerSelected,
         setOfferSelected
     } = props
@@ -65,20 +68,26 @@ const PromotionsUI = (props : PromotionParams) => {
 
     const [, t] = useLanguage()
     const [{ parseDate, parsePrice, optimizeImage }] = useUtils()
-    const [events] = useEvent()
     const [openModal, setOpenModal] = useState(false)
+    const [refreshing] = useState(false);
 
-    const handleClickOffer = (offer : any) => {
+    const handleClickOffer = (offer: any) => {
         setOpenModal(true)
         setOfferSelected(offer)
     }
 
-    const handleBusinessClick = (business : any) => {
-        events.emit('go_to_page', { page: 'business', params: { store: business.slug } })
+    const handleBusinessClick = (store: any) => {
+        setOpenModal(false)
+        navigation.navigate('Business', { store: store.slug })
     }
 
-    const filteredOffers = offersState?.offers?.filter((offer : any) => offer.name.toLowerCase().includes(searchValue.toLowerCase()))
+    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
@@ -86,141 +95,150 @@ const PromotionsUI = (props : PromotionParams) => {
             : t('SERVICE_FEE', 'Service fee')
 
     return (
-        <PromotionsContainer>
+        <Container
+            noPadding
+            refreshControl={
+                <RefreshControl
+                    refreshing={refreshing}
+                    onRefresh={() => handleOnRefresh()}
+                />
+            }
+        >
             <NavBar
-                onActionLeft={() => navigation.goBack()}
-                btnStyle={{ paddingLeft: 0 }}
-                paddingTop={20}
-                style={{ paddingBottom: 0, flexDirection: 'column', alignItems: 'flex-start' }}
                 title={t('PROMOTIONS', 'Promotions')}
                 titleAlign={'center'}
-                titleStyle={{ fontSize: 16, marginRight: 0, marginLeft: 0, marginBottom: 10 }}
-                titleWrapStyle={{ paddingHorizontal: 0 }}
+                onActionLeft={() => navigation.goBack()}
+                showCall={false}
+                style={{ paddingVertical: Platform.OS === 'ios' ? 0 : 20, marginLeft: 20 }}
             />
-            <SearchBarContainer>
-                <SearchBar
-                    placeholder={t('SEARCH_OFFERS', 'Search offers')}
-                    onSearch={handleSearchValue}
-                />
-            </SearchBarContainer>
+            <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 && (
+                    <>
+                        {[...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>
                     ))}
-                </>
-            )}
-            {((!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}>{offer?.name}</OText>
-                            {offer?.description && (
-                                <OText style={styles.offerDescription}>{offer?.description}</OText>
-                            )}
-                            <OText style={styles.offerExtraInfo}>
-                                {t('EXPIRES', 'Expires')} {parseDate(offer?.end, { outputFormat: 'MMM DD, YYYY' })}
-                            </OText>
-                            <AvailableBusinesses>
-                                <OText style={styles.offerExtraInfo}>{t('APPLY_FOR', 'Apply for')}:</OText>
-                                {offer.businesses.map((business: any, i: number) => (
-                                    <OText style={styles.offerExtraInfo} key={business?.id}>{' '}{business?.name}{i + 1 < offer.businesses?.length ? ',' : ''}</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
+                </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 purshase 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>{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>
+                    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) => {
+export const Promotions = (props: PromotionParams) => {
     const PromotionsProps = {
         ...props,
         UIComponent: PromotionsUI

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

@@ -2,12 +2,13 @@ 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%;
-  height: 80px;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 20px;
@@ -24,15 +25,6 @@ export const SearchBarContainer = styled.View`
   width: 100%;
   justify-content: flex-start;
   margin-bottom: 20px;
-  .search-bar {
-    justify-content: flex-start;
-    input {
-      width: 100%;
-    }
-  }
-  .clear {
-    right: 0;
-  }
 `
 
 export const SingleBusinessOffer = styled.View`
@@ -48,11 +40,6 @@ export const OfferData = styled.View`
   display: flex;
   align-items: center;
   flex-direction: column;
-  p{
-    color: #909BA9;
-    margin: 3px;
-    font-size: 14px;
-  }
 `
 
 export const Code = styled.View`
@@ -62,14 +49,7 @@ export const Code = styled.View`
   margin-bottom: 10px;
 `
 
-export const ValueOfOffer = styled.View`
-  p{
-    font-size: 16px;
-  }
-  span{
-    font-size: 20px;
-  }
-`
+export const ValueOfOffer = styled.View``
 
 export const BusinessInfo = styled.View`
   flex: 1;

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

@@ -20,7 +20,12 @@ export const SearchBar = (props: any) => {
 		inputStyle,
 		onPress,
 		isDisabled,
-		iconCustomRight
+		iconCustomRight,
+		onSubmitEditing,
+		blurOnSubmit,
+		inputContainerStyles,
+		containerStyles,
+		hideIcon
 	} = props
 
 	const theme = useTheme();
@@ -75,19 +80,20 @@ export const SearchBar = (props: any) => {
 	}
 
 	return (
-		<Pressable style={[styles.container, { height: height }]}>
+		<Pressable style={[styles.container, containerStyles, { height: height }]}>
 			<OInput
 				value={searchValue}
 				onChange={onChangeSearch}
-				style={styles.inputStyle}
+				style={{...styles.inputStyle, ...inputContainerStyles}}
 				placeholder={placeholder}
-				icon={theme.images.general.search}
+				icon={!hideIcon && theme.images.general.search}
 				isDisabled={isDisabled}
 				iconStyle={{ width: 12 }}
 				returnKeyType='done'
 				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} />
+}

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

@@ -0,0 +1,15 @@
+import styled from 'styled-components/native'
+
+export const SessionsWrapper = styled.View`
+`
+export const SessionItem = styled.View`
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding-vertical: 15px;
+  border-bottom-color: ${(props: any) => props.theme.colors.lightGray};
+  border-bottom-width: 1px;
+`
+export const DurationWrapper = styled.View`
+  /* flex-direction: row; */
+`