ordering-ui-react-native 0.18.20 → 0.18.21

package/package.json

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

package/themes/business/src/components/AcceptOrRejectOrder/index.tsx

@@ -522,7 +522,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
             style={{ borderRadius: 7, height: 45 }}
             parentStyle={{ width: '100%' }}
             textStyle={{ color: '#FFF', fontSize: 18 }}
-            isDisabled={!rejectReason && showTextArea}
+            isDisabled={showTextArea && !comments}
             onClick={() => handleAcceptOrReject()}
           />
         </View>

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

@@ -5,7 +5,7 @@ import { useUtils, useOrder, useLanguage } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { OIcon, OText, OModal } from '../shared';
 import { BusinessBasicInformationParams } from '../../types';
-import { convertHoursToMinutes, shape } from '../../utils';
+import { convertHoursToMinutes, lightenDarkenColor, shape } from '../../utils';
 import MaterialComIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 import dayjs from 'dayjs';
 import timezone from 'dayjs/plugin/timezone';
@@ -351,13 +351,15 @@ export const BusinessBasicInformation = (
 									{business?.ribbon?.enabled && (
 										<RibbonBox
 											bgColor={business?.ribbon?.color}
+											colorText={lightenDarkenColor(business?.ribbon?.color)}
+											borderRibbon={lightenDarkenColor(business?.ribbon?.color)}
 											isRoundRect={business?.ribbon?.shape === shape?.rectangleRound}
 											isCapsule={business?.ribbon?.shape === shape?.capsuleShape}
 										>
 											<OText
 												size={10}
 												weight={'400'}
-												color={theme.colors.white}
+												color={lightenDarkenColor(business?.ribbon?.color) ? theme.colors.black : theme.colors.white}
 												numberOfLines={2}
 												ellipsizeMode='tail'
 												lineHeight={13}

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

@@ -64,6 +64,14 @@ export const RibbonBox = styled.View`
   ${(props: any) => props.isCapsule && css`
     border-radius: 50px;
   `}
+
+  ${(props: any) => props.colorText && css`
+    color: ${props.colorText ? 'black' : 'white'};
+  `}
+
+  ${(props: any) => props.borderRibbon && css`
+    border: 1px solid ${props.borderRibbon ? 'black' : 'white'};
+  `}
 `
 
 export const SocialListWrapper = styled.ScrollView`

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

@@ -14,7 +14,7 @@ import { OIcon, OText } from '../shared';
 import { Dimensions, StyleSheet, Vibration, View } from 'react-native';
 import { InView } from 'react-native-intersection-observer'
 import { BusinessControllerParams } from '../../types';
-import { convertHoursToMinutes, shape } from '../../utils';
+import { convertHoursToMinutes, lightenDarkenColor, shape } from '../../utils';
 
 import {
 	BusinessHero,
@@ -185,13 +185,15 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 					{business?.ribbon?.enabled && (
 						<RibbonBox
 							bgColor={business?.ribbon?.color}
+							colorText={lightenDarkenColor(business?.ribbon?.color)}
+							borderRibbon={lightenDarkenColor(business?.ribbon?.color)}
 							isRoundRect={business?.ribbon?.shape === shape?.rectangleRound}
 							isCapsule={business?.ribbon?.shape === shape?.capsuleShape}
 						>
 							<OText
 								size={10}
 								weight={'400'}
-								color={theme.colors.white}
+								color={lightenDarkenColor(business?.ribbon?.color) ? theme.colors.black : theme.colors.white}
 								numberOfLines={2}
 								ellipsizeMode='tail'
 								lineHeight={13}
@@ -207,7 +209,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 								source={(businessHeader || business?.header || typeof theme.images.dummies.businessHeader === 'string') ? {
 									uri: optimizeImage(businessHeader || business?.header || theme.images.dummies.businessHeader, 'h_500,c_limit'),
 									priority: FastImage.priority.normal,
-								} : theme.images.dummies.businessHeader}								
+								} : theme.images.dummies.businessHeader}
 								resizeMode={FastImage.resizeMode.cover}
 							/>
 						)}

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

@@ -72,6 +72,14 @@ export const RibbonBox = styled.View`
   ${(props: any) => props.isCapsule && css`
     border-radius: 50px;
   `}
+
+  ${(props: any) => props.colorText && css`
+    color: ${props.colorText ? 'black' : 'white'};
+  `}
+
+  ${(props: any) => props.borderRibbon && css`
+    border: 1px solid ${props.borderRibbon ? 'black' : 'white'};
+  `}
 `
 
 export const OfferBox = styled.View`

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

@@ -9,7 +9,7 @@ import { useTheme } from 'styled-components/native';
 import { OIcon, OText } from '../shared';
 import { StyleSheet, useWindowDimensions, View } from 'react-native';
 import { BusinessControllerParams } from '../../types';
-import { convertHoursToMinutes, shape } from '../../utils';
+import { convertHoursToMinutes, lightenDarkenColor, shape } from '../../utils';
 import {
 	Card,
 	BusinessHero,
@@ -101,13 +101,15 @@ export const BusinessFeaturedCtrlUI = (props: BusinessControllerParams) => {
 			{business?.ribbon?.enabled && (
 				<RibbonBox
 					bgColor={business?.ribbon?.color}
+					colorText={lightenDarkenColor(business?.ribbon?.color)}
+					borderRibbon={lightenDarkenColor(business?.ribbon?.color)}
 					isRoundRect={business?.ribbon?.shape === shape?.rectangleRound}
 					isCapsule={business?.ribbon?.shape === shape?.capsuleShape}
 				>
 					<OText
 						size={10}
 						weight={'400'}
-						color={theme.colors.white}
+						color={lightenDarkenColor(business?.ribbon?.color) ? theme.colors.black : theme.colors.white}
 						numberOfLines={2}
 						ellipsizeMode='tail'
 						lineHeight={13}

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

@@ -70,4 +70,12 @@ export const RibbonBox = styled.View`
   ${(props: any) => props.isCapsule && css`
     border-radius: 50px;
   `}
+
+  ${(props: any) => props.colorText && css`
+    color: ${props.colorText ? 'black' : 'white'};
+  `}
+
+  ${(props: any) => props.borderRibbon && css`
+    border: 1px solid ${props.borderRibbon ? 'black' : 'white'};
+  `}
 `

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

@@ -9,7 +9,7 @@ import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import { View, ScrollView } from 'react-native';
 import { StyleSheet } from 'react-native';
 import { useTheme } from 'styled-components/native';
-import { shape } from '../../utils'
+import { lightenDarkenColor, shape } from '../../utils'
 import { CategoryDescriptionMemoized } from './CategoryDescription';
 import { OrderItAgain } from '../OrderItAgain'
 import { SubcategoriesComponentMemoized } from './SubcategoriesComponent';
@@ -186,13 +186,15 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                   {category?.ribbon?.enabled && (
                     <RibbonBox
                       bgColor={category?.ribbon?.color}
+                      colorText={lightenDarkenColor(category?.ribbon?.color)}
+                      borderRibbon={lightenDarkenColor(category?.ribbon?.color)}
                       isRoundRect={category?.ribbon?.shape === shape?.rectangleRound}
                       isCapsule={category?.ribbon?.shape === shape?.capsuleShape}
                     >
                       <OText
                         size={10}
                         weight={'400'}
-                        color={theme.colors.white}
+                        color={lightenDarkenColor(category?.ribbon?.color) ? theme.colors.black : theme.colors.white}
                         numberOfLines={2}
                         ellipsizeMode='tail'
                         lineHeight={13}

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

@@ -30,6 +30,14 @@ export const RibbonBox = styled.View`
   ${(props: any) => props.isCapsule && css`
     border-radius: 50px;
   `}
+
+  ${(props: any) => props.colorText && css`
+    color: ${props.colorText ? 'black' : 'white'};
+  `}
+
+  ${(props: any) => props.borderRibbon && css`
+    border: 1px solid ${props.borderRibbon ? 'black' : 'white'};
+  `}
 `
 
 export const SubCategoriesContainer = styled.View`

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

@@ -822,6 +822,7 @@ const CheckoutUI = (props: any) => {
 									setIsOpen(false)
 									handlePlaceOrder(null, true)
 								}}
+								setIsOpen={setIsOpen}
 							/>
 						</View>
 					</OModal>

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

@@ -17,7 +17,7 @@ import { InView } from 'react-native-intersection-observer'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import { OButton, OIcon, OText } from '../shared';
 import FastImage from 'react-native-fast-image'
-import { shape } from '../../utils';
+import { lightenDarkenColor, shape } from '../../utils';
 import { LottieAnimation } from '../LottieAnimation';
 import { CardAnimation } from '../shared/CardAnimation'
 
@@ -109,7 +109,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 		},
 		productTagsStyle: {
 			width: 30,
-    		height: 30,
+			height: 30,
 			marginRight: 5
 		}
 	});
@@ -222,7 +222,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 										showsHorizontalScrollIndicator={false}
 										horizontal
 										style={{ marginLeft: 10 }}
-										contentContainerStyle={{flexGrow: 1}}
+										contentContainerStyle={{ flexGrow: 1 }}
 									>
 										{product?.tags.map((tag: any, i: any) => (
 											<TouchableWithoutFeedback key={i}>
@@ -266,13 +266,15 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 							{!!product?.ribbon?.enabled && (
 								<RibbonBox
 									bgColor={product?.ribbon?.color}
+									colorText={lightenDarkenColor(product?.ribbon?.color)}
+									borderRibbon={lightenDarkenColor(product?.ribbon?.color)}
 									isRoundRect={product?.ribbon?.shape === shape?.rectangleRound}
 									isCapsule={product?.ribbon?.shape === shape?.capsuleShape}
 								>
 									<OText
 										size={textSize}
 										weight={'400'}
-										color={theme.colors.white}
+										color={lightenDarkenColor(product?.ribbon?.color) ? theme.colors.black : theme.colors.white}
 										numberOfLines={2}
 										ellipsizeMode='tail'
 										lineHeight={13}

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

@@ -18,7 +18,7 @@ export const QuantityContainer = styled.View`
   background: ${({ theme }: any) => theme.colors.primary};
   align-items: center;
   justify-content: center;
-  ${({businessSingleId} : any) => businessSingleId ? css`
+  ${({ businessSingleId }: any) => businessSingleId ? css`
     left: 0;
   ` : css`
     right: 0;
@@ -66,4 +66,12 @@ export const RibbonBox = styled.View`
   ${(props: any) => props.isCapsule && css`
     border-radius: 50px;
   `}
+
+  ${(props: any) => props.colorText && css`
+    color: ${props.colorText ? 'black' : 'white'};
+  `}
+
+  ${(props: any) => props.borderRibbon && css`
+    border: 1px solid ${props.borderRibbon ? 'black' : 'white'};
+  `}
 `

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

@@ -34,7 +34,8 @@ const UserDetailsUI = (props: any) => {
 		isCheckout,
 		handleSendVerifyCode,
 		verifyPhoneState,
-		setFormState
+		setFormState,
+		setIsOpen
 	} = props
 
 	const theme = useTheme();
@@ -209,6 +210,7 @@ const UserDetailsUI = (props: any) => {
 							isCheckout={isCheckout}
 							setWillVerifyOtpState={setWillVerifyOtpState}
 							setIsSubmit={setIsSubmit}
+							setIsOpen={setIsOpen}
 						/>
 					)}
 				</UDContainer>

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

@@ -30,7 +30,8 @@ export const UserFormDetailsUI = (props: any) => {
 		hideUpdateButton,
 		setWillVerifyOtpState,
 		handlePlaceOrderAsGuest,
-		isCheckout
+		isCheckout,
+		setIsOpen
 	} = props;
 
 	const theme = useTheme();
@@ -221,10 +222,7 @@ export const UserFormDetailsUI = (props: any) => {
 			formState.result?.result &&
 				showToast(ToastType.Error, formState.result?.result[0]);
 			if (isCheckout) {
-				setAlertState({
-					open: true,
-					content: formState.result?.result[0]
-				})
+				setIsOpen && setIsOpen(false)
 				cleanFormState && cleanFormState({ changes: {} })
 			}
 		}
@@ -476,13 +474,7 @@ export const UserFormDetailsUI = (props: any) => {
 					/>
 				</ScrollView>
 			</OModal>
-			<Alert
-				open={alertState.open}
-				title=''
-				content={[alertState.content]}
-				onAccept={() => setAlertState({ open: false, content: '' })}
-				onClose={() => setAlertState({ open: false, content: '' })}
-			/>
+			
 		</>
 	);
 };

package/themes/original/src/utils/index.tsx

@@ -564,8 +564,46 @@ export const getOrderStatus = (s: string) => {
       image: theme.images.order.status8
     }
   ];
-  
+
   const objectStatus = orderStatus.find((o) => o.key === status);
 
   return objectStatus && objectStatus;
 }
+
+/**
+ * Function to get brightness of color.
+ */
+export const lightenDarkenColor = (color: any) => {
+
+  let r, g, b, hsp
+  if (!color) return
+  if (color.match(/^rgb/)) {
+    // If HEX --> store the red, green, blue values in separate variables
+    color = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/)
+
+    r = color[1]
+    g = color[2]
+    b = color[3]
+  } else {
+    // If RGB --> Convert it to HEX
+    color = +("0x" + color.slice(1).replace(color.length < 5 && /./g, '$&$&'))
+
+    r = color >> 16
+    g = color >> 8 & 255
+    b = color & 255
+  }
+
+  // HSP (Highly Sensitive Poo) equation
+  hsp = Math.sqrt(
+    0.299 * (r * r) +
+    0.587 * (g * g) +
+    0.114 * (b * b)
+  )
+
+  // Using the HSP value, determine whether the color is light or dark
+  if (hsp > 197) {
+    return true //is light color
+  } else {
+    return false
+  }
+}