ordering-ui-react-native 0.11.53 → 0.11.57

package/themes/kiosk/src/components/CartBottomSheet/styles.tsx

@@ -1,53 +1,53 @@
-import styled, { css } from 'styled-components/native';
-
-export const StyledContainer = styled.ScrollView`
-	position: absolute;
-	zIndex: 1000;
-	width: 100%;
-	background-color: #fff;
-	padding: 20px;
-	bottom: 0;
-	shadow-color: #000;
-	shadow-opacity:  0.4;
-	shadow-radius: 3px;
-	elevation: 15;
-	${(props: any) => props.height && css`
-		height: ${props.height}px;
-	`}
-`
-
-export const StyledContent = styled.ScrollView`
-	padding: 0 20px;
-	border-radius: 6px;
-	background-color: ${(props: any) => props.theme.colors.whiteGray};
-	${(props: any) => props.height && css`
-		minHeight: ${props.height}px;
-	`}
-	${(props: any) => props.height && css`
-		maxHeight: ${props.height}px;
-	`}
-`
-export const StyledTopBar = styled.View`
-	padding: 20px 0;
-	width: 100%;
-	flex-direction: row;
-	justify-content: space-between;
-`
-
-export const StyledBottomContent = styled.View`
-	padding-bottom: 10px;
-	width: 100%;
-	align-items: center;
-	justify-content: center;
-	${(props: any) => props.height && css`
-		minHeight: ${props.height}px;
-	`}
-`
-
-export const StyledCartItem = styled.View`
-	width: 100%;
-	height: 60px;
-	flex-direction: row;
-	justify-content: space-between;
-	margin-bottom: 14px;
-`
+import styled, { css } from 'styled-components/native';
+
+export const StyledContainer = styled.ScrollView`
+	position: absolute;
+	zIndex: 1000;
+	width: 100%;
+	background-color: #fff;
+	padding: 20px;
+	bottom: 0;
+	shadow-color: #000;
+	shadow-opacity:  0.4;
+	shadow-radius: 3px;
+	elevation: 15;
+	${(props: any) => props.height && css`
+		height: ${props.height}px;
+	`}
+`
+
+export const StyledContent = styled.ScrollView`
+	padding: 0 20px;
+	border-radius: 6px;
+	background-color: ${(props: any) => props.theme.colors.whiteGray};
+	${(props: any) => props.height && css`
+		minHeight: ${props.height}px;
+	`}
+	${(props: any) => props.height && css`
+		maxHeight: ${props.height}px;
+	`}
+`
+export const StyledTopBar = styled.View`
+	padding: 20px 0;
+	width: 100%;
+	flex-direction: row;
+	justify-content: space-between;
+`
+
+export const StyledBottomContent = styled.View`
+	padding-bottom: 10px;
+	width: 100%;
+	align-items: center;
+	justify-content: center;
+	${(props: any) => props.height && css`
+		minHeight: ${props.height}px;
+	`}
+`
+
+export const StyledCartItem = styled.View`
+	width: 100%;
+	height: 60px;
+	flex-direction: row;
+	justify-content: space-between;
+	margin-bottom: 14px;
+`

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

