Merge pull request #813 from commercelayer/improve-resource-payment-m…

…ethods Add new props to better control UI in `ResourcePaymentMethod`
commercelayer · Oct 25, 2024 · 526d2bd · 526d2bd
2 parents dbb43a0 + 5af3eea
commit 526d2bd
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 7 deletions.
diff --git a/packages/app-elements/src/ui/resources/ResourcePaymentMethod.test.tsx b/packages/app-elements/src/ui/resources/ResourcePaymentMethod.test.tsx
@@ -13,14 +13,30 @@ describe('ResourcePaymentMethod', () => {
     expect(getByText('Adyen Payment')).toBeVisible()
   })
 
-  it('should show the expandable show more button', async () => {
+  it('should not show expandable content if payment_source is available but `showPaymentResponse` is falsy', async () => {
     const { getByText, queryByText } = render(
       <ResourcePaymentMethod resource={orderWithPaymentSourceResponse} />
     )
     expect(getByText('Adyen Payment')).toBeVisible()
     expect(getByText('Amex credit card')).toBeVisible()
     expect(getByText('··4242')).toBeVisible()
 
+    // expandable content is not enabled
+    expect(queryByText('Show more')).not.toBeInTheDocument()
+    expect(queryByText('Show less')).not.toBeInTheDocument()
+  })
+
+  it('should show the expandable content (payment_source) when `showPaymentResponse` is set', async () => {
+    const { getByText, queryByText } = render(
+      <ResourcePaymentMethod
+        resource={orderWithPaymentSourceResponse}
+        showPaymentResponse
+      />
+    )
+    expect(getByText('Adyen Payment')).toBeVisible()
+    expect(getByText('Amex credit card')).toBeVisible()
+    expect(getByText('··4242')).toBeVisible()
+
     // expandable content is enabled
     expect(getByText('Show more')).toBeVisible()
 

diff --git a/packages/app-elements/src/ui/resources/ResourcePaymentMethod.tsx b/packages/app-elements/src/ui/resources/ResourcePaymentMethod.tsx
@@ -6,6 +6,7 @@ import {
   type Order,
   type PaymentMethod
 } from '@commercelayer/sdk'
+import cn from 'classnames'
 import { useState, type FC } from 'react'
 import type { SetNonNullable, SetRequired } from 'type-fest'
 import { z } from 'zod'
@@ -24,13 +25,23 @@ export interface ResourcePaymentMethodProps {
         SetNonNullable<CustomerPaymentSource, 'payment_source'>,
         'payment_source'
       >
+  /**
+   * When true and if `payment_source.payment_response` is present, enables the expandable content to show more details on the transaction.
+   */
+  showPaymentResponse?: boolean
+  /**
+   * Defines the style of the component. Default is `boxed`, with a light gray background and rounded corners.
+   */
+  variant?: 'plain' | 'boxed'
 }
 
 /**
  * Show info about the payment method from the given Order or CustomerPaymentSource.
  */
 export const ResourcePaymentMethod: FC<ResourcePaymentMethodProps> = ({
-  resource
+  resource,
+  showPaymentResponse = false,
+  variant = 'boxed'
 }) => {
   const [showMore, setShowMore] = useState(false)
   const paymentInstrument = paymentInstrumentType.safeParse(
@@ -60,7 +71,11 @@ export const ResourcePaymentMethod: FC<ResourcePaymentMethodProps> = ({
   }
 
   return (
-    <div className='bg-gray-50 px-4 rounded'>
+    <div
+      className={cn({
+        'bg-gray-50 rounded px-4': variant === 'boxed'
+      })}
+    >
       <div className='flex gap-4 py-4'>
         <img src={avatarSrc} alt={paymentMethodName} className='h-8' />
         <div className='flex gap-4 items-center justify-between w-full'>
@@ -89,22 +104,23 @@ export const ResourcePaymentMethod: FC<ResourcePaymentMethodProps> = ({
               {paymentMethodName}
             </Text>
           )}
-          {paymentResponse != null && (
+          {paymentResponse != null && showPaymentResponse && (
             <Button
               onClick={() => {
                 setShowMore(!showMore)
               }}
               variant='link'
               size='mini'
               className='text-sm font-bold'
+              type='button'
             >
               {showMore ? 'Show less' : 'Show more'}
             </Button>
           )}
         </div>
       </div>
 
-      {showMore && paymentResponse != null ? (
+      {showMore && paymentResponse != null && showPaymentResponse ? (
         <div className='flex gap-4 pt-4 pb-2 overflow-hidden border-t border-dashed border-gray-200'>
           <img
             src={avatarSrc}

diff --git a/packages/docs/src/stories/resources/ResourcePaymentMethod.stories.tsx b/packages/docs/src/stories/resources/ResourcePaymentMethod.stories.tsx
@@ -32,11 +32,13 @@ Default.args = {
 }
 
 /**
- * If the order includes the `payment_source` the component will show more details (expandable) on the transaction.
+ * The component can show more details on the transaction (`payment_source.payment_response`) by enabling `showPaymentResponse` prop.
+ * If the `payment_response` is not available, the show more button will not be present.
  */
 export const WithOrder = Template.bind({})
 WithOrder.args = {
-  resource: orderWithPaymentSourceResponse
+  resource: orderWithPaymentSourceResponse,
+  showPaymentResponse: true
 }
 
 /**
@@ -46,3 +48,12 @@ export const WithCustomerPaymentSource = Template.bind({})
 WithCustomerPaymentSource.args = {
   resource: customerPaymentSource
 }
+
+/**
+ * When used in lists or other components, boxed style can be removed using `variant: plain`.
+ */
+export const WithoutSideGap = Template.bind({})
+WithoutSideGap.args = {
+  resource: customerPaymentSource,
+  variant: 'plain'
+}