ordering-ui-react-native 0.21.31 → 0.21.32

package/package.json

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

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

@@ -386,21 +386,30 @@ const ChatUI = (props: MessagesParams) => {
           style={{ ...styles.firstMessageText, textAlign: 'center' }}
         >
           {
-            message.change?.attribute !== 'driver_id'
-            ?
-            `${t('ORDER', 'Order')} ${t(message.change.attribute.toUpperCase(), message.change.attribute.replace('_', ' '))} ${t('CHANGED_FROM', 'Changed from')} ${filterSpecialStatus.includes(message.change.attribute)
-              ? `${message.change.old === null ? '0' : message.change.old} ${t('TO', 'to')} ${message.change.new} ${t('MINUTES', 'Minutes')}`
-              : `${message.change?.attribute !== 'logistic_status'
-                ? message.change.old !== null && t(ORDER_STATUS[parseInt(message.change.old, 10)])
-                : message.change.old !== null && getLogisticTag(message.change.old)} ${t('TO', 'to')} ${message.change?.attribute !== 'logistic_status'
-                  ? t(ORDER_STATUS[parseInt(message.change.new, 10)])
-                  : getLogisticTag(message.change.new)}`
-            }`
-            : message.change.new
+            message.change?.attribute === 'driver_group_id'
+            ? message.change.old
+              ? t('ORDER_ATTRIBUTE_CHANGED_FROM_TO')
+                  .replace('_attribute_', t(message.change?.attribute.toUpperCase()).toLowerCase())
+                  .replace('_from_', message.change.old)
+                  .replace('_to_', message.change.new)
+              : t('ORDER_ATTRIBUTE_CHANGED_TO')
+                  .replace('_attribute_', t(message.change?.attribute.toUpperCase()).toLowerCase())
+                  .replace('_to_', message.change.new)
+            : message.change?.attribute !== 'driver_id'
               ?
-              `${message.driver?.name} ${message.driver?.lastname !== null ? message.driver.lastname : ''} ${t('WAS_ASSIGNED_AS_DRIVER', 'Was assigned as driver')} ${message.comment ? message.comment.length : ''}`
-              :
-              `${t('DRIVER_UNASSIGNED', 'Driver unassigned')}`
+              `${t('ORDER', 'Order')} ${t(message.change.attribute.toUpperCase(), message.change.attribute.replace('_', ' '))} ${t('CHANGED_FROM', 'Changed from')} ${filterSpecialStatus.includes(message.change.attribute)
+                ? `${message.change.old === null ? '0' : message.change.old} ${t('TO', 'to')} ${message.change.new} ${t('MINUTES', 'Minutes')}`
+                : `${message.change?.attribute !== 'logistic_status'
+                  ? message.change.old !== null && t(ORDER_STATUS[parseInt(message.change.old, 10)])
+                  : message.change.old !== null && getLogisticTag(message.change.old)} ${t('TO', 'to')} ${message.change?.attribute !== 'logistic_status'
+                    ? t(ORDER_STATUS[parseInt(message.change.new, 10)])
+                    : getLogisticTag(message.change.new)}`
+              }`
+              : message.change.new
+                ?
+                `${message.driver?.name} ${message.driver?.lastname !== null ? message.driver.lastname : ''} ${t('WAS_ASSIGNED_AS_DRIVER', 'Was assigned as driver')} ${message.comment ? message.comment.length : ''}`
+                :
+                `${t('DRIVER_UNASSIGNED', 'Driver unassigned')}`
           }
         </OText>
         <OText size={10} color={'#aaa'} style={{ alignSelf: 'flex-start' }}>

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

@@ -106,6 +106,7 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
 										location={businessLocation.location}
 										markerTitle={businessState?.business?.name}
 										businessZones={businessState?.business?.zones}
+										delta={30}
 									/>
 								</WrapBusinessMap>
 							)}

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

@@ -192,6 +192,7 @@ const CheckoutUI = (props: any) => {
 	}, cart?.subtotal)
 
 	const validateCommentsCartField = validationFields?.fields?.checkout?.comments?.enabled && validationFields?.fields?.checkout?.comments?.required && (cart?.comment === null || cart?.comment?.trim().length === 0)
+	const validateZipcodeCard = validationFields?.fields?.card?.zipcode?.enabled && validationFields?.fields?.card?.zipcode?.required && !paymethodSelected?.data?.card?.zipcode
 
 	const isDisabledButtonPlace = loading || !cart?.valid || (!paymethodSelected && cart?.balance > 0) ||
 		placing || errorCash || subtotalWithTaxes < cart?.minimum ||
@@ -200,7 +201,8 @@ const CheckoutUI = (props: any) => {
 			validationFields?.fields?.checkout?.driver_tip?.enabled &&
 			validationFields?.fields?.checkout?.driver_tip?.required &&
 			(Number(cart?.driver_tip) <= 0)) ||
