fix: Show payment method amount correctly

commercelayer · Dec 2, 2021 · b3e5048 · b3e5048
1 parent e92e6c4
commit b3e5048
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 49 deletions.
diff --git a/pages/checkout/index.tsx b/pages/checkout/index.tsx
@@ -22,7 +22,6 @@ import {
   LineItemName,
   LineItemQuantity,
   LineItemAmount,
-  LineItemRemoveLink,
   SubTotalAmount,
   LineItemsCount,
   TotalAmount,
@@ -53,6 +52,7 @@ import {
   PlaceOrderButton,
   PlaceOrderContainer,
   PrivacyAndTermsCheckbox,
+  PaymentMethodAmount,
 } from '@commercelayer/react-components'
 import { useRouter } from 'next/router'
 
@@ -781,6 +781,30 @@ export default function Main() {
                       </StockTransfer>
                     </div>
                   </LineItem>
+                  <LineItem type="bundles">
+                    <div className="flex justify-between items-center border-b p-5">
+                      <LineItemImage className="p-2" width={80} />
+                      <LineItemName data-cy="line-item-name" className="p-2" />
+                      <LineItemQuantity
+                        readonly
+                        data-cy="line-item-quantity"
+                        max={100}
+                        className="p-2"
+                      />
+                    </div>
+                    <div>
+                      <StockTransfer>
+                        <div className="flex flex-row" data-cy="stock-transfer">
+                          <StockTransferField
+                            className="px-1"
+                            type="quantity"
+                          />{' '}
+                          of <LineItemQuantity readonly className="px-1" />
+                          items will undergo a transfer
+                        </div>
+                      </StockTransfer>
+                    </div>
+                  </LineItem>
                 </LineItemsContainer>
                 <ShippingMethod>
                   <div className="flex justify-around w-2/3 items-center p-5">
@@ -932,11 +956,6 @@ export default function Main() {
                   <div className="flex justify-around items-center border-b p-5">
                     <LineItemImage className="p-2" width={80} />
                     <LineItemName data-test="line-item-name" className="p-2" />
-                    <LineItemQuantity
-                      data-test="line-item-quantity"
-                      max={100}
-                      className="p-2"
-                    />
                     <Errors
                       className="text-red-700 p-2"
                       resource="line_items"
@@ -946,68 +965,36 @@ export default function Main() {
                       data-test="line-item-total"
                       className="p-2"
                     />
-                    <LineItemRemoveLink
-                      data-test="line-item-remove"
-                      className="p-2 bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
-                    />
                   </div>
                 </LineItem>
                 <LineItem type="gift_cards">
                   <div className="flex justify-between items-center border-b p-5">
                     <LineItemImage className="p-2" width={40} />
                     <LineItemName data-test="line-item-name" className="p-2" />
-                    <LineItemQuantity
-                      data-test="line-item-quantity"
-                      max={10}
-                      className="p-2"
-                      disabled
-                    />
                     <LineItemAmount
                       data-test="line-item-total"
                       className="p-2"
                     />
-                    <LineItemRemoveLink
-                      data-test="line-item-remove"
-                      className="p-2 bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
-                    />
                   </div>
                 </LineItem>
                 <LineItem type="bundles">
                   <div className="flex justify-between items-center border-b p-5">
                     <LineItemImage className="p-2" width={40} />
                     <LineItemName data-test="line-item-name" className="p-2" />
-                    <LineItemQuantity
-                      data-test="line-item-quantity"
-                      max={10}
-                      className="p-2"
-                    />
                     <LineItemAmount
                       data-test="line-item-total"
                       className="p-2"
                     />
-                    <LineItemRemoveLink
-                      data-test="line-item-remove"
-                      className="p-2 bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
-                    />
                   </div>
                 </LineItem>
                 <LineItem type="adjustments">
                   <div className="flex justify-between items-center border-b p-5">
                     <LineItemImage className="p-2" width={40} />
                     <LineItemName data-test="line-item-name" className="p-2" />
-                    <LineItemQuantity
-                      data-test="line-item-quantity"
-                      max={10}
-                      className="p-2"
-                    />
                     <LineItemAmount
                       data-test="line-item-total"
                       className="p-2"
                     />
-                    <LineItemRemoveLink
-                      data-test="line-item-remove"
-                      className="p-2 bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
-                    />
                   </div>
                 </LineItem>
               </div>
@@ -1055,6 +1042,14 @@ export default function Main() {
                   <GiftCardAmount data-test="gift-card-amount" />
                 </div>
               </div>
+              <div className=" flex items-center p-2 justify-around text-gray-600 text-left">
+                <div className="w-full">
+                  <p className="text-lg">Payment Method </p>
+                </div>
+                <div className="text-right">
+                  <PaymentMethodAmount data-test="payment-method-amount" />
+                </div>
+              </div>
               <div className=" flex items-center p-2 justify-around font-bold text-left">
                 <div className="w-full">
                   <p className="text-lg mr-2">Total </p>

diff --git a/pages/checkout/payments.tsx b/pages/checkout/payments.tsx
@@ -20,7 +20,6 @@ import {
   PlaceOrderContainer,
   PrivacyAndTermsCheckbox,
 } from '@commercelayer/react-components'
-import { Order } from '@commercelayer/js-sdk'
 import { useRouter } from 'next/router'
 import '@adyen/adyen-web/dist/adyen.css'
 
@@ -75,14 +74,14 @@ export default function Main() {
     paypalReturnUrl = window.location.href
   }
   // const [shippingMethodId, setShippingMethodId] = useState<string>('')
-  const getOrder = async () => {
-    const config = { accessToken: token, endpoint }
-    const order = await Order.withCredentials(config)
-      .includes('paymentSource')
-      .find(orderId)
-    // @ts-ignore
-    if (order.paymentSource()) setPaymentSource(order.paymentSource()?.options)
-  }
+  // const getOrder = async () => {
+  //   const config = { accessToken: token, endpoint }
+  //   const order = await Order.withCredentials(config)
+  //     .includes('paymentSource')
+  //     .find(orderId)
+  //   // @ts-ignore
+  //   if (order.paymentSource()) setPaymentSource(order.paymentSource()?.options)
+  // }
   useEffect(() => {
     const getToken = async () => {
       // @ts-ignore
@@ -100,7 +99,7 @@ export default function Main() {
       if (token) setToken(token.accessToken)
     }
     if (!token) getToken()
-    if (token) getOrder()
+    // if (token) getOrder()
   }, [token])
   return (
     <Fragment>

diff --git a/src/components/PaymentMethodAmount.tsx b/src/components/PaymentMethodAmount.tsx
@@ -8,7 +8,7 @@ const defaultProps = components.PaymentMethodAmount.defaultProps
 const displayName = components.PaymentMethodAmount.displayName
 
 const PaymentMethodAmount: FunctionComponent<BaseAmountComponent> = (props) => {
-  return <BaseOrderPrice base="amount" type="paymentMethod" {...props} />
+  return <BaseOrderPrice base="amount" type="payment_method" {...props} />
 }
 
 PaymentMethodAmount.propTypes = propTypes