Add payment method icons to storefront navbar and cart.

Show BTC/XMR icons beside exchange rates and pay buttons.

backend/src/consts/paymentMethodIconUrl.ts

@@ -0,0 +1,6 @@
+import { PaymentMethod } from '../modules/payment/types/PaymentMethod';
+
+export const paymentMethodIconUrl: Record<PaymentMethod, string> = {
+    [PaymentMethod.Xmr]: '/shop/assets/img/xmr.png',
+    [PaymentMethod.Btc]: '/shop/assets/img/btc.png'
+};

backend/src/modules/storefrontCart/controllers/StorefrontCartController.ts

@@ -4,6 +4,7 @@ import { Throttle } from '@nestjs/throttler';
 import type { Request, Response } from 'express';
 import { throttleProfiles } from '../../../config/throttleProfiles';
 import type { Config } from '../../../types/Config';
+import { paymentMethodIconUrl } from '../../../consts/paymentMethodIconUrl';
 import { paymentMethodLabel } from '../../../consts/paymentMethodLabel';
 import { StorefrontExceptionFilter } from '../../storefrontCore/filters/StorefrontExceptionFilter';
 import { StorefrontCartCookieService } from '../../storefrontCore/services/StorefrontCartCookieService';
@@ -70,7 +71,8 @@ export class StorefrontCartController {
 
         const paymentMethods = enabledPaymentMethods.map(paymentMethod => ({
             paymentMethod,
-            paymentMethodLabel: paymentMethodLabel[paymentMethod]
+            paymentMethodLabel: paymentMethodLabel[paymentMethod],
+            iconUrl: paymentMethodIconUrl[paymentMethod]
         }));
 
         return res.render('cart-summary', {

backend/src/modules/storefrontCore/public/css/storefront.css

@@ -355,9 +355,31 @@ a:hover {
     gap: var(--sf-space-1);
 }
 
+.sf-rates {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--sf-space-3);
+    align-items: center;
+}
+
 .sf-rate {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--sf-space-1);
     font-size: 0.95rem;
     color: var(--sf-text-muted);
+    white-space: nowrap;
+}
+
+.sf-crypto-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+    object-fit: contain;
+    flex-shrink: 0;
+}
+
+.sf-btn--pay {
+    gap: var(--sf-space-2);
 }
 
 .sf-category-nav {

backend/src/modules/storefrontCore/services/StorefrontShopViewService.spec.ts

@@ -145,8 +145,8 @@ describe('StorefrontShopViewService', () => {
             feedback: { type: 'success', text: 'Added to cart' },
             shopFiatCurrency: 'USD',
             cryptoRates: [
-                { cryptoCurrency: 'XMR', fiatPerCrypto: 200 },
+                { paymentLabel: 'XMR', fiatPerCrypto: 200, iconUrl: '/shop/assets/img/xmr.png' },
-                { cryptoCurrency: 'BTC', fiatPerCrypto: 80_000 }
+                { paymentLabel: 'BTC', fiatPerCrypto: 80_000, iconUrl: '/shop/assets/img/btc.png' }
             ],
             logoUrl: '/uploads/logo.png',
             faviconUrl: '/uploads/favicon.ico',

backend/src/modules/storefrontCore/services/StorefrontShopViewService.ts

@@ -8,6 +8,7 @@ import { formatShortOrderId } from '../../../utils/order/formatShortOrderId';
 import { toAbsoluteUrl } from '../../../utils/toAbsoluteUrl';
 import { ShopSettingsService } from '../../shopSettings/services/ShopSettingsService';
 import { ExchangeRateService } from '../../exchangeRate/services/ExchangeRateService';
+import { paymentMethodIconUrl } from '../../../consts/paymentMethodIconUrl';
 import { paymentMethodLabel } from '../../../consts/paymentMethodLabel';
 import { PaymentMethod } from '../../payment/types/PaymentMethod';
 import type { AuthorizedOrderNavItem } from '../types/AuthorizedOrderNavItem';
@@ -145,8 +146,9 @@ export class StorefrontShopViewService {
 
             return [
                 {
-                    cryptoCurrency: paymentMethodLabel[paymentMethod],
+                    paymentLabel: paymentMethodLabel[paymentMethod],
-                    fiatPerCrypto
+                    fiatPerCrypto,
+                    iconUrl: paymentMethodIconUrl[paymentMethod]
                 }
             ];
         });

backend/src/modules/storefrontCore/types/StorefrontCryptoRate.ts

@@ -1,4 +1,5 @@
 export type StorefrontCryptoRate = {
-    cryptoCurrency: string;
+    paymentLabel: string;
     fiatPerCrypto: number;
+    iconUrl: string;
 };

backend/src/modules/storefrontCore/views/partials/cart-totals-panel.hbs

@@ -80,9 +80,16 @@
                             type='submit'
                             name='paymentMethod'
                             value='{{paymentMethod}}'
-                            class='sf-btn sf-btn--primary'
+                            class='sf-btn sf-btn--primary sf-btn--pay'
                         >
                             Pay with {{paymentMethodLabel}}
+                            {{> storefront-image
+                                class='sf-crypto-icon'
+                                src=iconUrl
+                                alt=''
+                                width='20'
+                                height='20'
+                            }}
                         </button>
                     {{/each}}
                 </div>

backend/src/modules/storefrontCore/views/partials/shop-nav.hbs

@@ -32,7 +32,16 @@
         {{#if cryptoRates.length}}
             <div class='sf-rates'>
                 {{#each cryptoRates}}
-                    <div class='sf-rate'>1 {{cryptoCurrency}} = {{fiatPerCrypto}} {{../shopFiatCurrency}}</div>
+                    <span class='sf-rate'>
+                        {{> storefront-image
+                            class='sf-crypto-icon'
+                            src=iconUrl
+                            alt=paymentLabel
+                            width='20'
+                            height='20'
+                        }}
+                        <span>{{fiatPerCrypto}} {{../shopFiatCurrency}}</span>
+                    </span>
                 {{/each}}
             </div>
         {{/if}}