-		(validateCommentsCartField)
+		(validateCommentsCartField) ||
+		(validateZipcodeCard)
 		|| (methodsPay.includes(paymethodSelected?.gateway) && (!methodPaySupported.enabled || methodPaySupported.loading))
 
 	const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
@@ -896,6 +898,15 @@ const CheckoutUI = (props: any) => {
 										{t('WARNING_INVALID_CART_COMMENTS', 'Cart comments is required.')}
 									</OText>
 								)}
+
+								{validateZipcodeCard && (
+									<OText
+										color={theme.colors.error}
+										size={12}
+									>
+										{t('WARNING_CARD_ZIPCODE_REQUIRED', 'Your card selected has not zipcode')}
+									</OText>
+								)}
 							</ChErrors>
 						</View>
 					)}

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

@@ -20,7 +20,8 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     handleToggleMap,
     locations,
     isIntGeoCoder,
-    businessZones
+    businessZones,
+    delta
   } = props
 
   const [, t] = useLanguage()
@@ -31,8 +32,8 @@ export const GoogleMap = (props: GoogleMapsParams) => {
   const [region, setRegion] = useState({
     latitude: location.lat,
     longitude: location.lng,
-    latitudeDelta: 0.0010,
-    longitudeDelta: 0.0010 * ASPECT_RATIO
+    latitudeDelta: delta ?? 0.0010,
+    longitudeDelta: (delta ?? 0.0010) * ASPECT_RATIO
   })
   const [MARKERS, SETMARKERS] = useState(locations)
   let mapRef = useRef<any>(null)
@@ -265,7 +266,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
             )}
             {(businessZone.type === 5 && businessZone?.data?.distance) && (
               <Circle
-                center={{ latitude: businessZone?.data?.center.lat, longitude: businessZone?.data?.center.lng}}
+                center={{ latitude: center.lat, longitude: center.lng}}
                 radius={businessZone?.data.distance * units[businessZone?.data?.unit]}
                 fillColor={fillStyles.fillColor}
                 strokeColor={fillStyles.strokeColor}

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

@@ -152,6 +152,7 @@ const MessagesUI = (props: MessagesParams) => {
 		}
 		const newMessage: any = [];
 		messages.messages.map((message: any) => {
+			if (message.change?.attribute === 'driver_group_id') return
 			if (business && message.type !== 0 && (messagesToShow?.messages?.length || message?.can_see?.includes('2'))) {
 				newMessage.push({
 					_id: message?.id,

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

@@ -40,6 +40,9 @@ export const OSItem = styled.View`
   justify-content: space-between;
   align-items: center;
   padding: 10px 0px;
+  ${({ isInvalid } : any) => isInvalid && css`
+    opacity: 0.7;
+  `}
 `;
 
 export const OSItemContent = styled.TouchableOpacity`

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

@@ -4,6 +4,7 @@ import {
 	PaymentOptionStripe,
 	useSession,
 	useLanguage,
+	useValidationFields
 } from 'ordering-components/native';
 import { PlaceholderLine } from 'rn-placeholder';
 import { useTheme } from 'styled-components/native';
@@ -40,10 +41,13 @@ export const StripeCardsListUI = (props: any) => {
 
 	const [{ token }] = useSession();
 	const [, t] = useLanguage();
-
+	const [validationFields] = useValidationFields()
+	const validateZipcodeCard =
+		validationFields?.fields?.card?.zipcode?.enabled && validationFields?.fields?.card?.zipcode?.required
 	const paymethodsWithoutSaveCards = ['credomatic']
 
 	const handleCardSelected = (card: any) => {
+		if (!card?.zipcode && validateZipcodeCard) return
 		handleCardClick(card);
 		onSelectCard(card);
 	}
@@ -92,7 +96,8 @@ export const StripeCardsListUI = (props: any) => {
 					style={styles.cardsList}
 				>
 					{cardsList.cards.map((card: any) => (
-						<OSItem key={card.id} isUnique={cardsList.cards.length}>
+						<OSItem key={card.id} isUnique={cardsList.cards.length} isInvalid={!card?.zipcode && validateZipcodeCard}>
+							{console.log(card?.zipcode && validateZipcodeCard)}
 							<OSItemContent onPress={() => handleCardSelected(card)}>
 								<View style={styles.viewStyle}>
 									{card.id === cardSelected?.id ? (
@@ -117,6 +122,13 @@ export const StripeCardsListUI = (props: any) => {
 										XXXX-XXXX-XXXX-{card.last4}
 									</OText>
 								</View>
+								{!card?.zipcode && validateZipcodeCard && (
+									<View style={styles.viewStyle}>
+										<OText size={10} color={theme?.colors?.danger5}>
+											({t('MISSING_ZIPCODE', 'Missing zipcode')})
+										</OText>
+									</View>
+								)}
 							</OSItemContent>
 							<OSItemActions>
 								<OAlert

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

@@ -636,6 +636,7 @@ export interface GoogleMapsParams {
 	handleToggleMap?: () => void,
 	isIntGeoCoder: boolean,
 	businessZones?: any
+	delta?: number
 }
 
 export interface HelpParams {