ordering-ui-react-native 0.17.49 → 0.17.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.17.49",
+  "version": "0.17.50",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/themes/original/index.tsx

@@ -95,6 +95,7 @@ import { LogoutButton } from './src/components/LogoutButton';
 import { UserFormDetailsUI } from './src/components/UserFormDetails';
 import { WalletTransactionItem } from './src/components/WalletTransactionItem';
 import { Promotions } from './src/components/Promotions'
+import { PageBanner } from './src/components/PageBanner'
 import { USER_TYPE, ORDER_TYPES } from './src/config/constants'
 
 import { OSBill, OSTable, OSCoupon, OSTotal, OSRow } from './src/components/OrderSummary/styles';
@@ -257,6 +258,7 @@ export {
 	UserFormDetailsUI,
 	WalletTransactionItem,
 	Promotions,
+	PageBanner,
 	MyOrders,
 	ORDER_TYPES,
 	USER_TYPE,

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

@@ -42,6 +42,7 @@ import Animated from 'react-native-reanimated'
 import { ProfessionalFilter } from '../ProfessionalFilter';
 import { ServiceForm } from '../ServiceForm';
 import { BusinessesListing } from '../BusinessesListing/Layout/Original'
+import { PageBanner } from '../PageBanner'
 
 const PIXELS_TO_SCROLL = 2000
 
@@ -403,6 +404,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 							/>
 						</ProfessionalFilterWrapper>
 					)}
+					<PageBanner position='app_business_page' />
 					<View
 						style={{
 							height: 8,

package/themes/original/src/components/BusinessesListing/Layout/Original/index.tsx

@@ -55,6 +55,7 @@ import { OrderProgress } from '../../../OrderProgress';
 import { useFocusEffect, useIsFocused } from '@react-navigation/native';
 import FastImage from 'react-native-fast-image';
 import IconAntDesign from 'react-native-vector-icons/AntDesign';
+import { PageBanner } from '../../../PageBanner'
 
 const PIXELS_TO_SCROLL = 2000;
 
@@ -549,6 +550,9 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					/>
 				)
 			}
+
+			<PageBanner position='app_business_listing' />
+
 			<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
 			<ListWrapper>
 				{!businessId && (

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

@@ -0,0 +1,104 @@
+import React from 'react'
+import { useUtils, PageBanner as PageBannerController } from 'ordering-components/native'
+
+import { View, StyleSheet } from 'react-native'
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
+import Swiper from 'react-native-swiper'
+import FastImage from 'react-native-fast-image';
+import IconAntDesign from 'react-native-vector-icons/AntDesign';
+import { useTheme } from 'styled-components/native';
+import { PageBannerWrapper } from './styles'
+
+const PageBannerUI = (props: any) => {
+  const {
+    pageBannerState
+  } = props
+
+	const theme = useTheme();
+	const [{ optimizeImage }] = useUtils();
+
+  const styles = StyleSheet.create({
+    mainSwiper: {
+			height: 300,
+		},
+    swiperButton: {
+			marginHorizontal: 25,
+			alignItems: 'center',
+			justifyContent: 'center',
+			width: 32,
+			height: 32,
+			borderRadius: 16,
+			backgroundColor: 'rgba(208,208,208,0.5)'
+		},
+    sliderWrapper: {
+      width: '100%',
+      height: 300
+    }
+  })
+
+  return (
+    <>
+      {pageBannerState.loading ? (
+        <PageBannerWrapper>
+          <Placeholder
+            Animation={Fade}
+          >
+            <PlaceholderLine
+							height={300}
+							style={{ marginBottom: 20, borderRadius: 8 }}
+						/>
+          </Placeholder>
+        </PageBannerWrapper>
+      ) : (
+        <>
+          {pageBannerState.banner?.items && pageBannerState.banner?.items.length > 0 && (
+            <PageBannerWrapper>
+              <Swiper
+                loop={false}
+                showsButtons={true}
+                style={styles.mainSwiper}
+                showsPagination={false}
+                prevButton={
+                  <View style={styles.swiperButton}>
+                    <IconAntDesign
+                      name="caretleft"
+                      color={theme.colors.white}
+                      size={13}
+                    />
+                  </View>
+                }
+                nextButton={
+                  <View style={styles.swiperButton}>
+                    <IconAntDesign
+                      name="caretright"
+                      color={theme.colors.white}
+                      size={13}
+                    />
+                  </View>
+                }
+              >
+                {pageBannerState.banner?.items.map((img, i) => (
+                  <View key={i} style={styles.sliderWrapper}>
+                    <FastImage
+                      style={{ height: '100%', width: '100%' }}
+                      resizeMode='cover'
+                      source={{ uri: optimizeImage(img.url, 'h_300,c_limit') }}
+                    />
+                  </View>
+                ))}
+              </Swiper>
+            </PageBannerWrapper>
+          )}
+        </>
+      )}
+    </>
+  )
+}
+
+export const PageBanner = (props: any) => {
+  const pageBannerProps = {
+    ...props,
+    UIComponent: PageBannerUI
+  }
+  return <PageBannerController {...pageBannerProps} />
+}

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

@@ -0,0 +1,8 @@
+import styled, { css } from 'styled-components/native'
+
+export const PageBannerWrapper = styled.View`
+  margin-horizontal: 40px;
+  border-radius: 8px;
+  overflow: hidden;
+  margin-vertical: 30px;
+`