Display payment method details in order transactions

[lkostrowski]

Summary

• Display payment method details (card brand, masked card number, expiration) in order transaction cards
• Show logos for known card brands (Visa, Mastercard) and other payment methods (PayPal, Klarna, Blik, Stripe Link)
• Display app logo in transaction event avatars
• Add Storybook stories for transaction components

Details

Extends order transaction UI to show payment method information returned by payment apps:

• Card payments: Shows brand logo (or name fallback), masked card number (first/last digits), and expiration date
• Other payment methods: Shows brand logo for known providers (PayPal, Klarna, Blik, Stripe Link) or name as text fallback
• Transaction events: App logo is now displayed in event avatars when available
• New GraphQL fragments added for CardPaymentMethodDetails and OtherPaymentMethodDetails

saleor/saleor-docs#1749

[changeset-bot]

🦋 Changeset detected

Latest commit: f6dafad

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 42.74%. Comparing base (4a45b49) to head (f6dafad).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff            @@
##             main    #6339    +/-   ##
========================================
  Coverage   42.73%   42.74%            
========================================
  Files        2509     2513     +4     
  Lines       43559    43627    +68     
  Branches     9910    10307   +397     
========================================
+ Hits        18615    18647    +32     
- Misses      24906    24942    +36     
  Partials       38       38            

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Copilot]

Pull request overview

This pull request adds GraphQL types and UI components to display payment method details in order transactions. The changes enable the dashboard to show card brand information (Visa, Mastercard) and other payment method types (PayPal, Klarna, Blik, etc.) when viewing transaction details.

Changes:

• Added GraphQL fragments for CardPaymentMethodDetails and OtherPaymentMethodDetails
• Created new React components to display card and other payment method information with brand logos
• Updated all transaction fixtures and test data to include the new createdBy and paymentMethodDetails fields
• Enhanced the EventAvatar component to display app logos when available
• Added Storybook stories demonstrating various payment method display scenarios

Reviewed changes

