From 03e15d76c8addeee9a977fb71fe3ad9da0a39e28 Mon Sep 17 00:00:00 2001
From: guillermo dieguez <guillermodieguez@outlook.com>
Date: Wed, 27 Nov 2024 10:46:05 -0300
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20app:=20implement=20empty=20state=20?=
 =?UTF-8?q?for=20payments?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/warm-pants-type.md        |  5 ++
 src/components/payments/Empty.tsx    | 33 +++++++++++++
 src/components/payments/Payments.tsx | 73 +++++++++++++++-------------
 3 files changed, 78 insertions(+), 33 deletions(-)
 create mode 100644 .changeset/warm-pants-type.md
 create mode 100644 src/components/payments/Empty.tsx

diff --git a/.changeset/warm-pants-type.md b/.changeset/warm-pants-type.md
new file mode 100644
index 00000000..0c504a88
--- /dev/null
+++ b/.changeset/warm-pants-type.md
@@ -0,0 +1,5 @@
+---
+"@exactly/mobile": patch
+---
+
+✨ implement empty state for payments screen
diff --git a/src/components/payments/Empty.tsx b/src/components/payments/Empty.tsx
new file mode 100644
index 00000000..03c5604c
--- /dev/null
+++ b/src/components/payments/Empty.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import { StyleSheet } from "react-native";
+import { YStack } from "tamagui";
+
+import Blob from "../../assets/images/exa-card-blob.svg";
+import ExaCard from "../../assets/images/exa-card.svg";
+import Text from "../shared/Text";
+import View from "../shared/View";
+
+export default function Empty() {
+  return (
+    <View fullScreen padding="$s5" alignItems="center" justifyContent="center" backgroundColor="$backgroundSoft">
+      <YStack gap="$s6" alignItems="center" justifyContent="center">
+        <View width="100%" aspectRatio={1} justifyContent="center" alignItems="center">
+          <View width="100%" height="100%">
+            <Blob width="100%" height="100%" />
+          </View>
+          <View width="100%" height="100%" style={StyleSheet.absoluteFillObject}>
+            <ExaCard width="100%" height="100%" />
+          </View>
+        </View>
+        <YStack alignItems="center" justifyContent="center" gap="$s6">
+          <Text emphasized title color="$interactiveTextBrandDefault" textAlign="center">
+            No payments pending
+          </Text>
+          <Text footnote secondary textAlign="center">
+            You&apos;re all caught up! Start using your card to see payments listed here.
+          </Text>
+        </YStack>
+      </YStack>
+    </View>
+  );
+}
diff --git a/src/components/payments/Payments.tsx b/src/components/payments/Payments.tsx
index ae230de4..a13ce984 100644
--- a/src/components/payments/Payments.tsx
+++ b/src/components/payments/Payments.tsx
@@ -4,6 +4,7 @@ import { ms } from "react-native-size-matters";
 import { ScrollView } from "tamagui";
 import { zeroAddress } from "viem";
 
+import Empty from "./Empty";
 import NextPayment from "./NextPayment";
 import UpcomingPayments from "./UpcomingPayments";
 import { useReadPreviewerExactly } from "../../generated/contracts";
@@ -32,7 +33,7 @@ export default function Payments() {
       <View fullScreen backgroundColor="$backgroundMild">
         <ScrollView
           flex={1}
-          backgroundColor="$backgroundMild"
+          backgroundColor={usdDue === 0n ? "$backgroundSoft" : "$backgroundMild"}
           refreshControl={
             <RefreshControl
               backgroundColor="$backgroundSoft"
@@ -45,42 +46,48 @@ export default function Payments() {
             />
           }
         >
-          <View padded gap="$s5" backgroundColor="$backgroundSoft">
-            <View flexDirection="row" gap={ms(10)} justifyContent="space-between" alignItems="center">
-              <Text fontSize={ms(20)} fontWeight="bold">
-                Payments
-              </Text>
-            </View>
-            <View gap="$s8">
-              <View gap="$s6">
-                <View flexDirection="column" justifyContent="center" alignItems="center">
-                  <Text
-                    sensitive
-                    textAlign="center"
-                    fontFamily="$mono"
-                    fontSize={ms(40)}
-                    fontWeight="bold"
-                    overflow="hidden"
-                  >
-                    {(Number(usdDue) / 1e18).toLocaleString(undefined, {
-                      style: "currency",
-                      currency: "USD",
-                      currencyDisplay: "narrowSymbol",
-                    })}
+          {usdDue === 0n ? (
+            <Empty />
+          ) : (
+            <>
+              <View padded gap="$s5" backgroundColor="$backgroundSoft">
+                <View flexDirection="row" gap={ms(10)} justifyContent="space-between" alignItems="center">
+                  <Text fontSize={ms(20)} fontWeight="bold">
+                    Payments
                   </Text>
                 </View>
-                <View gap="$s3" alignItems="center">
-                  <Text emphasized title3 color="$uiNeutralSecondary">
-                    Total debt
-                  </Text>
+                <View gap="$s8">
+                  <View gap="$s6">
+                    <View flexDirection="column" justifyContent="center" alignItems="center">
+                      <Text
+                        sensitive
+                        textAlign="center"
+                        fontFamily="$mono"
+                        fontSize={ms(40)}
+                        fontWeight="bold"
+                        overflow="hidden"
+                      >
+                        {(Number(usdDue) / 1e18).toLocaleString(undefined, {
+                          style: "currency",
+                          currency: "USD",
+                          currencyDisplay: "narrowSymbol",
+                        })}
+                      </Text>
+                    </View>
+                    <View gap="$s3" alignItems="center">
+                      <Text emphasized title3 color="$uiNeutralSecondary">
+                        Total debt
+                      </Text>
+                    </View>
+                  </View>
                 </View>
               </View>
-            </View>
-          </View>
-          <View padded gap="$s6">
-            <NextPayment />
-            <UpcomingPayments />
-          </View>
+              <View padded gap="$s6">
+                <NextPayment />
+                <UpcomingPayments />
+              </View>
+            </>
+          )}
         </ScrollView>
       </View>
     </SafeView>