@graphcommerce/magento-cart-payment-method 2.105.11 → 2.106.3

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.106.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-payment-method@2.105.11...@graphcommerce/magento-cart-payment-method@2.106.0) (2021-10-04)
+
+
+### Features
+
+* sort payment methods by availability ([52f5d45](https://github.com/ho-nl/m2-pwa/commit/52f5d450a7a2fdec0c7eea9cd5d48336cb304138))
+
+
+
+
+
 ## [2.105.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-payment-method@2.105.0...@graphcommerce/magento-cart-payment-method@2.105.1) (2021-09-27)
 
 **Note:** Version bump only for package @graphcommerce/magento-cart-payment-method

package/{PaymentMethodToggle/PaymentMethodToggle.tsx → PaymentMethodToggles/PaymentMethodToggles.tsx}

@@ -13,17 +13,16 @@ import { FormControl, makeStyles, Theme } from '@material-ui/core'
 import clsx from 'clsx'
 import { m } from 'framer-motion'
 import React, { useEffect } from 'react'
-import { PaymentMethod, PaymentToggleProps } from '../Api/PaymentMethod'
 import { usePaymentMethodContext } from '../PaymentMethodContext/PaymentMethodContext'
 
-export type PaymentMethodToggleProps = Record<string, unknown>
+export type PaymentMethodTogglesProps = Record<string, unknown>
 
-function Content(props: PaymentMethod) {
-  const { code } = props
-  const { modules } = usePaymentMethodContext()
-  const Component = modules[code]?.PaymentToggle ?? ((p: PaymentToggleProps) => <>{p.title}</>)
-  return <Component {...props} />
-}
+// function Content(props: PaymentMethod) {
+//   const { code } = props
+//   const { modules } = usePaymentMethodContext()
+//   const Component = modules[code]?.PaymentToggle ?? ((p: PaymentToggleProps) => <>{p.title}</>)
+//   return <Component {...props} />
+// }
 
 const useStyles = makeStyles(
   (theme: Theme) => ({
@@ -98,10 +97,10 @@ const useStyles = makeStyles(
       right: 0,
     },
   }),
-  { name: 'PaymentMethodToggle' },
+  { name: 'PaymentMethodToggles' },
 )
 
-export default function PaymentMethodToggle(props: PaymentMethodToggleProps) {
+export default function PaymentMethodToggles(props: PaymentMethodTogglesProps) {
   const { methods, selectedMethod, setSelectedMethod, setSelectedModule, modules } =
     usePaymentMethodContext()
 
@@ -133,6 +132,10 @@ export default function PaymentMethodToggle(props: PaymentMethodToggleProps) {
 
   if (!methods || methods.length < 1) return <></>
 
+  const sortedMethods = [...methods].sort((a, b) =>
+    !modules?.[a?.code] ? 0 : !modules?.[b?.code] ? -1 : 1,
+  )
+
   return (
     <Form onSubmit={submitHandler} noValidate classes={{ root: classes.formRoot }}>
       <input type='hidden' {...register('code', { required: true })} required />
@@ -157,7 +160,7 @@ export default function PaymentMethodToggle(props: PaymentMethodToggleProps) {
               rules={{ required: 'Please select a payment method' }}
               render={({ field: { onChange, value, name, ref, onBlur } }) => (
                 <Scroller className={classes.scrollerRoot} hideScrollbar>
-                  {methods?.map((pm) => {
+                  {sortedMethods?.map((pm) => {
                     const buttonValue = `${pm.code}___${pm.child}`
 
                     return (

package/index.ts

@@ -14,5 +14,5 @@ export { default as PaymentMethodOptionsNoop } from './PaymentMethodOptionsNoop/
 export { default as PaymentMethodPlaceOrder } from './PaymentMethodPlaceOrder/PaymentMethodPlaceOrder'
 export { default as PaymentMethodPlaceOrderNoop } from './PaymentMethodPlaceOrderNoop/PaymentMethodPlaceOrderNoop'
 
-export * from './PaymentMethodToggle/PaymentMethodToggle'
-export { default as PaymentMethodToggle } from './PaymentMethodToggle/PaymentMethodToggle'
+export * from './PaymentMethodToggles/PaymentMethodToggles'
+export { default as PaymentMethodToggle } from './PaymentMethodToggles/PaymentMethodToggles'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/magento-cart-payment-method",
-  "version": "2.105.11",
+  "version": "2.106.3",
   "sideEffects": false,
   "engines": {
     "node": "14.x"
@@ -17,19 +17,20 @@
   },
   "devDependencies": {
     "@graphcommerce/browserslist-config-pwa": "^3.0.1",
-    "@graphcommerce/eslint-config-pwa": "^3.0.4",
+    "@graphcommerce/eslint-config-pwa": "^3.0.5",
     "@graphcommerce/prettier-config-pwa": "^3.0.2",
     "@graphcommerce/typescript-config-pwa": "^3.1.0",
     "@playwright/test": "^1.15.0"
   },
   "dependencies": {
-    "@apollo/client": "^3.3.21",
-    "@graphcommerce/graphql": "^2.103.4",
-    "@graphcommerce/image": "^2.104.5",
-    "@graphcommerce/magento-cart": "^3.0.12",
-    "@graphcommerce/magento-store": "^3.0.10",
-    "@graphcommerce/next-ui": "^3.1.2",
-    "@graphcommerce/react-hook-form": "^2.102.4",
+    "@apollo/client": "^3.4.16",
+    "@graphcommerce/framer-scroller": "^0.2.6",
+    "@graphcommerce/graphql": "^2.103.5",
+    "@graphcommerce/image": "^2.104.6",
+    "@graphcommerce/magento-cart": "^3.1.2",
+    "@graphcommerce/magento-store": "^3.0.13",
+    "@graphcommerce/next-ui": "^3.1.5",
+    "@graphcommerce/react-hook-form": "^2.102.5",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@material-ui/core": "^4.12.3",
     "@material-ui/lab": "^4.0.0-alpha.60",
@@ -40,5 +41,5 @@
     "react-dom": "^17.0.1",
     "type-fest": "^2.3.4"
   },
-  "gitHead": "e39e67558e99e266d7a5944da44762c7ad444a6a"
+  "gitHead": "f1d0e488921787f39a260c410790ec13d32c8143"
 }