@@ -1,70 +1,70 @@
-import React, { useState } from 'react';
-import { useLanguage } from 'ordering-components/native';
-
-import { CCNotCarts } from './styles';
-
-import { Cart } from '../Cart';
-import { OText } from '../shared';
-import Spinner from 'react-native-loading-spinner-overlay';
-import { Cart as TypeCart } from '../../types';
-
-export const CartContent = (props: any) => {
-  const {
-    cart,
-    navigation,
-    isOrderStateCarts,
-    CustomCartComponent,
-    extraPropsCustomCartComponent,
-    showNotFound,
-  }: Props = props
-
-  const [, t] = useLanguage()
-  const [isCartsLoading, setIsCartsLoading] = useState(false)
-
-  const cartProps = {
-    navigation,
-    cart,
-    onNavigationRedirect: props.onNavigationRedirect,
-    isCartsLoading,
-    setIsCartsLoading,
-  }
-
-  const content = (
-    <>
-      {(isOrderStateCarts && cart) && (
-        <>
-          {CustomCartComponent
-            ? <CustomCartComponent
-                {...cartProps}
-                {...(extraPropsCustomCartComponent || {})}
-              />
-            : <Cart {...cartProps} />
-          }
-        </>
-      )}
-      {(!cart && showNotFound) && (
-        <CCNotCarts>
-          <OText size={24} style={{ textAlign: 'center' }}>
-            {t('CARTS_NOT_FOUND', 'You don\'t have carts available')}
-          </OText>
-        </CCNotCarts>
-      )}
-      <Spinner visible={isCartsLoading} />
-    </>
-  )
-
-  return content;
-}
-
-CartContent.defaultProps = {
-  showNotFound: true
-}
-
-interface Props {
-  cart: TypeCart,
-  isOrderStateCarts: any,
-  navigation: any,
-  CustomCartComponent?: any,
-  extraPropsCustomCartComponent?: JSON,
-  showNotFound?: boolean,
-}
+import React, { useState } from 'react';
+import { useLanguage } from 'ordering-components/native';
+
+import { CCNotCarts } from './styles';
+
+import { Cart } from '../Cart';
+import { OText } from '../shared';
+import Spinner from 'react-native-loading-spinner-overlay';
+import { Cart as TypeCart } from '../../types';
+
+export const CartContent = (props: any) => {
+  const {
+    cart,
+    navigation,
+    isOrderStateCarts,
+    CustomCartComponent,
+    extraPropsCustomCartComponent,
+    showNotFound,
+  }: Props = props
+
+  const [, t] = useLanguage()
+  const [isCartsLoading, setIsCartsLoading] = useState(false)
+
+  const cartProps = {
+    navigation,
+    cart,
+    onNavigationRedirect: props.onNavigationRedirect,
+    isCartsLoading,
+    setIsCartsLoading,
+  }
+
+  const content = (
+    <>
+      {(isOrderStateCarts && cart) && (
+        <>
+          {CustomCartComponent
+            ? <CustomCartComponent
+                {...cartProps}
+                {...(extraPropsCustomCartComponent || {})}
+              />
+            : <Cart {...cartProps} />
+          }
+        </>
+      )}
+      {(!cart && showNotFound) && (
+        <CCNotCarts>
+          <OText size={24} style={{ textAlign: 'center' }}>
+            {t('CARTS_NOT_FOUND', 'You don\'t have carts available')}
+          </OText>
+        </CCNotCarts>
+      )}
+      <Spinner visible={isCartsLoading} />
+    </>
+  )
+
+  return content;
+}
+
+CartContent.defaultProps = {
+  showNotFound: true
+}
+
+interface Props {
+  cart: TypeCart,
+  isOrderStateCarts: any,
+  navigation: any,
+  CustomCartComponent?: any,
+  extraPropsCustomCartComponent?: JSON,
+  showNotFound?: boolean,
+}

package/themes/kiosk/src/components/CartContent/styles.tsx

@@ -1,15 +1,15 @@
-import styled from 'styled-components/native';
-
-export const CCNotCarts = styled.View`
-  height: 300px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 80%;
-  margin: auto;
-`
-
-export const CCList = styled.ScrollView`
-  padding: 10px 0px;
-`
+import styled from 'styled-components/native';
+
+export const CCNotCarts = styled.View`
+  height: 300px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 80%;
+  margin: auto;
+`
+
+export const CCList = styled.ScrollView`
+  padding: 10px 0px;
+`

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

