diff --git a/backend/src/consts/paymentMethodIconUrl.ts b/backend/src/consts/paymentMethodIconUrl.ts new file mode 100644 index 0000000..1128fe1 --- /dev/null +++ b/backend/src/consts/paymentMethodIconUrl.ts @@ -0,0 +1,6 @@ +import { PaymentMethod } from '../modules/payment/types/PaymentMethod'; + +export const paymentMethodIconUrl: Record = { + [PaymentMethod.Xmr]: '/shop/assets/img/xmr.png', + [PaymentMethod.Btc]: '/shop/assets/img/btc.png' +}; diff --git a/backend/src/modules/storefrontCart/controllers/StorefrontCartController.ts b/backend/src/modules/storefrontCart/controllers/StorefrontCartController.ts index 7628aee..e1d79ad 100644 --- a/backend/src/modules/storefrontCart/controllers/StorefrontCartController.ts +++ b/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', { diff --git a/backend/src/modules/storefrontCore/public/css/storefront.css b/backend/src/modules/storefrontCore/public/css/storefront.css index afa33dd..730e251 100644 --- a/backend/src/modules/storefrontCore/public/css/storefront.css +++ b/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 { diff --git a/backend/src/modules/storefrontCore/public/img/btc.png b/backend/src/modules/storefrontCore/public/img/btc.png new file mode 100644 index 0000000..4e2d591 Binary files /dev/null and b/backend/src/modules/storefrontCore/public/img/btc.png differ diff --git a/backend/src/modules/storefrontCore/public/img/xmr.png b/backend/src/modules/storefrontCore/public/img/xmr.png new file mode 100644 index 0000000..95baa7b Binary files /dev/null and b/backend/src/modules/storefrontCore/public/img/xmr.png differ diff --git a/backend/src/modules/storefrontCore/services/StorefrontShopViewService.spec.ts b/backend/src/modules/storefrontCore/services/StorefrontShopViewService.spec.ts index cc90992..52ecc67 100644 --- a/backend/src/modules/storefrontCore/services/StorefrontShopViewService.spec.ts +++ b/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 }, - { cryptoCurrency: 'BTC', fiatPerCrypto: 80_000 } + { paymentLabel: 'XMR', fiatPerCrypto: 200, iconUrl: '/shop/assets/img/xmr.png' }, + { paymentLabel: 'BTC', fiatPerCrypto: 80_000, iconUrl: '/shop/assets/img/btc.png' } ], logoUrl: '/uploads/logo.png', faviconUrl: '/uploads/favicon.ico', diff --git a/backend/src/modules/storefrontCore/services/StorefrontShopViewService.ts b/backend/src/modules/storefrontCore/services/StorefrontShopViewService.ts index 2431836..08f5d62 100644 --- a/backend/src/modules/storefrontCore/services/StorefrontShopViewService.ts +++ b/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], - fiatPerCrypto + paymentLabel: paymentMethodLabel[paymentMethod], + fiatPerCrypto, + iconUrl: paymentMethodIconUrl[paymentMethod] } ]; }); diff --git a/backend/src/modules/storefrontCore/types/StorefrontCryptoRate.ts b/backend/src/modules/storefrontCore/types/StorefrontCryptoRate.ts index 769e126..a39ab79 100644 --- a/backend/src/modules/storefrontCore/types/StorefrontCryptoRate.ts +++ b/backend/src/modules/storefrontCore/types/StorefrontCryptoRate.ts @@ -1,4 +1,5 @@ export type StorefrontCryptoRate = { - cryptoCurrency: string; + paymentLabel: string; fiatPerCrypto: number; + iconUrl: string; }; diff --git a/backend/src/modules/storefrontCore/views/partials/cart-totals-panel.hbs b/backend/src/modules/storefrontCore/views/partials/cart-totals-panel.hbs index 19ca943..bf1519e 100644 --- a/backend/src/modules/storefrontCore/views/partials/cart-totals-panel.hbs +++ b/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' + }} {{/each}} diff --git a/backend/src/modules/storefrontCore/views/partials/shop-nav.hbs b/backend/src/modules/storefrontCore/views/partials/shop-nav.hbs index 90203c7..b5cedcc 100644 --- a/backend/src/modules/storefrontCore/views/partials/shop-nav.hbs +++ b/backend/src/modules/storefrontCore/views/partials/shop-nav.hbs @@ -32,7 +32,16 @@ {{#if cryptoRates.length}}
{{#each cryptoRates}} -
1 {{cryptoCurrency}} = {{fiatPerCrypto}} {{../shopFiatCurrency}}
+ + {{> storefront-image + class='sf-crypto-icon' + src=iconUrl + alt=paymentLabel + width='20' + height='20' + }} + {{fiatPerCrypto}} {{../shopFiatCurrency}} + {{/each}}
{{/if}}