@graphcommerce/magento-cart 3.0.8 → 3.0.9

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.
 
+## [3.0.9](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart@3.0.8...@graphcommerce/magento-cart@3.0.9) (2021-09-30)
+
+
+### Bug Fixes
+
+* dependency cycle issues causes release version issues ([f9d82e3](https://github.com/ho-nl/m2-pwa/commit/f9d82e3bf152acaf90f9d5328bc3d020ca1c53d8))
+
+
+
+
+
 ## [3.0.5](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart@3.0.4...@graphcommerce/magento-cart@3.0.5) (2021-09-28)
 
 

package/components/CartAddress/CartAddress.graphql

@@ -0,0 +1,19 @@
+fragment CartAddress on CartAddressInterface {
+  __typename
+  firstname
+  lastname
+  city
+  company
+  country {
+    code
+    label
+  }
+  postcode
+  region {
+    code
+    label
+    region_id
+  }
+  street
+  telephone
+}

package/components/CartAddressMultiLine/index.tsx

@@ -0,0 +1,17 @@
+import { CountryCodeEnum } from '@graphcommerce/graphql'
+import { AddressMultiLine } from '@graphcommerce/magento-customer'
+import React from 'react'
+import { CartAddressFragment } from '../CartAddress/CartAddress.gql'
+
+export type CartAddressMultiLineProps = Partial<CartAddressFragment>
+
+export default function CartAddressMultiLine(props: CartAddressMultiLineProps) {
+  const { country, region, ...addressProps } = props
+  return (
+    <AddressMultiLine
+      {...addressProps}
+      country_code={country?.code as CountryCodeEnum}
+      region={{ region_code: region?.code, region_id: region?.region_id, region: region?.label }}
+    />
+  )
+}

package/components/CartAddressSingleLine/index.tsx

@@ -0,0 +1,11 @@
+import { CountryCodeEnum } from '@graphcommerce/graphql'
+import { AddressSingleLine } from '@graphcommerce/magento-customer'
+import React from 'react'
+import { CartAddressFragment } from '../CartAddress/CartAddress.gql'
+
+export type CartAddressSingleLineProps = CartAddressFragment & { locale?: CountryCodeEnum }
+
+export default function CartAddressSingleLine(props: CartAddressSingleLineProps) {
+  const { locale } = props
+  return <AddressSingleLine {...props} country_code={locale} />
+}

package/components/CartSummary/index.tsx

@@ -1,9 +1,9 @@
-import { CartAddressMultiLine } from '@graphcommerce/magento-cart-address'
 import { SectionContainer, UseStyles } from '@graphcommerce/next-ui'
 import { Link, makeStyles, Theme, Typography } from '@material-ui/core'
 import PageLink from 'next/link'
 import React from 'react'
 import { useCartQuery } from '../../hooks'
+import CartAddressMultiLine from '../CartAddressMultiLine'
 import { GetCartSummaryDocument } from './GetCartSummary.gql'
 
 const useStyles = makeStyles(

package/components/InlineAccount/InlineAccount.graphql

@@ -0,0 +1,10 @@
+query InlineAccount($cartId: String!) {
+  cart(cart_id: $cartId) {
+    __typename
+    id
+    shipping_addresses {
+      ...CartAddress
+    }
+    email
+  }
+}

package/components/InlineAccount/index.tsx

@@ -0,0 +1,152 @@
+import { useQuery } from '@apollo/client'
+import { SignUpFormInline } from '@graphcommerce/magento-customer'
+import {
+  CustomerTokenDocument,
+  IsEmailAvailableDocument,
+} from '@graphcommerce/magento-customer/hooks'
+import Button from '@graphcommerce/next-ui/Button'
+import FormRow from '@graphcommerce/next-ui/Form/FormRow'
+import { UseStyles } from '@graphcommerce/next-ui/Styles'
+import { makeStyles, TextField, Theme, Typography } from '@material-ui/core'
+import React, { useState } from 'react'
+import { useCartQuery } from '../../hooks/useCartQuery'
+import { InlineAccountDocument } from './InlineAccount.gql'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    root: {
+      borderRadius: 4,
+      border: `1px solid ${theme.palette.divider}`,
+      padding: theme.spacings.md,
+    },
+    innerContainer: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+      gap: 32,
+      [theme.breakpoints.up('sm')]: {
+        alignItems: 'flex-end',
+        flexDirection: 'unset',
+        gap: 0,
+      },
+    },
+    form: {
+      marginTop: theme.spacings.sm,
+    },
+    button: {
+      minWidth: 160,
+    },
+    title: {
+      paddingBottom: 8,
+    },
+  }),
+  { name: 'InlineAccount' },
+)
+
+export type InlineAccountProps = {
+  title?: React.ReactNode
+  description?: React.ReactNode
+  accountHref: string
+} & UseStyles<typeof useStyles>
+
+export default function InlineAccount(props: InlineAccountProps) {
+  const { title, description, accountHref } = props
+  const classes = useStyles(props)
+
+  const [toggled, setToggled] = useState<boolean>(false)
+
+  const { loading, data } = useCartQuery(InlineAccountDocument)
+  const cart = data?.cart
+
+  const { data: customerTokenData } = useQuery(CustomerTokenDocument)
+  const { data: isEmailAvailableData } = useQuery(IsEmailAvailableDocument, {
+    variables: {
+      email: cart?.email ?? '',
+    },
+  })
+
+  const { firstname, lastname } = cart?.shipping_addresses?.[0] ?? {}
+  const signedIn = Boolean(
+    customerTokenData?.customerToken && customerTokenData?.customerToken.valid,
+  )
+  const canSignUp = isEmailAvailableData?.isEmailAvailable?.is_email_available === true
+
+  if (!canSignUp) return <></>
+
+  return (
+    <div>
+      <div key='signupaccount' className={classes.root}>
+        {!signedIn && canSignUp && (
+          <>
+            <div className={classes.innerContainer}>
+              <div>
+                <Typography variant='h4' className={classes.title}>
+                  {title ?? 'No account yet?'}
+                </Typography>
+                {description ?? 'You can track your order status and much more!'}
+              </div>
+              <div>
+                {!toggled && (
+                  <Button
+                    variant='pill'
+                    color='secondary'
+                    text='bold'
+                    loading={loading}
+                    onClick={() => setToggled(!toggled)}
+                    className={classes.button}
+                  >
+                    Create an account
+                  </Button>
+                )}
+              </div>
+            </div>
+            {cart?.email && toggled && (
+              <div className={classes.form}>
+                <FormRow>
+                  <TextField
+                    variant='outlined'
+                    type='email'
+                    label='Email'
+                    value={cart?.email}
+                    InputProps={{
+                      readOnly: true,
+                    }}
+                  />
+                </FormRow>
+                <SignUpFormInline
+                  firstname={firstname ?? ''}
+                  lastname={lastname}
+                  email={cart?.email}
+                  onSubmitted={() => setToggled(false)}
+                />
+              </div>
+            )}
+          </>
+        )}
+
+        {signedIn && (
+          <div className={classes.innerContainer}>
+            <div>
+              <Typography variant='h4' className={classes.title}>
+                {title ?? 'Have an account?'}
+              </Typography>
+              {description ?? 'You can find your order history in your account!'}
+            </div>
+            <div>
+              <Button
+                variant='pill'
+                color='secondary'
+                text='bold'
+                href={accountHref}
+                className={classes.button}
+              >
+                My account
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/components/index.ts

@@ -9,8 +9,8 @@ export { default as CartTotals } from './CartTotals/CartTotals'
 
 export { default as EmptyCart } from './EmptyCart/EmptyCart'
 
-export { default as ApolloCartErrorAlert } from './ApolloCartError/ApolloCartErrorAlert'
 export * from './ApolloCartError/ApolloCartErrorAlert'
+export { default as ApolloCartErrorAlert } from './ApolloCartError/ApolloCartErrorAlert'
 
 // export { default as ApolloCartErrorFullPage } from './ApolloCartError/ApolloCartErrorFullPage'
 // export * from './ApolloCartError/ApolloCartErrorFullPage'
@@ -19,3 +19,12 @@ export * from './CartSummary'
 export { default as CartSummary } from './CartSummary'
 
 export { default as CartItemSummary } from './CartItemSummary'
+
+export * from './InlineAccount'
+export { default as InlineAccount } from './InlineAccount'
+
+export * from './CartAddressMultiLine'
+export { default as CartAddressMultiLine } from './CartAddressMultiLine'
+
+export * from './CartAddressSingleLine'
+export { default as CartAddressSingleLine } from './CartAddressSingleLine'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/magento-cart",
-  "version": "3.0.8",
+  "version": "3.0.9",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "browserslist": [
@@ -24,8 +24,7 @@
     "@graphcommerce/framer-scroller": "^0.2.5",
     "@graphcommerce/graphql": "^2.103.4",
     "@graphcommerce/image": "^2.104.5",
-    "@graphcommerce/magento-cart-address": "^2.103.8",
-    "@graphcommerce/magento-customer": "^3.0.8",
+    "@graphcommerce/magento-customer": "^3.0.9",
     "@graphcommerce/magento-graphql": "^2.103.4",
     "@graphcommerce/magento-store": "^3.0.7",
     "@graphcommerce/next-ui": "^3.0.6",
@@ -39,5 +38,5 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
-  "gitHead": "5045f247ba0d84c53b16a1cc924677cfcd53b4b7"
+  "gitHead": "1cd56a50b55493aff392a0f08830754e9fdc7295"
 }