-- CODE language-jsx --
import React from 'react';
import Images from '../config/Images';
import {
 Button,
 Divider,
 Icon,
 ScreenContainer,
 Touchable,
 withTheme,
} from '@draftbit/ui';
import { Image, ScrollView, StyleSheet, Text, View } from 'react-native';
const REPLACE_SCREEN_NAME = props => {
 const { theme } = props;
 return (
   <ScreenContainer hasSafeArea={true} scrollable={true}>
     <ScrollView
       contentContainerStyle={styles.scrollViewIp}
       showsVerticalScrollIndicator={true}
       bounces={true}
       showsHorizontalScrollIndicator={false}
     >
       <View style={styles.viewYZ}>
         <Image
           style={styles.image6J}
           resizeMode=""contain""
           source={Images.ImagePlaceholder}
         />
         <View
           style={styles.viewSm}
           pointerEvents=""auto""
           hitSlop={{}}
           importantForAccessibility=""auto""
           accessible={true}
         >
           <Text
             style={StyleSheet.flatten([
               styles.textUV,
               theme.typography.headline4,
               { color: theme.colors.strong },
             ])}
           >
             Product Name
           </Text>
           <Text
             style={StyleSheet.flatten([
               theme.typography.subtitle1,
               { color: theme.colors.medium },
             ])}
           >
             Product Description
           </Text>
         </View>
       </View>
       <View
         style={styles.viewA9}
         hitSlop={{}}
         pointerEvents=""auto""
         accessible={true}
         importantForAccessibility=""auto""
       >
         <Touchable style={styles.touchableOy}>
           <View
             style={styles.viewXj}
             pointerEvents=""auto""
             accessible={true}
             hitSlop={{}}
             importantForAccessibility=""auto""
           >
             <Icon
               style={styles.iconVD}
               size={20}
               name=""MaterialCommunityIcons/pound""
               color={theme.colors.primary}
             />
             <Text
               style={StyleSheet.flatten([
                 styles.text2Q,
                 theme.typography.subtitle2,
                 { color: theme.colors.primary },
               ])}
               textBreakStrategy=""highQuality""
               allowFontScaling={true}
               ellipsizeMode=""tail""
               accessible={true}
             >
               Tracking Number
             </Text>
           </View>
         </Touchable>
       </View>
       <View
         style={styles.viewNu}
         pointerEvents=""auto""
         importantForAccessibility=""auto""
         accessible={true}
         hitSlop={{}}
       >
         <View
           style={styles.viewWz}
           hitSlop={{}}
           pointerEvents=""auto""
           accessible={true}
           importantForAccessibility=""auto""
         >
           <Text
             style={StyleSheet.flatten([
               theme.typography.headline5,
               { color: theme.colors.strong },
             ])}
             allowFontScaling={true}
             accessible={true}
             textBreakStrategy=""highQuality""
             ellipsizeMode=""tail""
           >
             Order Details
           </Text>
           <Text
             style={StyleSheet.flatten([
               theme.typography.subtitle1,
               { color: theme.colors.strong },
             ])}
             accessible={true}
             ellipsizeMode=""tail""
             allowFontScaling={true}
             textBreakStrategy=""highQuality""
           >
             Order #
           </Text>
         </View>
         <View
           style={styles.viewPM}
           importantForAccessibility=""auto""
           accessible={true}
           pointerEvents=""auto""
           hitSlop={{}}
         >
           <View
             style={styles.viewLu}
             pointerEvents=""auto""
             importantForAccessibility=""auto""
             hitSlop={{}}
             accessible={true}
           >
             <View
               importantForAccessibility=""auto""
               pointerEvents=""auto""
               accessible={true}
               hitSlop={{}}
             >
               <Text
                 style={StyleSheet.flatten([
                   theme.typography.caption,
                   { color: theme.colors.medium },
                 ])}
                 accessible={true}
                 ellipsizeMode=""tail""
                 allowFontScaling={true}
                 textBreakStrategy=""highQuality""
               >
                 Order Total
               </Text>
               <Text
                 style={StyleSheet.flatten([
                   theme.typography.headline4,
                   { color: theme.colors.strong },
                 ])}
                 accessible={true}
                 textBreakStrategy=""highQuality""
                 allowFontScaling={true}
                 ellipsizeMode=""tail""
               >
                 $0.00
               </Text>
             </View>
           </View>
         </View>
         <Divider
           style={styles.dividerEa}
           color={theme.colors.divider}
           height={1}
         />
         <View
           style={styles.view03}
           accessible={true}
           pointerEvents=""auto""
           importantForAccessibility=""auto""
           hitSlop={{}}
         >
           <View
             style={styles.view2X}
             hitSlop={{}}
             pointerEvents=""auto""
             accessible={true}
             importantForAccessibility=""auto""
           >
             <View
               pointerEvents=""auto""
               hitSlop={{}}
               accessible={true}
               importantForAccessibility=""auto""
             >
               <Text
                 style={StyleSheet.flatten([
                   theme.typography.caption,
                   { color: theme.colors.medium },
                 ])}
                 allowFontScaling={true}
                 textBreakStrategy=""highQuality""
                 accessible={true}
                 ellipsizeMode=""tail""
               >
                 Order Date
               </Text>
               <Text
                 style={StyleSheet.flatten([
                   theme.typography.headline4,
                   { color: theme.colors.strong },
                 ])}
                 ellipsizeMode=""tail""
                 textBreakStrategy=""highQuality""
                 allowFontScaling={true}
                 accessible={true}
               >
                 DD/MM/YY
               </Text>
             </View>
           </View>
         </View>
         <Divider
           style={styles.divider88}
           height={1}
           color={theme.colors.divider}
         />
         <View
           style={styles.viewPR}
           accessible={true}
           hitSlop={{}}
           importantForAccessibility=""auto""
           pointerEvents=""auto""
         >
           <View
             style={styles.viewBg}
             importantForAccessibility=""auto""
             accessible={true}
             pointerEvents=""auto""
             hitSlop={{}}
           >
             <Text
               style={StyleSheet.flatten([
                 theme.typography.caption,
                 { color: theme.colors.medium },
               ])}
               textBreakStrategy=""highQuality""
               accessible={true}
               ellipsizeMode=""tail""
               allowFontScaling={true}
             >
               Address
             </Text>
             <View
               style={styles.viewMv}
               hitSlop={{}}
               importantForAccessibility=""auto""
               pointerEvents=""auto""
               accessible={true}
             >
               <Text
                 style={StyleSheet.flatten([
                   theme.typography.headline6,
                   { color: theme.colors.strong },
                 ])}
                 ellipsizeMode=""tail""
                 accessible={true}
                 allowFontScaling={true}
                 textBreakStrategy=""highQuality""
               >
                 Customer Name
               </Text>
               <Text
                 style={StyleSheet.flatten([
                   theme.typography.headline6,
                   { color: theme.colors.strong },
                 ])}
                 allowFontScaling={true}
                 textBreakStrategy=""highQuality""
                 accessible={true}
                 ellipsizeMode=""tail""
               >
                 Street Name
               </Text>
               <View
                 style={styles.viewJ3}
                 pointerEvents=""auto""
                 accessible={true}
                 importantForAccessibility=""auto""
                 hitSlop={{}}
               >
                 <Text
                   style={StyleSheet.flatten([
                     styles.textLr,
                     theme.typography.headline6,
                     { color: theme.colors.strong },
                   ])}
                   allowFontScaling={true}
                   textBreakStrategy=""highQuality""
                   accessible={true}
                   ellipsizeMode=""tail""
                 >
                   City
                 </Text>
                 <Text
                   style={StyleSheet.flatten([
                     styles.textWP,
                     theme.typography.headline6,
                     { color: theme.colors.strong },
                   ])}
                   textBreakStrategy=""highQuality""
                   accessible={true}
                   ellipsizeMode=""tail""
                   allowFontScaling={true}
                 >
                   State
                 </Text>
                 <Text
                   style={StyleSheet.flatten([
                     theme.typography.headline6,
                     { color: theme.colors.strong },
                   ])}
                   textBreakStrategy=""highQuality""
                   accessible={true}
                   ellipsizeMode=""tail""
                   allowFontScaling={true}
                 >
                   ZIP
                 </Text>
               </View>
               <Text
                 style={StyleSheet.flatten([
                   theme.typography.headline6,
                   { color: theme.colors.strong },
                 ])}
                 accessible={true}
                 ellipsizeMode=""tail""
                 allowFontScaling={true}
                 textBreakStrategy=""highQuality""
               >
                 Country
               </Text>
               <Text
                 style={StyleSheet.flatten([
                   theme.typography.headline6,
                   { color: theme.colors.strong },
                 ])}
                 textBreakStrategy=""highQuality""
                 accessible={true}
                 allowFontScaling={true}
                 ellipsizeMode=""tail""
               >
                 Phone Number
               </Text>
             </View>
           </View>
         </View>
         <Divider
           style={styles.dividerTS}
           height={1}
           color={theme.colors.divider}
         />
       </View>
       <View
         style={styles.viewT1}
         pointerEvents=""auto""
         hitSlop={{}}
         accessible={true}
         importantForAccessibility=""auto""
       >
         <View
           style={styles.viewYm}
           importantForAccessibility=""auto""
           pointerEvents=""auto""
           accessible={true}
           hitSlop={{}}
         >
           <Text
             style={StyleSheet.flatten([
               theme.typography.headline5,
               { color: theme.colors.strong },
             ])}
             accessible={true}
             allowFontScaling={true}
             ellipsizeMode=""tail""
             textBreakStrategy=""highQuality""
           >
             Store
           </Text>
         </View>
         <View
           style={styles.viewAv}
           importantForAccessibility=""auto""
           accessible={true}
           hitSlop={{}}
           pointerEvents=""auto""
         >
           <View
             style={styles.viewUi}
             accessible={true}
             importantForAccessibility=""auto""
             pointerEvents=""auto""
             hitSlop={{}}
           >
             <View
               style={styles.viewXq}
               accessible={true}
               pointerEvents=""auto""
               importantForAccessibility=""auto""
               hitSlop={{}}
             >
               <Image
                 style={styles.imageJZ}
                 resizeMode=""contain""
                 source={Images.ImagePlaceholder}
               />
             </View>
             <View
               style={styles.viewHe}
               accessible={true}
               hitSlop={{}}
               pointerEvents=""auto""
               importantForAccessibility=""auto""
             >
               <Text
                 style={StyleSheet.flatten([
                   theme.typography.headline6,
                   { color: theme.colors.strong },
                 ])}
                 allowFontScaling={true}
                 textBreakStrategy=""highQuality""
                 accessible={true}
                 ellipsizeMode=""tail""
               >
                 Store Name
               </Text>
               <Text
                 style={StyleSheet.flatten([
                   styles.text6I,
                   theme.typography.subtitle1,
                   { color: theme.colors.medium },
                 ])}
                 accessible={true}
                 textBreakStrategy=""highQuality""
                 allowFontScaling={true}
                 ellipsizeMode=""tail""
               >
                 Store Description
               </Text>
             </View>
           </View>
         </View>
         <Button
           style={StyleSheet.flatten([
             styles.buttonJk,
             { borderRadius: theme.borderRadius.global },
           ])}
           type=""solid""
         >
           Visit Store
         </Button>
       </View>
     </ScrollView>
   </ScreenContainer>
 );
};
const styles = StyleSheet.create({
 viewXj: {
   alignItems: 'center',
   flexDirection: 'row',
 },
 viewWz: {
   alignItems: 'center',
   justifyContent: 'space-between',
   flexDirection: 'row',
   width: '100%',
   marginTop: 17,
 },
 viewLu: {
   width: '100%',
   alignItems: 'flex-start',
   flexDirection: 'row',
 },
 view2X: {
   flexDirection: 'row',
   width: '100%',
   alignItems: 'flex-start',
 },
 textLr: {
   marginRight: 4,
 },
 viewBg: {
   width: '100%',
 },
 viewYm: {
   flexDirection: 'row',
   width: '100%',
   justifyContent: 'space-between',
   alignItems: 'center',
 },
 viewXq: {
   width: 40,
   height: 40,
   marginRight: 14,
 },
 viewUi: {
   flexDirection: 'row',
   alignItems: 'flex-start',
   maxWidth: '80%',
   width: '100%',
 },
 scrollViewIp: {
   flexGrow: 1,
 },
 textUV: {
   marginBottom: 6,
 },
 viewYZ: {
   paddingBottom: 14,
   paddingTop: 44,
   paddingLeft: 32,
   paddingRight: 32,
   alignItems: 'flex-start',
   flexDirection: 'row',
 },
 touchableOy: {
   flexWrap: 'wrap',
 },
 image6J: {
   height: 86,
   marginRight: 24,
   width: 86,
 },
 iconVD: {
   alignSelf: 'flex-start',
   width: 24,
   height: 24,
 },
 imageJZ: {
   height: 40,
   width: 40,
 },
 viewSm: {
   alignItems: 'flex-start',
 },
 text2Q: {
   marginLeft: 8,
 },
 viewA9: {
   paddingLeft: 32,
   paddingRight: 32,
   marginTop: 24,
 },
 viewPM: {
   paddingTop: 12,
   paddingBottom: 12,
   marginBottom: 12,
   flexDirection: 'row',
   alignItems: 'flex-start',
   justifyContent: 'space-between',
   width: '100%',
   marginTop: 12,
 },
 textWP: {
   marginRight: 4,
 },
 viewMv: {
   width: '100%',
 },
 text6I: {
   marginBottom: 8,
 },
 viewHe: {
   paddingRight: 34,
 },
 viewAv: {
   flexDirection: 'row',
   alignItems: 'flex-start',
   justifyContent: 'space-between',
   width: '100%',
   paddingBottom: 12,
   paddingTop: 12,
   marginTop: 12,
   marginBottom: 12,
 },
 viewJ3: {
   flexDirection: 'row',
   alignItems: 'center',
   width: '100%',
 },
 viewNu: {
   paddingBottom: 17,
   paddingTop: 17,
   paddingRight: 32,
   paddingLeft: 32,
 },
 buttonJk: {
   height: 54,
   alignItems: 'center',
   justifyContent: 'center',
   width: '100%',
 },
 dividerEa: {
   height: 1,
 },
 view03: {
   marginTop: 12,
   paddingTop: 12,
   paddingBottom: 12,
   marginBottom: 12,
   flexDirection: 'row',
   alignItems: 'flex-start',
   justifyContent: 'space-between',
   width: '100%',
 },
 viewT1: {
   paddingBottom: 54,
   paddingLeft: 32,
   paddingTop: 17,
   paddingRight: 32,
 },
 divider88: {
   height: 1,
 },
 viewPR: {
   flexDirection: 'row',
   alignItems: 'flex-start',
   justifyContent: 'space-between',
   width: '100%',
   marginTop: 12,
   paddingTop: 12,
   paddingBottom: 12,
   marginBottom: 12,
 },
 dividerTS: {
   height: 1,
 },
});
export default withTheme(REPLACE_SCREEN_NAME);