ordering-ui-react-native 0.24.18 → 0.25.1

package/themes/single-business/src/components/TaxInformation/styles.tsx

@@ -1,10 +1,10 @@
-import styled from 'styled-components/native'
-
-export const TaxInformationContainer = styled.ScrollView`
-  padding: 10px 40px;
-`
-
-export const ProductContainer = styled.View`
-  flex: 1;
-  margin-top: 10px;
-`
+import styled from 'styled-components/native'
+
+export const TaxInformationContainer = styled.ScrollView`
+  padding: 10px 40px;
+`
+
+export const ProductContainer = styled.View`
+  flex: 1;
+  margin-top: 10px;
+`

package/themes/single-business/src/components/UpsellingProducts/index.tsx

@@ -1,259 +1,259 @@
-import React, { useState, useEffect } from 'react'
-import { Platform, SafeAreaView, StyleSheet, TouchableOpacity, View } from 'react-native'
-import {
-  UpsellingPage as UpsellingPageController,
-  useUtils,
-  useLanguage,
-} from 'ordering-components/native'
-import { useTheme } from 'styled-components/native';
-import { OText, OIcon, OModal, OBottomPopup, OButton } from '../shared'
-import { UpsellingProductsParams } from '../../types'
-import {
-  Container,
-  UpsellingContainer,
-  Item,
-  Details,
-  AddButton,
-  CloseUpselling,
-  TopBar,
-  TopActions,
-  WrapPrice,
-  WrapperAdd
-} from './styles'
-import { ProductForm } from '../ProductForm';
-import { OrderSummary } from '../OrderSummary';
-import { ScrollView } from 'react-native-gesture-handler';
-import NavBar from '../NavBar';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
-const UpsellingProductsUI = (props: UpsellingProductsParams) => {
-  const {
-    isCustomMode,
-    isShowTitle,
-    upsellingProducts,
-    business,
-    cart,
-    handleUpsellingPage,
-    handleCloseUpsellingPage,
-    openUpselling,
-    canOpenUpselling,
-    setCanOpenUpselling
-  } = props
-
-  const theme = useTheme();
-
-  const styles = StyleSheet.create({
-    imageStyle: {
-      width: 73,
-      height: 73,
-      resizeMode: 'cover',
-      borderRadius: 7.6,
-    },
-    closeUpsellingButton: {
-      borderRadius: 7.6,
-      borderColor: theme.colors.primary,
-      backgroundColor: theme.colors.primary,
-      borderWidth: 1,
-      height: 44,
-      marginBottom: 10,
-      shadowOpacity: 0
-    },
-    cancelBtn: {
-      paddingHorizontal: 18,
-      borderWidth: 1,
-      borderRadius: 7.6,
-      borderColor: theme.colors.textSecondary,
-      height: 38
-    }
-  })
-
-  const [actualProduct, setActualProduct] = useState<any>(null)
-  const [modalIsOpen, setModalIsOpen] = useState(false)
-  const [{ parsePrice, optimizeImage }] = useUtils()
-  const [, t] = useLanguage()
-  const { bottom } = useSafeAreaInsets()
-
-  useEffect(() => {
-    if (!isCustomMode) {
-      if (upsellingProducts?.products?.length && !upsellingProducts.loading) {
-        setCanOpenUpselling && setCanOpenUpselling(true)
-      }
-      if ((!upsellingProducts?.products?.length && !upsellingProducts.loading && !canOpenUpselling && openUpselling) ||
-        (!upsellingProducts?.products?.length && !upsellingProducts.loading && openUpselling)) {
-        handleUpsellingPage && handleUpsellingPage()
-      }
-    }
-  }, [upsellingProducts.loading, upsellingProducts?.products.length])
-
-  const handleFormProduct = (product: any) => {
-    setActualProduct(product)
-    setModalIsOpen(true)
-  }
-
-  const handleSaveProduct = () => {
-    setActualProduct(null)
-    setModalIsOpen(false)
-  }
-
-  const getProductPriceWithOffers = (product: any) => {
-    return product?.in_offer
-      ? product?.offer_rate_type === 1
-        ? product?.price - ((product?.price * product?.offer_rate) / 100)
-        : product?.offer_rate
-      : product?.price
-  }
-
-  const UpsellingLayout = () => {
-    return (
-      <Container>
-        {isShowTitle && (
-          <OText
-            size={16}
-            lineHeight={24}
-            weight={'500'}
-            style={{ marginBottom: 10, marginTop: 0, paddingTop: 0 }}
-          >
-            {t('WANT_SOMETHING_ELSE', 'Do you want something else?')}
-          </OText>
-        )}
-        <UpsellingContainer
-          horizontal
-          showsHorizontalScrollIndicator={false}
-        >
-          {upsellingProducts.products.map((product: any) =>(
-            <Item key={product.id}>
-              <Details>
-                <OText
-                  size={16}
-                  numberOfLines={1}
-                  ellipsizeMode='tail'
-                  weight='bold'
-                >
-                  {product.name}
-                </OText>
-                <WrapPrice>
-                  <OText
-                    size={14}
-                  >
-                    {parsePrice(getProductPriceWithOffers(product))}
-                  </OText>
-                  {product?.in_offer && (
-                    <OText
-                      size={15}
-                      color={theme.colors.lightGray}
-                      style={{
-                        textDecorationLine: 'line-through',
-                        textDecorationStyle: 'solid',
-                        marginLeft: 20
-                      }}
-                    >
-                      {parsePrice(product?.price)}
-                    </OText>
-                  )}
-                </WrapPrice>
-                <AddButton onPress={() => handleFormProduct(product)}>
-                  <WrapperAdd>
-                    <OText
-                      color={theme.colors.primary}
-                      size={14}
-                    >
-                      {t('ADD', 'Add')}
-                    </OText>
-                  </WrapperAdd>
-                </AddButton>
-              </Details>
-              <View style={{ width: '30%', justifyContent: 'flex-end', alignItems: 'flex-end' }}>
-                <OIcon
-                  url={optimizeImage(product?.images, 'h_200,c_limit')}
-                  style={styles.imageStyle}
-                />
-              </View>
-            </Item>
-          ))}
-        </UpsellingContainer>
-      </Container>
-    )
-  }
-
-  return (
-    <>
-      {upsellingProducts?.products?.length === 0 ? null : (
-        isCustomMode ? (
-          <UpsellingLayout />
-        ) : (
-          <>
-            {!canOpenUpselling || upsellingProducts?.products?.length === 0 ? null : (
-              <>
-                {!modalIsOpen && (
-                  <OBottomPopup
-                    title={''}
-                    open={openUpselling}
-                    onClose={() => handleUpsellingPage()}
-                  >
-                    <TopBar style={{ paddingTop: Platform.OS == 'ios' ? 10 : 30 }}>
-                      <TopActions onPress={() => handleCloseUpsellingPage()}>
-                        <OIcon src={theme.images.general.arrow_left} width={20} />
-                      </TopActions>
-                      {/* <TopActions style={styles.cancelBtn} onPress={() => handleCloseUpsellingPage()}>
-                        <OText size={12} color={theme.colors.textSecondary}>{t('CANCEL', 'Cancel')}</OText>
-                      </TopActions> */}
-                    </TopBar>
-                    <ScrollView style={{ marginBottom: bottom + (Platform.OS == 'ios' ? 46 : 70) }} showsVerticalScrollIndicator={false}>
-                      <View style={{ paddingHorizontal: 40 }}>
-                        <OText size={20} lineHeight={30} weight={600} style={{ marginTop: 10, marginBottom: 17 }}>{t('YOUR_CART', 'Your cart')}</OText>
-                        <OrderSummary
-                          cart={cart}
-                          isCartPending={cart?.status === 2}
-                        />
-                      </View>
-                      <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40, marginBottom: 23 }} />
-                      <View style={{ paddingHorizontal: 40, overflow: 'visible' }}>
-                        <OText size={16} lineHeight={24} weight={'500'}>{t('WANT_SOMETHING_ELSE', 'Do you want something else?')}</OText>
-                        <UpsellingLayout />
-                        <CloseUpselling>
-                          <OButton
-                            imgRightSrc=''
-                            text={t('CHECKOUT', 'Checkout')}
-                            style={styles.closeUpsellingButton}
-                            textStyle={{ color: theme.colors.white, fontSize: 14 }}
-                            onClick={() => handleUpsellingPage()}
-                          />
-                        </CloseUpselling>
-                      </View>
-                    </ScrollView>
-                  </OBottomPopup>
-                )}
-              </>
-            )}
-          </>
-        )
-      )}
-      <OModal
-        open={modalIsOpen}
-        onClose={() => setModalIsOpen(false)}
-        entireModal
-        customClose
-      >
-        {actualProduct && (
-          <ProductForm
-            product={actualProduct}
-            businessId={actualProduct?.api?.businessId}
-            businessSlug={business.slug}
-            onSave={() => handleSaveProduct()}
-            onClose={() => setModalIsOpen(false)}
-          />
-        )}
-      </OModal>
-    </>
-  )
-}
-
-export const UpsellingProducts = (props: UpsellingProductsParams) => {
-  const upsellingProductsProps = {
-    ...props,
-    UIComponent: UpsellingProductsUI,
-  }
-  return (
-    <UpsellingPageController {...upsellingProductsProps} />
-  )
-}
+import React, { useState, useEffect } from 'react'
+import { Platform, SafeAreaView, StyleSheet, TouchableOpacity, View } from 'react-native'
+import {
+  UpsellingPage as UpsellingPageController,
+  useUtils,
+  useLanguage,
+} from 'ordering-components/native'
+import { useTheme } from 'styled-components/native';
+import { OText, OIcon, OModal, OBottomPopup, OButton } from '../shared'
+import { UpsellingProductsParams } from '../../types'
+import {
+  Container,
+  UpsellingContainer,
+  Item,
+  Details,
+  AddButton,
+  CloseUpselling,
+  TopBar,
+  TopActions,
+  WrapPrice,
+  WrapperAdd
+} from './styles'
+import { ProductForm } from '../ProductForm';
+import { OrderSummary } from '../OrderSummary';
+import { ScrollView } from 'react-native-gesture-handler';
+import NavBar from '../NavBar';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+const UpsellingProductsUI = (props: UpsellingProductsParams) => {
+  const {
+    isCustomMode,
+    isShowTitle,
+    upsellingProducts,
+    business,
+    cart,
+    handleUpsellingPage,
+    handleCloseUpsellingPage,
+    openUpselling,
+    canOpenUpselling,
+    setCanOpenUpselling
+  } = props
+
+  const theme = useTheme();
+
+  const styles = StyleSheet.create({
+    imageStyle: {
+      width: 73,
+      height: 73,
+      resizeMode: 'cover',
+      borderRadius: 7.6,
+    },
+    closeUpsellingButton: {
+      borderRadius: 7.6,
+      borderColor: theme.colors.primary,
+      backgroundColor: theme.colors.primary,
+      borderWidth: 1,
+      height: 44,
+      marginBottom: 10,
+      shadowOpacity: 0
+    },
+    cancelBtn: {
+      paddingHorizontal: 18,
+      borderWidth: 1,
+      borderRadius: 7.6,
+      borderColor: theme.colors.textSecondary,
+      height: 38
+    }
+  })
+
+  const [actualProduct, setActualProduct] = useState<any>(null)
+  const [modalIsOpen, setModalIsOpen] = useState(false)
+  const [{ parsePrice, optimizeImage }] = useUtils()
+  const [, t] = useLanguage()
+  const { bottom } = useSafeAreaInsets()
+
+  useEffect(() => {
+    if (!isCustomMode) {
+      if (upsellingProducts?.products?.length && !upsellingProducts.loading) {
+        setCanOpenUpselling && setCanOpenUpselling(true)
+      }
+      if ((!upsellingProducts?.products?.length && !upsellingProducts.loading && !canOpenUpselling && openUpselling) ||
+        (!upsellingProducts?.products?.length && !upsellingProducts.loading && openUpselling)) {
+        handleUpsellingPage && handleUpsellingPage()
+      }
+    }
+  }, [upsellingProducts.loading, upsellingProducts?.products.length])
+
+  const handleFormProduct = (product: any) => {
+    setActualProduct(product)
+    setModalIsOpen(true)
+  }
+
+  const handleSaveProduct = () => {
+    setActualProduct(null)
+    setModalIsOpen(false)
+  }
+
+  const getProductPriceWithOffers = (product: any) => {
+    return product?.in_offer
+      ? product?.offer_rate_type === 1
+        ? product?.price - ((product?.price * product?.offer_rate) / 100)
+        : product?.offer_rate
+      : product?.price
+  }
+
+  const UpsellingLayout = () => {
+    return (
+      <Container>
+        {isShowTitle && (
+          <OText
+            size={16}
+            lineHeight={24}
+            weight={'500'}
+            style={{ marginBottom: 10, marginTop: 0, paddingTop: 0 }}
+          >
+            {t('WANT_SOMETHING_ELSE', 'Do you want something else?')}
+          </OText>
+        )}
+        <UpsellingContainer
+          horizontal
+          showsHorizontalScrollIndicator={false}
+        >
+          {upsellingProducts.products.map((product: any) =>(
+            <Item key={product.id}>
+              <Details>
+                <OText
+                  size={16}
+                  numberOfLines={1}
+                  ellipsizeMode='tail'
+                  weight='bold'
+                >
+                  {product.name}
+                </OText>
+                <WrapPrice>
+                  <OText
+                    size={14}
+                  >
+                    {parsePrice(getProductPriceWithOffers(product))}
+                  </OText>
+                  {product?.in_offer && (
+                    <OText
+                      size={15}
+                      color={theme.colors.lightGray}
+                      style={{
+                        textDecorationLine: 'line-through',
+                        textDecorationStyle: 'solid',
+                        marginLeft: 20
+                      }}
+                    >
+                      {parsePrice(product?.price)}
+                    </OText>
+                  )}
+                </WrapPrice>
+                <AddButton onPress={() => handleFormProduct(product)}>
+                  <WrapperAdd>
+                    <OText
+                      color={theme.colors.primary}
+                      size={14}
+                    >
+                      {t('ADD', 'Add')}
+                    </OText>
+                  </WrapperAdd>
+                </AddButton>
+              </Details>
+              <View style={{ width: '30%', justifyContent: 'flex-end', alignItems: 'flex-end' }}>
+                <OIcon
+                  url={optimizeImage(product?.images, 'h_200,c_limit')}
+                  style={styles.imageStyle}
+                />
+              </View>
+            </Item>
+          ))}
+        </UpsellingContainer>
+      </Container>
+    )
+  }
+
+  return (
+    <>
+      {upsellingProducts?.products?.length === 0 ? null : (
+        isCustomMode ? (
+          <UpsellingLayout />
+        ) : (
+          <>
+            {!canOpenUpselling || upsellingProducts?.products?.length === 0 ? null : (
+              <>
+                {!modalIsOpen && (
+                  <OBottomPopup
+                    title={''}
+                    open={openUpselling}
+                    onClose={() => handleUpsellingPage()}
+                  >
+                    <TopBar style={{ paddingTop: Platform.OS == 'ios' ? 10 : 30 }}>
+                      <TopActions onPress={() => handleCloseUpsellingPage()}>
+                        <OIcon src={theme.images.general.arrow_left} width={20} />
+                      </TopActions>
+                      {/* <TopActions style={styles.cancelBtn} onPress={() => handleCloseUpsellingPage()}>
+                        <OText size={12} color={theme.colors.textSecondary}>{t('CANCEL', 'Cancel')}</OText>
+                      </TopActions> */}
+                    </TopBar>
+                    <ScrollView style={{ marginBottom: bottom + (Platform.OS == 'ios' ? 46 : 70) }} showsVerticalScrollIndicator={false}>
+                      <View style={{ paddingHorizontal: 40 }}>
+                        <OText size={20} lineHeight={30} weight={600} style={{ marginTop: 10, marginBottom: 17 }}>{t('YOUR_CART', 'Your cart')}</OText>
+                        <OrderSummary
+                          cart={cart}
+                          isCartPending={cart?.status === 2}
+                        />
+                      </View>
+                      <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40, marginBottom: 23 }} />
+                      <View style={{ paddingHorizontal: 40, overflow: 'visible' }}>
+                        <OText size={16} lineHeight={24} weight={'500'}>{t('WANT_SOMETHING_ELSE', 'Do you want something else?')}</OText>
+                        <UpsellingLayout />
+                        <CloseUpselling>
+                          <OButton
+                            imgRightSrc=''
+                            text={t('CHECKOUT', 'Checkout')}
+                            style={styles.closeUpsellingButton}
+                            textStyle={{ color: theme.colors.white, fontSize: 14 }}
+                            onClick={() => handleUpsellingPage()}
+                          />
+                        </CloseUpselling>
+                      </View>
+                    </ScrollView>
+                  </OBottomPopup>
+                )}
+              </>
+            )}
+          </>
+        )
+      )}
+      <OModal
+        open={modalIsOpen}
+        onClose={() => setModalIsOpen(false)}
+        entireModal
+        customClose
+      >
+        {actualProduct && (
+          <ProductForm
+            product={actualProduct}
+            businessId={actualProduct?.api?.businessId}
+            businessSlug={business.slug}
+            onSave={() => handleSaveProduct()}
+            onClose={() => setModalIsOpen(false)}
+          />
+        )}
+      </OModal>
+    </>
+  )
+}
+
+export const UpsellingProducts = (props: UpsellingProductsParams) => {
+  const upsellingProductsProps = {
+    ...props,
+    UIComponent: UpsellingProductsUI,
+  }
+  return (
+    <UpsellingPageController {...upsellingProductsProps} />
+  )
+}