Copilot reviewed 15 out of 22 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
src/fragments/orders.ts	Added new GraphQL fragments for payment method details (Card and Other types)
src/graphql/hooks.generated.ts	Generated TypeScript types and hooks for the new fragments
src/orders/fixtures/TransactionFixture.ts	Updated transaction fixture to include createdBy and paymentMethodDetails fields
src/orders/fixtures.ts	Added comprehensive payment method details to all transaction fixtures
src/orders/components/OrderTransactionPayment/OrderTransactionPayment.tsx	Added null values for new fields in fake transaction
src/orders/components/OrderTransactionGiftCard/OrderTransactionGiftCard.tsx	Added null values for new fields in fake transaction
src/orders/components/OrderTransaction/components/TransactionEvents/components/PaymentMethodDetails.tsx	New component to render payment method details based on type
src/orders/components/OrderTransaction/components/TransactionEvents/components/EventAvatar.tsx	Enhanced to display app brand logos
src/orders/components/OrderTransaction/components/OtherPaymentMethod.tsx	New component to display non-card payment methods with logos
src/orders/components/OrderTransaction/components/CardTitle/CardTitle.tsx	Updated to display payment method details in transaction card title
src/orders/components/OrderTransaction/components/CardPaymentMethod.tsx	New component to display card payment details with brand logos
src/orders/components/OrderTransaction/OrderTransaction.stories.tsx	Added comprehensive Storybook stories for payment method display
src/orders/components/OrderSummary/OrderSummary.test.tsx	Updated test transaction to include new required fields
src/orders/components/OrderReturnPage/components/TransactionSubmitCard/fixtures.ts	Updated fixture to include new fields
assets/images/payment-methods/*.svg	Added brand logo SVG files for various payment methods
.changeset/itchy-queens-build.md	Added changeset documenting the new feature

[Copilot]

Pull request overview

Copilot reviewed 2 out of 882 changed files in this pull request and generated no new comments.

[github-actions]

Differences Found

✅ No packages or licenses were added.

Summary

Expand

License Name	Package Count	Packages
0BSD	1	Packages tslib
CC0-1.0	1	Packages type-fest
MIT/X11	1	Packages nub
MPL-1.1	1	Packages harmony-reflect
MPL-2.0	1	Packages dompurify
Public Domain	1	Packages jsonify
Python-2.0	1	Packages argparse
WTFPL	1	Packages utf8-byte-length
CC-BY-4.0	2	Packages @saleor/macaw-ui caniuse-lite
SEE LICENSE IN LICENSE	2	Packages posthog-js spawndamnit
BlueOak-1.0.0	7	Packages @isaacs/cliui glob jackspeak lru-cache minimatch package-json-from-dist path-scurry
<<missing>>	11	Packages @sentry/cli @sentry/cli-darwin @sentry/cli-linux-arm @sentry/cli-linux-arm64 @sentry/cli-linux-i686 @sentry/cli-linux-x64 @sentry/cli-win32-arm64 @sentry/cli-win32-i686 @sentry/cli-win32-x64 busboy streamsearch
BSD-2-Clause	23	Packages browser-process-hrtime css-select css-what domelementtype domhandler domutils dotenv dotenv-expand entities escodegen eslint-scope espree esprima esrecurse estraverse esutils nth-check regjsparser stringify-object terser And 3 more...
ISC	48	Packages @istanbuljs/load-nyc-config anymatch boolbase cli-width cliui electron-to-chromium fastq flatted foreground-child fs.realpath get-caller-file get-own-enumerable-property-symbols glob glob-parent graceful-fs inflight inherits ini isexe knip And 28 more...
BSD-3-Clause	52	Packages @protobufjs/aspromise @protobufjs/base64 @protobufjs/codegen @protobufjs/eventemitter @protobufjs/fetch @protobufjs/float @protobufjs/inquire @protobufjs/path @protobufjs/pool @protobufjs/utf8 @saleor/app-sdk @sentry/cli @sentry/cli-darwin @sentry/cli-linux-arm @sentry/cli-linux-arm64 @sentry/cli-linux-i686 @sentry/cli-linux-x64 @sentry/cli-win32-i686 @sentry/cli-win32-x64 @sinonjs/commons And 32 more...
Apache-2.0	64	Packages @editorjs/editorjs @eslint/config-array @eslint/config-helpers @eslint/core @eslint/object-schema @eslint/plugin-kit @humanfs/core @humanfs/node @humanwhocodes/module-importer @humanwhocodes/retry @opentelemetry/api @opentelemetry/api-logs @opentelemetry/core @opentelemetry/exporter-logs-otlp-http @opentelemetry/otlp-exporter-base @opentelemetry/otlp-transformer @opentelemetry/resources @opentelemetry/sdk-logs @opentelemetry/sdk-metrics @opentelemetry/sdk-trace-base And 44 more...
MIT	1305	Packages @adobe/css-tools @apollo/client @ardatan/relay-compiler @ardatan/sync-fetch @babel/code-frame @babel/compat-data @babel/core @babel/generator @babel/helper-annotate-as-pure @babel/helper-compilation-targets @babel/helper-create-class-features-plugin @babel/helper-globals @babel/helper-member-expression-to-functions @babel/helper-module-imports @babel/helper-module-transforms @babel/helper-optimise-call-expression @babel/helper-plugin-utils @babel/helper-replace-supers @babel/helper-skip-transparent-expression-wrappers @babel/helper-string-parser And 1285 more...

[Copilot]

Pull request overview

Copilot reviewed 2 out of 884 changed files in this pull request and generated 1 comment.

[Copilot]

The changeset text is a bit ambiguous/grammatically awkward: it uses singular ('Order Transaction') and 'card brand or type' is unclear. Consider updating the sentence to use 'Order Transactions' (plural) and be more specific about what’s displayed (e.g., brand/logo, masked number, expiration for cards; provider name for other methods).

Suggested change

	Order Transaction will now display payment method details, like card brand or type.
	Order Transactions will now display payment method details, such as card brand/logo, masked card number and expiration date for cards, or provider name for other payment methods.