@@ -1,191 +1,191 @@
-import React, { useState } from 'react';
-import { View, Animated, TouchableOpacity } from 'react-native';
-import { useLanguage, useUtils } from 'ordering-components/native';
-
-import {
-  StyledCartItem,
-  AccordionContent,
-  ProductOptionsList,
-  ProductOption,
-  ProductSubOption,
-  ProductComment
-} from './styles';
-import { OButton, OImage, OText } from '../shared';
-import { Product } from '../../types';
-import QuantityControl from '../QuantityControl';
-import { LANDSCAPE, useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation';
-import { useTheme } from 'styled-components/native';
-
-const CartItem = (props: CartItemProps) => {
-  const theme = useTheme()
-  const [, t] = useLanguage();
-  const [orientationState] = useDeviceOrientation();
-  const [{ parsePrice }] = useUtils();
-
-  const [isActive, setActiveState] = useState(false);
-
-  const {
-    isCartPending,
-    isCartProduct,
-    product,
-    changeQuantity,
-    getProductMax,
-    onDeleteProduct,
-    onEditProduct,
-    isFromCheckout,
-  } = props
-
-  const productInfo = () => {
-    if (isCartProduct) {
-      const ingredients = JSON.parse(JSON.stringify(Object.values(product?.ingredients ?? {})))
-      let options = JSON.parse(JSON.stringify(Object.values(product?.options ?? {})))
-
-      options = options.map((option: any) => {
-        option.suboptions = Object.values(option.suboptions ?? {})
-        return option
-      })
-      return {
-        ...productInfo,
-        ingredients,
-        options
-      }
-    }
-    return product
-  }
-
-  const getFormattedSubOptionName = ({ quantity, name, position, price }: { quantity: number, name: string, position: string, price: number }) => {
-    const pos = position ? `(${position})` : ''
-    return `${quantity} x ${name} ${pos} +${price}`
-  }
-
-  return (
-    <>
-      <TouchableOpacity
-        onPress={() => (!product?.valid_menu && isCartProduct)
-          ? {}
-          : setActiveState(!isActive)}
-        activeOpacity={1}
-      >
-        <StyledCartItem>
-          <View style={{ flexDirection: 'row' }}>
-            <OImage
-              source={{ uri: product?.images || '' }}
-              height={60}
-              width={60}
-              resizeMode="cover"
-              borderRadius={6}
-            />
-
-            <View style={{ flexDirection: 'column', justifyContent: 'space-evenly', marginHorizontal: 15, marginTop: 10 }}>
-              <View>
-                <OText
-                  style={{
-                    maxWidth: orientationState?.orientation === LANDSCAPE
-                      ? orientationState.dimensions.width * 0.2
-                      : orientationState.dimensions.width * 0.5
-                  }}
-                  numberOfLines={2}
-                  size={18}
-                  weight="700"
-                >
-                  {product?.name || ''}
-                </OText>
-              </View>
-
-              <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}>
-                <OButton
-                  bgColor="transparent"
-                  borderColor="transparent"
-                  imgLeftSrc={theme.images.general.edit}
-                  text={t('EDIT', 'Edit')}
-                  style={{ justifyContent: 'flex-start', paddingLeft: 0, maxWidth: 80 }}
-                  textStyle={{
-                    color: theme.colors.primary,
-                    marginLeft: 6,
-                  }}
-                  onClick={() => { onEditProduct ? onEditProduct(product) : null }}
-                />
-              </View>
-            </View>
-          </View>
-
-          <View style={{ alignItems: "flex-end" }} >
-            <OText
-              size={18}
-              weight="700"
-              color={theme.colors.primary}
-            >
-              {parsePrice(product?.total || product?.price)}
-            </OText>
-
-            <QuantityControl
-              val={product?.quantity || 0}
-              onDecremet={(product?.quantity || 0 > 1)
-                ? (() => { changeQuantity && changeQuantity(product, (product?.quantity || 0) - 1) })
-                : undefined
-              }
-              onIncrement={changeQuantity && (() => { changeQuantity(product, (product?.quantity || 0) + 1) })}
-              onDelete={onDeleteProduct && (() => { onDeleteProduct(product) })}
-            />
-          </View>
-        </StyledCartItem>
-      </TouchableOpacity>
-
-      <View style={{ display: isActive ? 'flex' : 'none' }}>
-        <Animated.View>
-          <AccordionContent>
-            {productInfo()?.ingredients.length > 0 && productInfo()?.ingredients.some((ingredient: any) => !ingredient.selected) && (
-              <ProductOptionsList>
-                <OText size={16}>{t('INGREDIENTS', 'Ingredients')}</OText>
-                {productInfo()?.ingredients.map((ingredient: any) => !ingredient.selected && (
-                  <OText size={16} key={ingredient.id} style={{ marginLeft: 10 }}>{t('NO', 'No')} {ingredient.name}</OText>
-                ))}
-              </ProductOptionsList>
-            )}
-            {productInfo()?.options.length > 0 && (
-              <ProductOptionsList>
-                {productInfo()?.options.map((option: any, i: number) => (
-                  <ProductOption key={option.id + i}>
-                    <OText size={16}>{option.name}</OText>
-                    {option.suboptions.map((suboption: any) => (
-                      <ProductSubOption key={suboption.id}>
-                        <OText size={16}>
-                          {getFormattedSubOptionName({
-                            quantity: suboption.quantity,
-                            name: suboption.name,
-                            position: (suboption.position !== 'whole') ? t(suboption.position.toUpperCase(), suboption.position) : '',
-                            price: parsePrice(suboption.price)
-                          })}
-                        </OText>
-                      </ProductSubOption>
-                    ))}
-                  </ProductOption>
-                ))}
-              </ProductOptionsList>
-            )}
-            {product && product?.comment && (
-              <ProductComment>
-                <OText size={16}>{t('SPECIAL_COMMENT', 'Special Comment')}</OText>
-                <OText size={16}>{product.comment}</OText>
-              </ProductComment>
-            )}
-          </AccordionContent>
-        </Animated.View>
-      </View>
-    </>
-  );
-}
-
-interface CartItemProps {
-  isCartPending?: boolean,
-  isCartProduct?: boolean,
-  product?: Product,
-  getProductMax?: any,
-  changeQuantity: (product: any, quantity: number) => {},
-  onDeleteProduct: (product: any) => void,
-  onEditProduct: (product: any) => void,
-  offsetDisabled?: any,
-  isFromCheckout?: any
-}
-
-export default CartItem;
+import React, { useState } from 'react';
+import { View, Animated, TouchableOpacity } from 'react-native';
+import { useLanguage, useUtils } from 'ordering-components/native';
+
+import {
+  StyledCartItem,
+  AccordionContent,
+  ProductOptionsList,
+  ProductOption,
+  ProductSubOption,
+  ProductComment
+} from './styles';
+import { OButton, OImage, OText } from '../shared';
+import { Product } from '../../types';
+import QuantityControl from '../QuantityControl';
+import { LANDSCAPE, useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation';
+import { useTheme } from 'styled-components/native';
+
+const CartItem = (props: CartItemProps) => {
+  const theme = useTheme()
+  const [, t] = useLanguage();
+  const [orientationState] = useDeviceOrientation();
+  const [{ parsePrice }] = useUtils();
+
+  const [isActive, setActiveState] = useState(false);
+
+  const {
+    isCartPending,
+    isCartProduct,
+    product,
+    changeQuantity,
+    getProductMax,
+    onDeleteProduct,
+    onEditProduct,
+    isFromCheckout,
+  } = props
+
+  const productInfo = () => {
+    if (isCartProduct) {
+      const ingredients = JSON.parse(JSON.stringify(Object.values(product?.ingredients ?? {})))
+      let options = JSON.parse(JSON.stringify(Object.values(product?.options ?? {})))
+
+      options = options.map((option: any) => {
+        option.suboptions = Object.values(option.suboptions ?? {})
+        return option
+      })
+      return {
+        ...productInfo,
+        ingredients,
+        options
+      }
+    }
+    return product
+  }
+
+  const getFormattedSubOptionName = ({ quantity, name, position, price }: { quantity: number, name: string, position: string, price: number }) => {
+    const pos = position ? `(${position})` : ''
+    return `${quantity} x ${name} ${pos} +${price}`
+  }
+
+  return (
+    <>
+      <TouchableOpacity
+        onPress={() => (!product?.valid_menu && isCartProduct)
+          ? {}
+          : setActiveState(!isActive)}
+        activeOpacity={1}
+      >
+        <StyledCartItem>
+          <View style={{ flexDirection: 'row' }}>
+            <OImage
+              source={{ uri: product?.images || '' }}
+              height={60}
+              width={60}
+              resizeMode="cover"
+              borderRadius={6}
+            />
+
+            <View style={{ flexDirection: 'column', justifyContent: 'space-evenly', marginHorizontal: 15, marginTop: 10 }}>
+              <View>
+                <OText
+                  style={{
+                    maxWidth: orientationState?.orientation === LANDSCAPE
+                      ? orientationState.dimensions.width * 0.2
+                      : orientationState.dimensions.width * 0.5
+                  }}
+                  numberOfLines={2}
+                  size={18}
+                  weight="700"
+                >
+                  {product?.name || ''}
+                </OText>
+              </View>
+
+              <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}>
+                <OButton
+                  bgColor="transparent"
+                  borderColor="transparent"
+                  imgLeftSrc={theme.images.general.edit}
+                  text={t('EDIT', 'Edit')}
+                  style={{ justifyContent: 'flex-start', paddingLeft: 0, maxWidth: 80 }}
+                  textStyle={{
+                    color: theme.colors.primary,
+                    marginLeft: 6,
+                  }}
+                  onClick={() => { onEditProduct ? onEditProduct(product) : null }}
+                />
+              </View>
+            </View>
+          </View>
+
+          <View style={{ alignItems: "flex-end" }} >
+            <OText
+              size={18}
+              weight="700"
+              color={theme.colors.primary}
+            >
+              {parsePrice(product?.total || product?.price)}
+            </OText>
+
+            <QuantityControl
+              val={product?.quantity || 0}
+              onDecremet={(product?.quantity || 0 > 1)
+                ? (() => { changeQuantity && changeQuantity(product, (product?.quantity || 0) - 1) })
+                : undefined
+              }
+              onIncrement={changeQuantity && (() => { changeQuantity(product, (product?.quantity || 0) + 1) })}
+              onDelete={onDeleteProduct && (() => { onDeleteProduct(product) })}
+            />
+          </View>
+        </StyledCartItem>
+      </TouchableOpacity>
+
+      <View style={{ display: isActive ? 'flex' : 'none' }}>
+        <Animated.View>
+          <AccordionContent>
+            {productInfo()?.ingredients.length > 0 && productInfo()?.ingredients.some((ingredient: any) => !ingredient.selected) && (
+              <ProductOptionsList>
+                <OText size={16}>{t('INGREDIENTS', 'Ingredients')}</OText>
+                {productInfo()?.ingredients.map((ingredient: any) => !ingredient.selected && (
+                  <OText size={16} key={ingredient.id} style={{ marginLeft: 10 }}>{t('NO', 'No')} {ingredient.name}</OText>
+                ))}
+              </ProductOptionsList>
+            )}
+            {productInfo()?.options.length > 0 && (
+              <ProductOptionsList>
+                {productInfo()?.options.map((option: any, i: number) => (
+                  <ProductOption key={option.id + i}>
+                    <OText size={16}>{option.name}</OText>
+                    {option.suboptions.map((suboption: any) => (
+                      <ProductSubOption key={suboption.id}>
+                        <OText size={16}>
+                          {getFormattedSubOptionName({
+                            quantity: suboption.quantity,
+                            name: suboption.name,
+                            position: (suboption.position !== 'whole') ? t(suboption.position.toUpperCase(), suboption.position) : '',
+                            price: parsePrice(suboption.price)
+                          })}
+                        </OText>
+                      </ProductSubOption>
+                    ))}
+                  </ProductOption>
+                ))}
+              </ProductOptionsList>
+            )}
+            {product && product?.comment && (
+              <ProductComment>
+                <OText size={16}>{t('SPECIAL_COMMENT', 'Special Comment')}</OText>
+                <OText size={16}>{product.comment}</OText>
+              </ProductComment>
+            )}
+          </AccordionContent>
+        </Animated.View>
+      </View>
+    </>
+  );
+}
+
+interface CartItemProps {
+  isCartPending?: boolean,
+  isCartProduct?: boolean,
+  product?: Product,
+  getProductMax?: any,
+  changeQuantity: (product: any, quantity: number) => {},
+  onDeleteProduct: (product: any) => void,
+  onEditProduct: (product: any) => void,
+  offsetDisabled?: any,
+  isFromCheckout?: any
+}
+
+export default CartItem;