ordering-ui-react-native 0.15.16 → 0.15.18-release

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; */
+`

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

@@ -7,14 +7,20 @@ import {
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { SingleProductCardParams } from '../../types';
-import { CardContainer, CardInfo, SoldOut, QuantityContainer, PricesContainer } from './styles';
+import { CardContainer, CardInfo, SoldOut, QuantityContainer, PricesContainer, RibbonBox, LogoWrapper } from './styles';
 import { StyleSheet } from 'react-native';
 import { OText, OIcon } from '../shared';
 import FastImage from 'react-native-fast-image'
+import { shape } from '../../utils';
 
-export const SingleProductCard = (props: SingleProductCardParams) => {
+function SingleProductCardPropsAreEqual(prevProps : any, nextProps : any) {
+	return JSON.stringify(prevProps.product) === JSON.stringify(nextProps.product) && 
+	prevProps.isSoldOut === nextProps.isSoldOut && 
+	prevProps.productAddedToCartLength === nextProps.productAddedToCartLength
+}
+
+export const SingleProductCard = React.memo((props: SingleProductCardParams) => {
 	const {
-		businessId,
 		product,
 		isSoldOut,
 		onProductClick,
@@ -46,8 +52,7 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 		productStyle: {
 			width: 75,
 			height: 75,
-			borderRadius: 7.6,
-			marginStart: 12
+			borderRadius: 7.6
 		},
 		quantityContainer: {
 			position: 'absolute',
@@ -136,21 +141,42 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 					{product?.description}
 				</OText>
 			</CardInfo>
-			{product?.images ? (
-				<FastImage
-					style={styles.productStyle}
-					source={{
-						uri: optimizeImage(product?.images, 'h_250,c_limit'),
-						priority: FastImage.priority.normal,
-					}}
-					resizeMode={FastImage.resizeMode.cover}
-				/>
-			) : (
-				<OIcon
-					src={theme?.images?.dummies?.product}
-					style={styles.productStyle}
-				/>
-			)}
+			<LogoWrapper>
+				{product?.ribbon?.enabled && (
+					<RibbonBox
+						bgColor={product?.ribbon?.color}
+						isRoundRect={product?.ribbon?.shape === shape?.rectangleRound}
+						isCapsule={product?.ribbon?.shape === shape?.capsuleShape}
+					>
+						<OText
+							size={10}
+							weight={'400'}
+							color={theme.colors.white}
+							numberOfLines={2}
+							ellipsizeMode='tail'
+							lineHeight={13}
+						>
+							{product?.ribbon?.text}
+						</OText>
+					</RibbonBox>
+				)}
+				{product?.images ? (
+					<FastImage
+						style={styles.productStyle}
+						source={{
+							uri: optimizeImage(product?.images, 'h_250,c_limit'),
+							priority: FastImage.priority.normal,
+						}}
+						resizeMode={FastImage.resizeMode.cover}
+					/>
+				) : (
+					<OIcon
+						src={theme?.images?.dummies?.product}
+						style={styles.productStyle}
+					/>
+				)}
+			</LogoWrapper>
+
 			{(isSoldOut || maxProductQuantity <= 0) && (
 				<SoldOut>
 					<OText size={12} weight="bold" color={theme.colors.textSecondary} style={styles.soldOutTextStyle}>
@@ -160,4 +186,4 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 			)}
 		</CardContainer>
 	);
-};
+}, SingleProductCardPropsAreEqual);

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

@@ -1,4 +1,4 @@
-import styled from 'styled-components/native'
+import styled, { css } from 'styled-components/native'
 
 export const CardContainer = styled.TouchableOpacity`
   flex: 1;
@@ -31,3 +31,30 @@ export const PricesContainer = styled.View`
   flex-direction: row;
   align-items: center;
 `
