From 0b63aa9aa5341fce5ff7037afb27ed5ddd89548b Mon Sep 17 00:00:00 2001
From: ayumi-signal <143036029+ayumi-signal@users.noreply.github.com>
Date: Fri, 1 Aug 2025 13:14:05 -0700
Subject: [PATCH] Show one time badge icon in donation receipt list
---
images/rocket-36-dark.svg | 31 ++++++++++++++
images/rocket-36-light.svg | 35 ++++++++++++++++
.../components/PreferencesDonations.scss | 21 +++++++---
ts/components/Preferences.stories.tsx | 41 +++++++++++++++++++
4 files changed, 122 insertions(+), 6 deletions(-)
create mode 100644 images/rocket-36-dark.svg
create mode 100644 images/rocket-36-light.svg
diff --git a/images/rocket-36-dark.svg b/images/rocket-36-dark.svg
new file mode 100644
index 0000000000..5ec0c73975
--- /dev/null
+++ b/images/rocket-36-dark.svg
@@ -0,0 +1,31 @@
+
diff --git a/images/rocket-36-light.svg b/images/rocket-36-light.svg
new file mode 100644
index 0000000000..b946f9513e
--- /dev/null
+++ b/images/rocket-36-light.svg
@@ -0,0 +1,35 @@
+
diff --git a/stylesheets/components/PreferencesDonations.scss b/stylesheets/components/PreferencesDonations.scss
index 9d8ecbf46c..65d4ba5c1f 100644
--- a/stylesheets/components/PreferencesDonations.scss
+++ b/stylesheets/components/PreferencesDonations.scss
@@ -244,13 +244,22 @@
);
}
- // Placeholder for icon depending on receipt type
+ // Currently only one time donations are possible
&__icon {
- width: 36px;
- height: 36px;
- border-radius: 18px;
- background-color: variables.$color-ultramarine-pale;
- flex-shrink: 0;
+ @include mixins.light-theme {
+ background: url('../images/rocket-36-light.svg');
+ }
+ @include mixins.dark-theme {
+ background: url('../images/rocket-36-dark.svg');
+ }
+
+ & {
+ width: 36px;
+ height: 36px;
+ background-size: 100%;
+ border-radius: 18px;
+ flex-shrink: 0;
+ }
}
&__details {
diff --git a/ts/components/Preferences.stories.tsx b/ts/components/Preferences.stories.tsx
index 33586e3872..cf867683ac 100644
--- a/ts/components/Preferences.stories.tsx
+++ b/ts/components/Preferences.stories.tsx
@@ -581,6 +581,47 @@ DonationsDonateFlow.args = {
showToast: action('showToast'),
}),
};
+export const DonationReceipts = Template.bind({});
+DonationReceipts.args = {
+ donationsFeatureEnabled: true,
+ page: SettingsPage.DonationsDonateFlow,
+ renderDonationsPane: ({
+ contentsRef,
+ }: {
+ contentsRef: MutableRefObject;
+ page: SettingsPage;
+ setPage: (page: SettingsPage) => void;
+ }) =>
+ renderDonationsPane({
+ contentsRef,
+ me,
+ donationReceipts: [
+ {
+ id: '9f9288a1-acb6-4d2e-a4fe-0a736a318a26',
+ currencyType: 'usd',
+ paymentAmount: 1000,
+ timestamp: 1754000413436,
+ },
+ {
+ id: '22defee0-8797-4a49-bac8-1673232706fa',
+ currencyType: 'jpy',
+ paymentAmount: 1000,
+ timestamp: 1753995255509,
+ },
+ ],
+ page: SettingsPage.DonationsReceiptList,
+ setPage: action('setPage'),
+ saveAttachmentToDisk: async () => {
+ action('saveAttachmentToDisk')();
+ return { fullPath: '/mock/path/to/file.png', name: 'file.png' };
+ },
+ generateDonationReceiptBlob: async () => {
+ action('generateDonationReceiptBlob')();
+ return new Blob();
+ },
+ showToast: action('showToast'),
+ }),
+};
export const Internal = Template.bind({});
Internal.args = {
page: SettingsPage.Internal,