jornada-ui 0.4.4 → 0.4.5

package/src/components/travel-history/index.tsx

@@ -1,314 +1,330 @@
-/**
- * IMPORTS
- */
-import React, { forwardRef } from "react";
-
-// components
-import Box from "../box";
-import Typography from "../typography";
-
-// commons / icons
-import { Icons } from "../../common/icons-svg";
-
-// typings
-import type { ITravelHistory } from "./interface";
-import { asBaseComponent } from "../../@types/as-base-component";
-
-// styles
-import { theme } from "../../styles/theme/theme";
-
-/**
- * Componente TravelHistory para a interação da  ui.
- */
-const TravelHistory = forwardRef<any, ITravelHistory>((props, ref): React.ReactElement => {
-  const {
-    testID,
-    backgroundColor,
-    idViagem,
-    startTrip,
-    plate,
-    value,
-    status,
-    supply,
-    nextTrip,
-    origin,
-    destination,
-
-    // Flags de problema
-    supplyIssue = false,
-    logisticsIssue = false,
-  } = props;
-
-  // Normaliza status
-  const normalizedStatus = (status ?? "ABERTA").toString().trim().toUpperCase();
-  const hasError = Boolean(supplyIssue || logisticsIssue);
-
-  // Regras de cor:
-  // - Se houver erro -> vermelho
-  // - Senão, se FECHADA -> verde
-  // - Senão (ABERTA e sem erro) -> usa backgroundColor (laranja já usado por você) ou fallback
-  const baseOpenColor = backgroundColor ?? theme.colors.green[400];
-  const computedColor = hasError
-    ? theme.colors.red[400]
-    : normalizedStatus === "FECHADA"
-      ? theme.colors.green[400]
-      : baseOpenColor;
-
-  return (
-    <Box
-      ref={ref}
-      testID={testID}
-      width={"100%"}
-      backgroundColor={theme.colors.neutral[25]}
-      borderStyled={{
-        borderRadius: theme.borderWidths.thick_medium,
-      }}
-      marginStyle={{
-        marginBottom: theme.margins["2xs"],
-      }}
-    >
-      <Box
-        testID="travel-history-header"
-        width={"100%"}
-        height={30}
-        backgroundColor={computedColor}
-        borderStyled={{
-          borderTopLeftRadius: theme.borderWidths.thin_bold,
-          borderTopRightRadius: theme.borderWidths.thin_bold,
-          borderColor: theme.colors.blue[400],
-        }}
-        flexStyle={{
-          flexDirection: "row",
-          justifyContent: "space-between",
-          alignItems: "center",
-        }}
-      >
-        <Typography
-          text={`VIAGEM #${idViagem ?? "000"}`}
-          color={theme.colors.neutral[25]}
-          size={theme.fontSizes.sm}
-          fontFamily={theme.fonts.inter_semi_bold_600}
-          fontWeight={"500"}
-          lineHeight={theme.fontSizes.lg}
-          marginLeft={theme.margins["2xs"]}
-        />
-        <Typography
-          text={`INÍCIO ${startTrip ?? "01/01/2025 00:00"}`}
-          color={theme.colors.neutral[25]}
-          size={theme.fontSizes.sm}
-          fontFamily={theme.fonts.inter_semi_bold_600}
-          fontWeight={"500"}
-          lineHeight={theme.fontSizes.lg}
-          marginRight={theme.margins["2xs"]}
-        />
-      </Box>
-
-      <Box
-        width={"100%"}
-        flexStyle={{
-          flexDirection: "row",
-          justifyContent: "space-between",
-        }}
-        paddingStyle={{
-          padding: theme.paddings["2xs"],
-        }}
-      >
-        <Box width={"100%"}>
-          <Box flexStyle={{ flexDirection: "row", alignItems: "center" }}>
-            <Box width={"100%"}>
-              <Box
-                flexStyle={{
-                  flexDirection: "row",
-                  justifyContent: "space-between",
-                }}
-                width={"100%"}
-              >
-                <Box flexStyle={{ flexDirection: "row" }}>
-                  <Typography
-                    text={`Placa: `}
-                    size={theme.fontSizes.xs}
-                    color={theme.colors.black[10]}
-                    fontFamily={theme.fonts.inter_medium_500}
-                  />
-                  <Typography
-                    text={`${plate ?? "00:00"}`}
-                    size={theme.fontSizes.xs}
-                    color={theme.colors.black[180]}
-                    fontFamily={theme.fonts.inter_light_300}
-                  />
-                </Box>
-
-                <Box flexStyle={{ flexDirection: "row", alignItems: "center" }}>
-                  {supplyIssue && (
-                    <Box testID="icon-supply" marginStyle={{ marginRight: 8 }}>
-                      <Icons icon={"GAS_PUMP"} color={computedColor} size={24} />
-                    </Box>
-                  )}
-
-                  {logisticsIssue && (
-                    <Box testID="icon-logistics" marginStyle={{ marginRight: 8 }}>
-                      <Icons
-                        icon={"EXCLAMATION_CIRCLE"}
-                        background={computedColor}
-                        color={"#ffffff"}
-                        size={24}
-                      />
-                    </Box>
-                  )}
-
-                  <Box testID="icon-truck" marginStyle={{ marginRight: 8 }}>
-                    <Icons icon={"TRUCK_ACTIVITY"} color={computedColor} size={24} />
-                  </Box>
-                </Box>
-              </Box>
-
-              <Box
-                width={"84%"}
-                flexStyle={{
-                  flexDirection: "row",
-                  flexWrap: "wrap",
-                }}
-              >
-                <Typography
-                  style={{ flexShrink: 1 }}
-                  text={`Valor: `}
-                  size={theme.fontSizes.xs}
-                  color={theme.colors.black[10]}
-                  fontFamily={theme.fonts.inter_medium_500}
-                />
-                <Typography
-                  text={`R$ ${value ?? "00,00"}`}
-                  size={11}
-                  color={theme.colors.black[180]}
-                  fontFamily={theme.fonts.inter_regular_400}
-                />
-              </Box>
-
-              <Box
-                width={"84%"}
-                flexStyle={{
-                  flexDirection: "row",
-                  flexWrap: "wrap",
-                }}
-              >
-                <Typography
-                  style={{ flexShrink: 1 }}
-                  text={`Status viagem: `}
-                  size={theme.fontSizes.xs}
-                  color={theme.colors.black[10]}
-                  fontFamily={theme.fonts.inter_medium_500}
-                />
-                <Typography
-                  text={`${status ?? "ABERTA"}`}
-                  size={11}
-                  color={theme.colors.black[180]}
-                  fontFamily={theme.fonts.inter_regular_400}
-                />
-              </Box>
-
-              <Box
-                width={"84%"}
-                flexStyle={{
-                  flexDirection: "row",
-                  flexWrap: "wrap",
-                }}
-              >
-                <Typography
-                  style={{ flexShrink: 1 }}
-                  text={`Abastecimentos: `}
-                  size={theme.fontSizes.xs}
-                  color={theme.colors.black[10]}
-                  fontFamily={theme.fonts.inter_medium_500}
-                />
-                <Typography
-                  text={`${supply ?? "0"} PENDENTES`}
-                  size={11}
-                  color={theme.colors.black[180]}
-                  fontFamily={theme.fonts.inter_regular_400}
-                />
-              </Box>
-
-              <Box
-                width={"84%"}
-                flexStyle={{
-                  flexDirection: "row",
-                  flexWrap: "wrap",
-                }}
-              >
-                <Typography
-                  style={{ flexShrink: 1 }}
-                  text={`Próxima viagem: `}
-                  size={theme.fontSizes.xs}
-                  color={theme.colors.black[10]}
-                  fontFamily={theme.fonts.inter_medium_500}
-                />
-                <Typography
-                  text={`${nextTrip ?? "Não especificado"}`}
-                  size={11}
-                  color={theme.colors.black[180]}
-                  fontFamily={theme.fonts.inter_regular_400}
-                />
-              </Box>
-            </Box>
-          </Box>
-        </Box>
-      </Box>
-
-      <Box
-        width={"100%"}
-        flexStyle={{
-          flexDirection: "row",
-          justifyContent: "space-between",
-          alignItems: "center",
-        }}
-        paddingStyle={{
-          padding: theme.paddings["2xs"],
-        }}
-        borderStyled={{
-          borderTopWidth: theme.borderWidths.thin_medium,
-          borderTopColor: theme.colors.neutral[200],
-        }}
-      >
-        <Box marginStyle={{ marginRight: 2 }}>
-          <Typography
-            text={`Atividade:`}
-            size={theme.fontSizes.xs}
-            color={theme.colors.black[180]}
-            fontFamily={theme.fonts.inter_regular_400}
-          />
-          <Typography
-            text={`${origin ?? "Não especificado"}`}
-            size={theme.fontSizes.sm}
-            color={theme.colors.black[100]}
-            fontFamily={theme.fonts.inter_semi_bold_600}
-          />
-        </Box>
-
-        <Box
-          flexStyle={{ flexDirection: "column", alignItems: "flex-end", justifyContent: "center" }}
-        >
-          <Typography
-            text={`Tipo atividade: `}
-            size={theme.fontSizes.xs}
-            color={theme.colors.black[180]}
-            fontFamily={theme.fonts.inter_light_300}
-          />
-          <Typography
-            text={`${destination ?? "Não especificado"}`}
-            size={theme.fontSizes.sm}
-            color={theme.colors.black[100]}
-            fontFamily={theme.fonts.inter_semi_bold_600}
-            marginLeft={4}
-          />
-        </Box>
-      </Box>
-    </Box>
-  );
-});
-
-TravelHistory.displayName = "TravelHistory";
-
-/**
- * EXPORTS
- */
-export default asBaseComponent(TravelHistory);
+/**
+ * IMPORTS
+ */
+import React, { forwardRef } from "react";
+
+// components
+import Box from "../box";
+import Typography from "../typography";
+
+// commons / icons
+import { Icons } from "../../common/icons-svg";
+
+// typings
+import type { ITravelHistory } from "./interface";
+import { asBaseComponent } from "../../@types/as-base-component";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+import { TouchableOpacity } from "react-native";
+
+/**
+ * Componente TravelHistory para a interação da  ui.
+ */
+const TravelHistory = forwardRef<any, ITravelHistory>((props, ref): React.ReactElement => {
+  const {
+    testID,
+    backgroundColor,
+    idViagem,
+    startTrip,
+    plate,
+    value,
+    status,
+    supply,
+    nextTrip,
+    origin,
+    destination,
+    onPress,
+
+    // Flags de problema
+    supplyIssue = false,
+    logisticsIssue = false,
+  } = props;
+
+  return (
+    <TouchableOpacity
+      ref={ref}
+      activeOpacity={0.7}
+      onPress={() =>
+        onPress({
+          backgroundColor,
+          idViagem,
+          startTrip,
+          plate,
+          value,
+          status,
+          supply,
+          nextTrip,
+          origin,
+          destination,
+          supplyIssue,
+          logisticsIssue,
+        })
+      }
+    >
+      <Box
+        testID={testID}
+        width={"100%"}
+        backgroundColor={theme.colors.neutral[25]}
+        borderStyled={{
+          borderRadius: theme.borderWidths.thick_medium,
+        }}
+        marginStyle={{
+          marginBottom: theme.margins["2xs"],
+        }}
+      >
+        <Box
+          testID="travel-history-header"
+          width={"100%"}
+          height={30}
+          backgroundColor={backgroundColor}
+          borderStyled={{
+            borderTopLeftRadius: theme.borderWidths.thin_bold,
+            borderTopRightRadius: theme.borderWidths.thin_bold,
+            borderColor: theme.colors.blue[400],
+          }}
+          flexStyle={{
+            flexDirection: "row",
+            justifyContent: "space-between",
+            alignItems: "center",
+          }}
+        >
+          <Typography
+            text={`VIAGEM #${idViagem ?? "000"}`}
+            color={theme.colors.neutral[25]}
+            size={theme.fontSizes.xs}
+            fontFamily={theme.fonts.inter_semi_bold_600}
+            fontWeight={"500"}
+            lineHeight={theme.fontSizes.lg}
+            marginLeft={theme.margins["2xs"]}
+          />
+          <Typography
+            text={`INÍCIO ${startTrip ?? "01/01/2025 00:00"}`}
+            color={theme.colors.neutral[25]}
+            size={theme.fontSizes.xs}
+            fontFamily={theme.fonts.inter_semi_bold_600}
+            fontWeight={"500"}
+            lineHeight={theme.fontSizes.lg}
+            marginRight={theme.margins["2xs"]}
+          />
+        </Box>
+
+        <Box
+          width={"100%"}
+          flexStyle={{
+            flexDirection: "row",
+            justifyContent: "space-between",
+          }}
+          paddingStyle={{
+            padding: theme.paddings["2xs"],
+          }}
+        >
+          <Box width={"100%"}>
+            <Box flexStyle={{ flexDirection: "row", alignItems: "center" }}>
+              <Box width={"100%"}>
+                <Box
+                  flexStyle={{
+                    flexDirection: "row",
+                    justifyContent: "space-between",
+                  }}
+                  width={"100%"}
+                >
+                  <Box flexStyle={{ flexDirection: "row" }}>
+                    <Typography
+                      text={`Placa: `}
+                      size={theme.fontSizes.sm}
+                      color={theme.colors.black[10]}
+                      fontFamily={theme.fonts.inter_medium_500}
+                    />
+                    <Typography
+                      text={`${plate ?? "000-000"}`}
+                      size={theme.fontSizes.xs}
+                      color={theme.colors.black[180]}
+                      fontFamily={theme.fonts.inter_light_300}
+                    />
+                  </Box>
+
+                  <Box flexStyle={{ flexDirection: "row", alignItems: "center" }}>
+                    {supplyIssue && (
+                      <Box testID="icon-supply" marginStyle={{ marginRight: 8 }}>
+                        <Icons icon={"GAS_PUMP"} color={backgroundColor} size={24} />
+                      </Box>
+                    )}
+
+                    {logisticsIssue && (
+                      <Box testID="icon-logistics" marginStyle={{ marginRight: 8 }}>
+                        <Icons
+                          icon={"EXCLAMATION_CIRCLE"}
+                          background={backgroundColor}
+                          color={"#ffffff"}
+                          size={24}
+                        />
+                      </Box>
+                    )}
+
+                    <Box testID="icon-truck" marginStyle={{ marginRight: 8 }}>
+                      <Icons icon={"TRUCK_ACTIVITY"} color={backgroundColor} size={24} />
+                    </Box>
+                  </Box>
+                </Box>
+
+                {status !== "ABERTA" && (
+                  <Box
+                    width={"84%"}
+                    flexStyle={{
+                      flexDirection: "row",
+                      flexWrap: "wrap",
+                    }}
+                  >
+                    <Typography
+                      style={{ flexShrink: 1 }}
+                      text={`Valor: `}
+                      size={theme.fontSizes.sm}
+                      color={theme.colors.black[10]}
+                      fontFamily={theme.fonts.inter_medium_500}
+                    />
+                    <Typography
+                      text={`R$ ${value ?? "00,00"}`}
+                      size={11}
+                      color={theme.colors.black[180]}
+                      fontFamily={theme.fonts.inter_regular_400}
+                    />
+                  </Box>
+                )}
+
+                <Box
+                  width={"84%"}
+                  flexStyle={{
+                    flexDirection: "row",
+                    flexWrap: "wrap",
+                  }}
+                >
+                  <Typography
+                    style={{ flexShrink: 1 }}
+                    text={`Status viagem: `}
+                    size={theme.fontSizes.sm}
+                    color={theme.colors.black[10]}
+                    fontFamily={theme.fonts.inter_medium_500}
+                  />
+                  <Typography
+                    text={`${status ?? "ABERTA"}`}
+                    size={theme.fontSizes.xs}
+                    color={backgroundColor ?? theme.colors.black[180]}
+                    fontFamily={theme.fonts.inter_regular_400}
+                  />
+                </Box>
+
+                <Box
+                  width={"84%"}
+                  flexStyle={{
+                    flexDirection: "row",
+                    flexWrap: "wrap",
+                  }}
+                >
+                  <Typography
+                    style={{ flexShrink: 1 }}
+                    text={`Abastecimentos: `}
+                    size={theme.fontSizes.sm}
+                    color={theme.colors.black[10]}
+                    fontFamily={theme.fonts.inter_medium_500}
+                  />
+                  <Typography
+                    text={`${supply ?? "0"}`}
+                    size={theme.fontSizes.xs}
+                    color={backgroundColor ?? theme.colors.black[180]}
+                    fontFamily={theme.fonts.inter_regular_400}
+                  />
+                </Box>
+
+                <Box
+                  width={"84%"}
+                  flexStyle={{
+                    flexDirection: "row",
+                    flexWrap: "wrap",
+                  }}
+                >
+                  <Typography
+                    style={{ flexShrink: 1 }}
+                    text={`Próxima viagem: `}
+                    size={theme.fontSizes.sm}
+                    color={theme.colors.black[10]}
+                    fontFamily={theme.fonts.inter_medium_500}
+                  />
+                  <Typography
+                    text={`${nextTrip ?? "Não especificado"}`}
+                    size={theme.fontSizes.xs}
+                    color={backgroundColor ?? theme.colors.black[180]}
+                    fontFamily={theme.fonts.inter_regular_400}
+                  />
+                </Box>
+              </Box>
+            </Box>
+          </Box>
+        </Box>
+
+        <Box
+          width={"100%"}
+          flexStyle={{
+            flexDirection: "row",
+            justifyContent: "space-between",
+            alignItems: "center",
+          }}
+          paddingStyle={{
+            padding: theme.paddings["2xs"],
+          }}
+          borderStyled={{
+            borderTopWidth: theme.borderWidths.thin_medium,
+            borderTopColor: theme.colors.neutral[200],
+          }}
+        >
+          <Box marginStyle={{ marginRight: 2 }}>
+            <Typography
+              text={`Origem:`}
+              size={theme.fontSizes.xs}
+              color={theme.colors.black[180]}
+              fontFamily={theme.fonts.inter_regular_400}
+            />
+            <Typography
+              text={`${origin ?? "NÃO INFORMADO"}`}
+              size={theme.fontSizes["2xs"]}
+              align={"left"}
+              color="black180"
+              fontFamily={theme.fonts.inter_semi_bold_600}
+              lineHeight={22}
+              letterSpacing={"regular"}
+            />
+          </Box>
+
+          <Box
+            flexStyle={{
+              flexDirection: "column",
+              alignItems: "flex-end",
+              justifyContent: "center",
+            }}
+          >
+            <Typography
+              text={`Destino: `}
+              size={theme.fontSizes.xs}
+              color={theme.colors.black[180]}
+              fontFamily={theme.fonts.inter_regular_400}
+            />
+            <Typography
+              text={`${destination ?? "NÃO INFORMADO"}`}
+              size={theme.fontSizes["2xs"]}
+              color={theme.colors.black[100]}
+              fontFamily={theme.fonts.inter_semi_bold_600}
+              marginLeft={4}
+            />
+          </Box>
+        </Box>
+      </Box>
+    </TouchableOpacity>
+  );
+});
+
+TravelHistory.displayName = "TravelHistory";
+
+/**
+ * EXPORTS
+ */
+export default asBaseComponent(TravelHistory);