+
+export const LogoWrapper = styled.View`
+  position: relative;
+  margin-left: 12px;
+`
+
+export const RibbonBox = styled.View`
+  position: absolute;
+  z-index: 1;
+  top: -4px;
+  right: -4px;
+  background-color: ${(props: any) => props.theme.colors.primary};
+  padding: 1px 8px;
+  max-width: 60px;
+
+  ${(props: any) => props.bgColor && css`
+    background-color: ${props.bgColor};
+  `}
+
+  ${(props: any) => props.isRoundRect && css`
+    border-radius: 7.6px;
+  `}
+
+  ${(props: any) => props.isCapsule && css`
+    border-radius: 50px;
+  `}
+`

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { View, StyleSheet, useWindowDimensions, Keyboard } from 'react-native';
-import { useLanguage, useSession, useConfig } from 'ordering-components/native';
+import { useLanguage, useSession } from 'ordering-components/native';
 import {
 	StripeProvider,
 	CardField,
@@ -13,7 +13,6 @@ import { ErrorMessage } from './styles';
 import { StripeElementsForm as StripeFormController } from './naked';
 import { OButton, OText } from '../shared';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { StripeMethodForm } from '../../../../../src/components/StripeMethodForm';
 
 const StripeElementsFormUI = (props: any) => {
 	const {
@@ -23,17 +22,12 @@ const StripeElementsFormUI = (props: any) => {
 		businessId,
 		requirements,
 		stripeTokenHandler,
-		methodsPay,
-		paymethod,
-		onCancel,
-		cart,
 	} = props;
 
 	const theme = useTheme();
 
 	const [, t] = useLanguage();
 	const [{ user }] = useSession();
-	const [{ configs }] = useConfig();
 	const [card, setCard] = useState<any>(null);
 	const [isCompleted, setIsCompleted] = useState(false);
 	const [errors, setErrors] = useState('')
@@ -43,30 +37,30 @@ const StripeElementsFormUI = (props: any) => {
 	const { top, bottom } = useSafeAreaInsets();
 	const [isKeyboardShow, setIsKeyboardShow] = useState(false);
 
-	let billingDetails: any = {}
+  let billingDetails: any = {}
 
-	if (user?.name || user?.lastname) {
-		if (user?.name) {
-			billingDetails.name = user?.name
-		}
-		if (user?.lastname) {
-			billingDetails.name = `${billingDetails?.name} ${user?.lastname}`
-		}
-	}
+  if (user?.name || user?.lastname) {
+    if (user?.name) {
+      billingDetails.name = user?.name
+    }
+    if (user?.lastname) {
+      billingDetails.name = `${billingDetails?.name} ${user?.lastname}`
+    }
+  }
 
-	if (user?.email) {
-		billingDetails.email = user?.email
-	}
+  if (user?.email) {
+    billingDetails.email = user?.email
+  }
 
-	if (user?.address) {
-		billingDetails.addressLine1 = user?.address
-	}
+  if (user?.address) {
+    billingDetails.addressLine1 = user?.address
+  }
 
 	const createPayMethod = async () => {
-		const params: any = { type: 'Card' }
-		if (Object.keys(billingDetails).length > 0) {
-			params.billingDetails = billingDetails
-		}
+    const params: any = { type: 'Card' }
+    if (Object.keys(billingDetails).length > 0) {
+      params.billingDetails = billingDetails
+    }
 		try {
 			setCreatePmLoading(true)
 			const { paymentMethod } = await createPaymentMethod(params);
@@ -99,10 +93,10 @@ const StripeElementsFormUI = (props: any) => {
 			createPayMethod();
 			return
 		}
-		const params: any = { type: 'Card' }
-		if (Object.keys(billingDetails).length > 0) {
-			params.billingDetails = billingDetails
-		}
+    const params: any = { type: 'Card' }
+    if (Object.keys(billingDetails).length > 0) {
+      params.billingDetails = billingDetails
+    }
 		try {
 			const { setupIntent, error } = await confirmSetupIntent(requirements, params);
 
@@ -158,35 +152,27 @@ const StripeElementsFormUI = (props: any) => {
 		<View style={{ ...styles.container, height: height - top - bottom - 60 - (isKeyboardShow ? 250 : 0) }}>
 			{publicKey ? (
 				<View style={{ flex: 1 }}>
-					<StripeProvider
-						publishableKey={publicKey}
-						merchantIdentifier={`merchant.${configs.apple_app_id}`}
-					>
-						{methodsPay?.includes(paymethod) ? (
-							<StripeMethodForm
-								handleSource={handleSource}
-								onCancel={onCancel}
-								cart={cart}
-								setErrors={setErrors}
-								paymethod={paymethod}
-								devMode={publicKey?.includes('test')}
-							/>
-						) : (
-							<CardField
-								postalCodeEnabled={true}
-								cardStyle={{
-									backgroundColor: '#FFFFFF',
-									textColor: '#000000',
-								}}
-								style={{
-									width: '100%',
-									height: 50,
-									marginVertical: 30,
-									zIndex: 9999,
-								}}
-								onCardChange={(cardDetails: any) => setCard(cardDetails)}
-							/>
-						)}
+					<StripeProvider publishableKey={publicKey}>
+						<CardField
+							postalCodeEnabled={false}
+							cardStyle={{
+								backgroundColor: '#FFFFFF',
+								textColor: '#000000',
+								fontSize: 17,
+								styles: {
+									
+								}
+							}}
+							style={{
+								width: '100%',
+								height: 50,
+								marginVertical: 50,
+								borderWidth: 1,
+								borderColor: theme.colors.border,
+								borderRadius: 7.6,
+							}}
+							onCardChange={(cardDetails: any) => setCard(cardDetails)}
+						/>
 					</StripeProvider>
 					{!!errors && (
 						<ErrorMessage>
@@ -211,19 +197,16 @@ const StripeElementsFormUI = (props: any) => {
 					</OText>
 				</ErrorMessage>
 			)}
-			{!methodsPay?.includes(paymethod) && (
-				<OButton
-					text={t('SAVE_CARD', 'Save card')}
-					bgColor={isCompleted ? theme.colors.primary : theme.colors.backgroundGray}
-					borderColor={isCompleted ? theme.colors.primary : theme.colors.backgroundGray}
-					style={styles.btnAddStyle}
-					textStyle={{ color: 'white' }}
-					imgRightSrc={null}
-					onClick={() => handleSaveCard()}
-					isDisabled={!isCompleted}
-					isLoading={confirmSetupLoading || values.loadingAdd || createPmLoading}
-				/>
-			)}
+			<OButton
+				text={t('SAVE_CARD', 'Save card')}
+				bgColor={isCompleted ? theme.colors.primary : theme.colors.backgroundGray}
+				borderColor={isCompleted ? theme.colors.primary : theme.colors.backgroundGray}
+				style={styles.btnAddStyle}
+				textStyle={{ color: 'white', fontSize: 14 }}
+				imgRightSrc={null}
+				onClick={isCompleted ? () => handleSaveCard() : () => { }}
+				isLoading={confirmSetupLoading || values.loadingAdd || createPmLoading}
+			/>
 		</View>
 	)
 }

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

@@ -1,5 +1,5 @@
-import React, { Mixin } from 'react'
-import { useLanguage } from 'ordering-components/native'
+import React from 'react'
+import { useLanguage, useUtils } from 'ordering-components/native'
 import { SingleProductCard } from '../SingleProductCard'
 import { TaxInformationContainer, ProductContainer } from './styles'
 import { OText } from '../shared'
@@ -9,12 +9,13 @@ interface taxInformationParams {
     name: string,
     description?: string,
     rate: string | number,
-    type: number,
+    type: string | number,
     fixed?: number,
     percentage?: number,
     id: number,
-    discounts?: any
-  } | null,
+    discounts?: any,
+    rate_type?: number
+  },
   products: Array<any>,
   type: string
 }
@@ -27,8 +28,13 @@ export const TaxInformation = (props: taxInformationParams) => {
   } = props
 
   const [, t] = useLanguage()
+  const [{ parsePrice }] = useUtils()
 
   const includedOnPriceString = data?.type === 1 ? `(${t('INCLUDED_ON_PRICE', 'Included on price')})` : `(${t('NOT_INCLUDED_ON_PRICE', 'Not included on price')})`
+  const offersHideArray = ['offer_target_2', 'offer_target_3']
+  const hideProductsSectionOffers = offersHideArray.includes(type)
+  const dataHideArray : Array<string | number> = ['platform', 'business']
+  const hideProductsSectionData = dataHideArray.includes(data.type)
 
   const getFilterValidation = (product: any) => {
     return (
@@ -52,8 +58,12 @@ export const TaxInformation = (props: taxInformationParams) => {
 
   return (
     <TaxInformationContainer>
+      <OText size={24} style={{ alignSelf: 'center', textAlign: 'center' }} mBottom={10}>
+      {`${data?.name ||
+              t('INHERIT_FROM_BUSINESS', 'Inherit from business')} ${data?.rate_type !== 2 ? `(${typeof data?.rate === 'number' ? `${data?.rate}%` : `${parsePrice(data?.fixed ?? 0)} + ${data?.percentage}%`})` : ''}  `}
+      </OText>
       {!!data?.description ? (
-        <OText size={24} style={{ alignSelf: 'center', textAlign: 'center' }} mBottom={10}>
+        <OText size={20} style={{ alignSelf: 'center', textAlign: 'center' }} mBottom={10}>
           {t('DESCRIPTION', 'Description')}: {data?.description} {data?.type && !type?.includes('offer') && includedOnPriceString}
         </OText>
       ) : (
@@ -61,7 +71,7 @@ export const TaxInformation = (props: taxInformationParams) => {
           {t('WITHOUT_DESCRIPTION', 'Without description')}
         </OText>
       )}
-      {!(type === 'offer_target_2' || type === 'offer_target_3') && (
+      {!hideProductsSectionOffers && !hideProductsSectionData && (
         <>
           <OText>{t('OTHER_PRODUCTS_WITH_THIS', 'Other products with this')} {getTypeString()}:</OText>
           <ProductContainer>