cardStatus

kulturspektakel · Sep 13, 2024 · e4d2934 · e4d2934
1 parent f05b2de
commit e4d2934
Show file tree

Hide file tree

Showing 4 changed files with 259 additions and 70 deletions.
diff --git a/app/components/kultcard/Card.tsx b/app/components/kultcard/Card.tsx
@@ -1,7 +1,7 @@
-import {useEffect, useState} from 'react';
 import {gql} from 'graphql-request';
 import {Box} from '@chakra-ui/react';
 import {CardFragmentFragment} from '~/types/graphql';
+import InfoText from './InfoText';
 
 export const currencyFormatter = new Intl.NumberFormat('de-DE', {
   style: 'currency',
@@ -16,15 +16,9 @@ export const CardFragment = gql`
 `;
 
 export default function Card({balance, deposit}: CardFragmentFragment) {
-  const [mounted, setMounted] = useState(false);
-  useEffect(() => {
-    setTimeout(() => setMounted(true), 200);
-  }, []);
-
   return (
-    <Box zIndex={2} position="relative">
+    <Box>
       <Box overflow="hidden" borderRadius={17} boxShadow="lg">
-        {/* <div className={`${styles.card} ${mounted ? styles.activeCard : ''}`}> */}
         <svg viewBox="0 0 242.65 153.01">
           <defs>
             <linearGradient
@@ -231,6 +225,11 @@ export default function Card({balance, deposit}: CardFragmentFragment) {
           </g>
         </svg>
       </Box>
+
+      <InfoText textAlign="center" mt="2">
+        Das Guthaben kann an den Bonbuden ausgezahlt werden. Auf der Karte
+        selbst sind 2&nbsp;Euro Kartenpfand.
+      </InfoText>
     </Box>
   );
 }
diff --git a/app/components/kultcard/InfoText.tsx b/app/components/kultcard/InfoText.tsx
@@ -0,0 +1,9 @@
+import {Text, TextProps} from '@chakra-ui/react';
+
+export default function InfoText({children, ...props}: TextProps) {
+  return (
+    <Text color="offwhite.500" fontSize="sm" {...props}>
+      {children}
+    </Text>
+  );
+}
diff --git a/app/components/kultcard/Transaction.tsx b/app/components/kultcard/Transaction.tsx
@@ -2,6 +2,7 @@ import {gql} from 'graphql-request';
 import {currencyFormatter} from './Card';
 import {CardTransactionFragment} from '~/types/graphql';
 import {Box, Flex, Heading, ListItem} from '@chakra-ui/react';
+import InfoText from './InfoText';
 
 export const CardTransaction = gql`
   fragment CardTransaction on Transaction {
@@ -30,15 +31,18 @@ export const CardTransaction = gql`
   }
 `;
 
-export default function Transaction(props: CardTransactionFragment) {
+export default function Transaction(
+  props: CardTransactionFragment & {isLastItem: boolean},
+) {
   const total = props.balanceBefore - props.balanceAfter;
   const isTopUp = props.balanceAfter > props.balanceBefore;
 
   let title: string = isTopUp ? 'Gutschrift' : 'Abbuchung';
   if (total === 0) {
     title = 'Unbekannte Buchung';
   }
-  let subtitle: string | undefined = undefined;
+  let products: React.ReactNode = undefined;
+  let subtitle: React.ReactNode = undefined;
   let emoji: string | undefined = isTopUp ? '💰' : undefined;
 
   if (props.__typename === 'CardTransaction') {
@@ -51,14 +55,34 @@ export default function Transaction(props: CardTransactionFragment) {
       title = productList?.name;
     }
 
-    const p = order?.items.map((i) => `${i.amount}× ${i.name}`) ?? [];
+    const p = order?.items.map((i) => `${i.amount}× ${i.name}`) ?? [];
     const deposit = props.depositAfter - props.depositBefore;
     if (deposit > 0) {
-      p.push(`${deposit}× Pfand`);
+      p.push(`${deposit}× Pfand`);
     } else if (deposit < 0) {
-      p.push(`${deposit * -1}× Pfandrückgabe`);
+      p.push(`${deposit * -1}× Pfandrückgabe`);
     }
-    subtitle = p.join(', ');
+    products = p.join(', ');
+
+    subtitle = (
+      <>
+        {new Date(props.deviceTime)
+          .toLocaleDateString('de-DE', {
+            weekday: 'short',
+            day: '2-digit',
+            month: 'long',
+            timeZone: 'Europe/Berlin',
+          })
+          .replace(',', '')}
+        ,&nbsp;
+        {new Date(props.deviceTime).toLocaleTimeString('de-DE', {
+          hour: '2-digit',
+          minute: '2-digit',
+          timeZone: 'Europe/Berlin',
+        })}
+        &nbsp;Uhr
+      </>
+    );
   } else if (props.__typename === 'MissingTransaction') {
     if (props.numberOfMissingTransactions === 1) {
       subtitle = 'Details noch nicht verfügbar';
@@ -69,38 +93,30 @@ export default function Transaction(props: CardTransactionFragment) {
   }
 
   return (
-    <ListItem flexDirection="row">
-      <Box>{emoji}</Box>
-      <Flex direction="column" flex="1">
-        <Heading>{title}</Heading>
-        {props.__typename === 'CardTransaction' ? (
-          <Box whiteSpace="nowrap" textOverflow="ellipsis" overflow="hidden">
-            {subtitle}
-            <br />
-            <>
-              {new Date(props.deviceTime)
-                .toLocaleDateString('de-DE', {
-                  weekday: 'short',
-                  day: '2-digit',
-                  month: 'long',
-                  timeZone: 'Europe/Berlin',
-                })
-                .replace(',', '')}
-              ,&nbsp;
-              {new Date(props.deviceTime).toLocaleTimeString('de-DE', {
-                hour: '2-digit',
-                minute: '2-digit',
-                timeZone: 'Europe/Berlin',
-              })}
-              &nbsp;Uhr
-            </>
-          </Box>
-        ) : (
-          <Box>{subtitle}</Box>
-        )}
+    <ListItem
+      flexDirection="row"
+      listStyleType="none"
+      display="flex"
+      flexDir="row"
+      alignItems="center"
+      mb={!props.isLastItem ? '4' : undefined}
+      pb={!props.isLastItem ? '3' : undefined}
+      borderBottomColor="offwhite.200"
+      borderBottomStyle="solid"
+      borderBottomWidth={!props.isLastItem ? '1px' : undefined}
+    >
+      <Box flexShrink="0" w="10" ps="1" fontSize="xl">
+        {emoji}
+      </Box>
+      <Flex direction="column" flexGrow="1">
+        <Heading size="md" mb="1">
+          {title}
+        </Heading>
+        {products && <Box>{products}</Box>}
+        {subtitle && <InfoText>{subtitle}</InfoText>}
       </Flex>
       {total !== 0 && (
-        <Box>
+        <Box fontWeight="bold" ms="3">
           {total < 0 ? '+' : ''}
           {currencyFormatter.format(Math.abs(total) / 100)}
         </Box>