package/themes/single-business/src/components/UpsellingProducts/styles.tsx

@@ -1,57 +1,57 @@
-import styled from 'styled-components/native'
-
-export const Container = styled.View`
-  /* margin: 20px 0; */
-`
-export const UpsellingContainer = styled.ScrollView`
-  max-height: 220px;
-`
-export const Item = styled.View`
-  border-width: 1px;
-  border-color: ${(props: any) => props.theme.colors.border};
-  border-radius: 10px;
-  flex-direction: row;
-  width: 250px;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px;
-  margin-right: 15px;
-`
-export const Details = styled.View`
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
-  max-width: 69%;
-`
-export const AddButton = styled.TouchableOpacity`
-  margin-top: 7px;
-`
-export const CloseUpselling = styled.View`
-  margin-vertical: 10px;
-  width: 100%;
-`
-
-export const WrapperAdd = styled.View`
-  padding: 6px 20px;
-  border-radius: 50px;
-  background-color: ${(props: any) => props.theme.colors.primaryContrast};
-`
-
-export const WrapPrice = styled.View`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin-top: 5px;
-`
-
-export const TopBar = styled.View`
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  min-height: 50px;
-  padding-horizontal: 40px;
-`
-export const TopActions = styled.TouchableOpacity`
-	height: 44px;
-	justify-content: center;
-`;
+import styled from 'styled-components/native'
+
+export const Container = styled.View`
+  /* margin: 20px 0; */
+`
+export const UpsellingContainer = styled.ScrollView`
+  max-height: 220px;
+`
+export const Item = styled.View`
+  border-width: 1px;
+  border-color: ${(props: any) => props.theme.colors.border};
+  border-radius: 10px;
+  flex-direction: row;
+  width: 250px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px;
+  margin-right: 15px;
+`
+export const Details = styled.View`
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  max-width: 69%;
+`
+export const AddButton = styled.TouchableOpacity`
+  margin-top: 7px;
+`
+export const CloseUpselling = styled.View`
+  margin-vertical: 10px;
+  width: 100%;
+`
+
+export const WrapperAdd = styled.View`
+  padding: 6px 20px;
+  border-radius: 50px;
+  background-color: ${(props: any) => props.theme.colors.primaryContrast};
+`
+
+export const WrapPrice = styled.View`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-top: 5px;
+`
+
+export const TopBar = styled.View`
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  min-height: 50px;
+  padding-horizontal: 40px;
+`
+export const TopActions = styled.TouchableOpacity`
+	height: 44px;
+	justify-content: center;
+`;