ordering-ui-react-native 0.15.12 → 0.15.13-release

package/themes/business/src/components/OrderDetails/OrderHeaderComponent.tsx

@@ -30,6 +30,7 @@ interface OrderHeader {
   logisticOrderStatus?: Array<number>,
   handleViewSummaryOrder?: any;
   handleCopyClipboard?: any
+  isCustomView?: any
 }
 
 export const OrderHeaderComponent = (props: OrderHeader) => {
@@ -105,17 +106,17 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
 
   return (
     <>
-      <Header>
-        <OIconButton
-          icon={theme.images.general.arrow_left}
-          iconStyle={{ width: 20, height: 20 }}
-          borderColor={theme.colors.clear}
-          style={{ ...styles.icons, justifyContent: 'flex-end' }}
-          onClick={() => handleArrowBack()}
-        />
-
-        {
-          (!order?.isLogistic || (!logisticOrderStatus?.includes(order?.status) && !order?.order_group)) && (
+      {!props.isCustomView && (
+        <Header>
+          <OIconButton
+            icon={theme.images.general.arrow_left}
+            iconStyle={{ width: 20, height: 20 }}
+            borderColor={theme.colors.clear}
+            style={{ ...styles.icons, justifyContent: 'flex-end' }}
+            onClick={() => handleArrowBack()}
+          />
+
+          {(!order?.isLogistic || (!logisticOrderStatus?.includes(order?.status) && !order?.order_group)) && (
             <Actions>
               {getOrderStatus(order?.status, t)?.value !==
                 t('PENDING', 'Pending') && (
@@ -170,13 +171,80 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
               />
             </Actions>
           )}
-      </Header>
+        </Header>
+      )}
       <OrderHeader>
-        <OText size={13} style={{ marginBottom: 5 }}>
-          {order?.delivery_datetime_utc
-            ? parseDate(order?.delivery_datetime_utc)
-            : parseDate(order?.delivery_datetime, { utc: false })}
-        </OText>
+        {!props.isCustomView ? (
+          <OText size={13} style={{ marginBottom: 5 }}>
+            {order?.delivery_datetime_utc
+              ? parseDate(order?.delivery_datetime_utc)
+              : parseDate(order?.delivery_datetime, { utc: false })}
+          </OText>
+        ) : (
+          <Header style={{ alignItems: 'center' }}>
+            <OText size={13} style={{ marginBottom: 5 }}>
+              {order?.delivery_datetime_utc
+                ? parseDate(order?.delivery_datetime_utc)
+                : parseDate(order?.delivery_datetime, { utc: false })}
+            </OText>
+
+            {(!order?.isLogistic || (!logisticOrderStatus?.includes(order?.status) && !order?.order_group)) && (
+              <Actions>
+                {getOrderStatus(order?.status, t)?.value !==
+                  t('PENDING', 'Pending') && (
+                    <>
+                      <OIconButton
+                        icon={theme.images.general.copy}
+                        iconStyle={{
+                          width: 20,
+                          height: 25,
+                          top: 2,
+                          tintColor: theme.colors.backArrow,
+                        }}
+                        borderColor={theme.colors.clear}
+                        style={styles.icons}
+                        onClick={() => handleCopyClipboard?.()}
+                      />
+                      <OIconButton
+                        icon={theme.images.general.print}
+                        iconStyle={{
+                          width: 25,
+                          height: 22,
+                          tintColor: theme.colors.backArrow,
+                        }}
+                        borderColor={theme.colors.clear}
+                        style={styles.icons}
+                        onClick={() => handleViewSummaryOrder?.()}
+                      />
+                    </>
+                  )}
+                <OIconButton
+                  icon={theme.images.general.map}
+                  iconStyle={{
+                    width: 20,
+                    height: 20,
+                    tintColor: theme.colors.backArrow,
+                  }}
+                  borderColor={theme.colors.clear}
+                  style={styles.icons}
+                  onClick={() => handleOpenMapView()}
+                />
+
+                <OIconButton
+                  icon={theme.images.general.messages}
+                  iconStyle={{
+                    width: 20,
+                    height: 20,
+                    tintColor: theme.colors.backArrow,
+                  }}
+                  borderColor={theme.colors.clear}
+                  style={styles.icons}
+                  onClick={() => handleOpenMessagesForBusiness()}
+                />
+              </Actions>
+            )}
+          </Header>
+        )}
 
         <OText numberOfLines={2} size={20} weight="600">
           <>
@@ -200,6 +268,12 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
               <OText size={13} weight='bold'>{`${t('ORDER_TYPE', 'Order Type')}: `}</OText>
               {orderTypes(order.delivery_type)}
             </OText>
+            {order?.delivery_option && (
+              <OText size={13}>
+                <OText size={13} weight='bold'>{`${t('DELIVERY_PREFERENCE', 'Delivery Preference')}: `}</OText>
+                {order?.delivery_option?.name}
+              </OText>
+            )}
             {order?.payment_events?.length > 0 && (
               <View>
                 <OText size={13}>

package/themes/business/src/components/OrderDetails/styles.tsx

@@ -91,3 +91,10 @@ export const AssignDriver = styled.View`
   padding-vertical: 10px;
   margin-bottom: 10px;
 `;
+
+export const OSRow = styled.View`
+  flex-direction: row;
+  overflow: hidden;
+  width: 70%;
+  flex-wrap: wrap;
+`