@graphcommerce/magento-cart 3.8.22 → 3.8.26

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.8.25](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart@3.8.24...@graphcommerce/magento-cart@3.8.25) (2021-12-22)
+
+
+### Bug Fixes
+
+* cart fab wouldnt properly switch to darkmode ([2f4fe1e](https://github.com/ho-nl/m2-pwa/commit/2f4fe1ed28ab3b63440f40d1455f06bc02e44ce7))
+
+
+
+
+
+## [3.8.23](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart@3.8.22...@graphcommerce/magento-cart@3.8.23) (2021-12-21)
+
+
+### Bug Fixes
+
+* make sure the cart renders the correct currency ([cc43c8a](https://github.com/ho-nl/m2-pwa/commit/cc43c8acdce339a2f9c99fd7f7e79d6277c8603f))
+
+
+
+
+
 ## [3.8.22](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart@3.8.21...@graphcommerce/magento-cart@3.8.22) (2021-12-21)
 
 

package/components/CartFab/CartFab.tsx

@@ -4,12 +4,12 @@ import {
   responsiveVal,
   StyledBadge,
   SvgImageSimple,
-  useFixedFabAnimation,
+  useScrollY,
   UseStyles,
 } from '@graphcommerce/next-ui'
 import { t } from '@lingui/macro'
-import { darken, Fab, FabProps, makeStyles, NoSsr, Theme } from '@material-ui/core'
-import { m } from 'framer-motion'
+import { alpha, darken, Fab, FabProps, makeStyles, NoSsr, Theme, useTheme } from '@material-ui/core'
+import { m, useTransform } from 'framer-motion'
 import PageLink from 'next/link'
 import React from 'react'
 import { useCartQuery } from '../../hooks/useCartQuery'
@@ -19,21 +19,10 @@ import { CartTotalQuantityFragment } from './CartTotalQuantity.gql'
 const useStyles = makeStyles(
   (theme: Theme) => ({
     fab: {
-      color:
-        theme.palette.type === 'light'
-          ? theme.palette.text.primary
-          : darken(theme.palette.text.primary, 1),
-      boxShadow: 'none',
-      '&:hover, &:focus': {
-        boxShadow: 'none',
-      },
       width: responsiveVal(42, 56),
       height: responsiveVal(42, 56),
-    },
-    fabWrapper: {
-      position: 'relative',
       [theme.breakpoints.down('sm')]: {
-        backgroundColor: '#fff !important',
+        backgroundColor: `${theme.palette.background.paper} !important`,
       },
     },
     shadow: {
@@ -49,33 +38,44 @@ const useStyles = makeStyles(
       },
     },
   }),
-  {
-    name: 'CartFab',
-  },
+  { name: 'CartFab' },
 )
 
 export type CartFabProps = {
   icon?: React.ReactNode
-} & Omit<FabProps, 'children' | 'aria-label'> &
-  UseStyles<typeof useStyles>
+} & UseStyles<typeof useStyles>
 
 type CartFabContentProps = CartFabProps & CartTotalQuantityFragment
 
+const MotionFab = m(
+  React.forwardRef<any, Omit<FabProps, 'style' | 'onDrag'>>((props, ref) => (
+    <Fab {...props} ref={ref} />
+  )),
+)
+
 function CartFabContent(props: CartFabContentProps) {
   const { total_quantity, icon, ...fabProps } = props
-  const cartIcon = icon ?? <SvgImageSimple src={iconShoppingBag} loading='eager' size='large' />
-  const { opacity, backgroundColor } = useFixedFabAnimation()
   const classes = useStyles(props)
 
+  const theme = useTheme()
+  const scrollY = useScrollY()
+  const opacity = useTransform(scrollY, [50, 60], [0, 1])
+
+  const paper0 = alpha(theme.palette.background.paper, 0)
+  const paper1 = alpha(theme.palette.background.paper, 1)
+  const backgroundColor = useTransform(scrollY, [0, 10], [paper0, paper1])
+
+  const cartIcon = icon ?? <SvgImageSimple src={iconShoppingBag} loading='eager' size='large' />
   return (
-    <m.div className={classes.fabWrapper} style={{ backgroundColor, borderRadius: 'inherit' }}>
+    <>
       <PageLink href='/cart' passHref>
-        <Fab
+        <MotionFab
+          {...fabProps}
           aria-label={t`Cart`}
           color='inherit'
           size='large'
           classes={{ root: classes.fab }}
-          {...fabProps}
+          style={{ backgroundColor }}
         >
           {total_quantity > 0 ? (
             <StyledBadge color='primary' variant='dot'>
@@ -84,10 +84,10 @@ function CartFabContent(props: CartFabContentProps) {
           ) : (
             cartIcon
           )}
-        </Fab>
+        </MotionFab>
       </PageLink>
       <m.div className={classes.shadow} style={{ opacity }} />
-    </m.div>
+    </>
   )
 }
 

package/components/CartTotals/CartTotals.tsx

@@ -128,7 +128,7 @@ export default function CartTotals(props: CartTotalsProps) {
             >
               <div>{discount?.label}</div>
               <div className={classes.money}>
-                {discount?.amount && <Money {...discount} value={value} />}
+                {discount?.amount && <Money {...discount.amount} value={value} />}
               </div>
             </AnimatedRow>
           )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/magento-cart",
-  "version": "3.8.22",
+  "version": "3.8.26",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "browserslist": [
@@ -21,14 +21,14 @@
   },
   "dependencies": {
     "@apollo/client": "^3.5.6",
-    "@graphcommerce/framer-next-pages": "^2.108.8",
-    "@graphcommerce/framer-scroller": "^1.1.18",
+    "@graphcommerce/framer-next-pages": "^2.108.9",
+    "@graphcommerce/framer-scroller": "^1.1.22",
     "@graphcommerce/graphql": "^2.105.12",
     "@graphcommerce/image": "^2.105.11",
-    "@graphcommerce/magento-customer": "^3.6.25",
+    "@graphcommerce/magento-customer": "^3.6.28",
     "@graphcommerce/magento-graphql": "^2.104.12",
-    "@graphcommerce/magento-store": "^3.3.25",
-    "@graphcommerce/next-ui": "^3.21.8",
+    "@graphcommerce/magento-store": "^3.3.28",
+    "@graphcommerce/next-ui": "^3.21.12",
     "@graphcommerce/react-hook-form": "^2.104.6",
     "@lingui/macro": "^3.13.0",
     "@material-ui/core": "^4.12.3",
@@ -39,5 +39,5 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
-  "gitHead": "5ad26fe58ae85c8d776e3f571e96832f24811d5d"
+  "gitHead": "55abd5ec0f5821dc4bba8d0a82fd265ff1d6a024"
 }