Merge pull request #60 from vtex-apps/feat/payment-origin

✨ Add payment system name and payment origin on payment summary when paid with creditCard

Author: carolkrroo

CHANGELOG.md

@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+- Payment system name and payment origin on payment summary when paid with creditCard
+
 ## [1.9.1] - 2023-02-16
 
 ### Added

docs/README.md

@@ -234,6 +234,7 @@ interface Payment {
   id: string;
   paymentSystem: string;
   paymentSystemName: string;
+  paymentOrigin: string | null;
   value: number;
   lastDigits: string | null;
   group: string;

react/PaymentMethod.tsx

@@ -59,6 +59,8 @@ const PaymentMethod: FunctionComponent<Props & InjectedIntlProps> = ({
 }) => {
   const { rootPath } = useRuntime()
   const [isOpen, setIsOpen] = useState(false)
+  const hasPaymentSystemName = payment.paymentSystemName
+  const hasPaymentOrigin = !!payment.paymentOrigin
   const hasLastDigits = !!payment.lastDigits
   const isBankInvoice = payment.group === 'bankInvoice'
   const handles = useCssHandles(CSS_HANDLES)
@@ -69,8 +71,16 @@ const PaymentMethod: FunctionComponent<Props & InjectedIntlProps> = ({
         <p className={`${handles.paymentGroup} c-on-base`}>
           {paymentGroupSwitch(payment, intl)}
         </p>
-        {hasLastDigits && (
+        {hasPaymentSystemName && (
           <p className="c-muted-1 mb3">
+            {payment.paymentSystemName}
+            {hasPaymentOrigin && (
+              <span>&nbsp;({payment.paymentOrigin})</span>
+            )}
+          </p>
+        )}
+        {hasLastDigits && (
+          <p className="c-muted-1 mt0 mb3">
             {intl.formatMessage(messages.lastDigits, {
               lastDigits: payment.lastDigits,
             })}

react/typings/global.d.ts

@@ -128,6 +128,7 @@ interface Payment {
   id: string
   paymentSystem: string
   paymentSystemName: string
+  paymentOrigin: string | null
   value: number
   lastDigits: string | null
   group: string