@graphcommerce/magento-payment-tokens 9.1.0-canary.17

package/components/CustomerTokensPage/CustomerTokensPage.tsx

@@ -0,0 +1,134 @@
+import type { ApolloClient, NormalizedCacheObject } from '@graphcommerce/graphql'
+import {
+  getCustomerAccountIsDisabled,
+  useCustomerQuery,
+  WaitForCustomer,
+} from '@graphcommerce/magento-customer'
+import { PageMeta, StoreConfigDocument } from '@graphcommerce/magento-store'
+import {
+  breakpointVal,
+  filterNonNullableKeys,
+  iconCreditCard,
+  LayoutOverlayHeader,
+  LayoutTitle,
+  sxx,
+  type GetStaticProps,
+} from '@graphcommerce/next-ui'
+import { i18n } from '@lingui/core'
+import { Trans } from '@lingui/macro'
+import { Alert, Box, Container, lighten, Typography } from '@mui/material'
+import type { PaymentTokenFragment } from '../../graphql/fragments/PaymentToken.gql'
+import { CustomerPaymentTokensDocument } from '../../graphql/queries/PaymentTokens.gql'
+import { DeletePaymentTokenButton } from '../DeletePaymentTokenButton'
+
+export type CustomerTokensPageProps = Record<string, unknown>
+type CustomerTokensGetStaticProps = GetStaticProps<Record<string, unknown>, CustomerTokensPageProps>
+
+export function CustomerTokensPage() {
+  const dashboard = useCustomerQuery(CustomerPaymentTokensDocument, {
+    fetchPolicy: 'cache-and-network',
+  })
+
+  const loading = dashboard.loading && !dashboard.previousData
+
+  const paymentTokens = filterNonNullableKeys(
+    dashboard.data?.customerPaymentTokens?.items ??
+      dashboard.previousData?.customerPaymentTokens?.items,
+  )
+
+  return (
+    <>
+      <LayoutOverlayHeader>
+        <LayoutTitle size='small' component='span' icon={iconCreditCard}>
+          <Trans id='Payment information'>Payment information</Trans>
+        </LayoutTitle>
+      </LayoutOverlayHeader>
+
+      <Container maxWidth='md'>
+        <PageMeta title={i18n._('Payment information')} metaRobots={['noindex']} />
+
+        <LayoutTitle icon={iconCreditCard} sx={(theme) => ({ mb: theme.spacings.xs })}>
+          <Trans id='Stored payment methods'>Stored payment methods</Trans>
+        </LayoutTitle>
+
+        <WaitForCustomer waitFor={!loading}>
+          {!paymentTokens?.length && (
+            <Alert severity='info'>
+              <Trans id='No stored payment methods found.'>No stored payment methods found.</Trans>
+            </Alert>
+          )}
+
+          <Box sx={sxx((theme) => ({ display: 'grid', rowGap: theme.spacings.xs }))}>
+            {paymentTokens?.map((token) => (
+              <Box
+                key={token.public_hash}
+                sx={(theme) => ({
+                  px: theme.spacings.xxs,
+                  py: theme.spacings.xxs,
+                  background:
+                    theme.palette.mode === 'light'
+                      ? theme.palette.background.default
+                      : lighten(theme.palette.background.default, 0.15),
+                  ...breakpointVal(
+                    'borderRadius',
+                    theme.shape.borderRadius * 2,
+                    theme.shape.borderRadius * 3,
+                    theme.breakpoints.values,
+                  ),
+                  display: 'grid',
+                  gridTemplate: `
+                  "details delete"
+                  "type method" / 1fr auto
+                `,
+                  rowGap: 0.5,
+                  columnGap: 1,
+                })}
+              >
+                <Box sx={{ gridArea: 'details', color: 'text.secondary' }}>{token.details}</Box>
+
+                <Typography
+                  variant='subtitle1'
+                  noWrap
+                  sx={{ gridArea: 'type', overflow: 'hidden', textOverflow: 'ellipsis' }}
+                >
+                  {token.type}
+                </Typography>
+
+                {/* <Box sx={{ gridArea: 'method', color: 'text.secondary' }}>
+                  {token.payment_method_code}
+                </Box> */}
+
+                {token.details && (
+                  <Box sx={{ gridArea: 'details', color: 'text.secondary' }}>{token.details}</Box>
+                )}
+
+                <DeletePaymentTokenButton
+                  sx={{ gridArea: 'delete' }}
+                  publicHash={token.public_hash}
+                />
+              </Box>
+            ))}
+          </Box>
+        </WaitForCustomer>
+      </Container>
+    </>
+  )
+}
+
+export function createGetStaticProps(
+  client: ApolloClient<NormalizedCacheObject>,
+): CustomerTokensGetStaticProps {
+  return async (context) => {
+    if (getCustomerAccountIsDisabled(context.locale)) return { notFound: true }
+
+    const conf = client.query({ query: StoreConfigDocument })
+
+    return {
+      props: {
+        apolloState: await conf.then(() => client.cache.extract()),
+        variantMd: 'bottom',
+        up: { href: '/account', title: i18n._('Account') },
+      },
+    }
+  }
+}

package/components/DeletePaymentTokenButton.tsx

@@ -0,0 +1,28 @@
+import { ApolloErrorSnackbar, useFormGqlMutation } from '@graphcommerce/ecommerce-ui'
+import { Fab, iconBin, sxx } from '@graphcommerce/next-ui'
+import { t } from '@lingui/macro'
+import { type SxProps, type Theme } from '@mui/material'
+import { DeletePaymentTokenDocument } from '../graphql/mutations/DeletePaymentToken.gql'
+
+export function DeletePaymentTokenButton(props: { sx: SxProps<Theme>; publicHash: string }) {
+  const { sx, publicHash } = props
+
+  const { handleSubmit, formState, error } = useFormGqlMutation(DeletePaymentTokenDocument, {
+    values: { publicHash },
+  })
+
+  const submit = handleSubmit(() => {})
+
+  return (
+    <form onSubmit={submit}>
+      <Fab
+        type='submit'
+        aria-label={t`Remove`}
+        loading={formState.isSubmitting}
+        icon={iconBin}
+        sx={sxx({ boxShadow: 0 }, sx)}
+      />
+      <ApolloErrorSnackbar error={error} />
+    </form>
+  )
+}

package/components/PaymentTokensAccountMenuItem/PaymentTokensAccountMenuItem.tsx

@@ -0,0 +1,31 @@
+import {
+  AccountDashboardDocument,
+  AccountMenuItem,
+  useCustomerQuery,
+  type AccountMenuItemProps,
+} from '@graphcommerce/magento-customer'
+import { iconCreditCard } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/macro'
+import type { SetOptional } from 'type-fest'
+
+type PaymentTokensAccountMenuItemProps = SetOptional<
+  Omit<AccountMenuItemProps, 'href'>,
+  'iconSrc' | 'title'
+>
+
+export function PaymentTokensAccountMenuItem(props: PaymentTokensAccountMenuItemProps) {
+  const dashboard = useCustomerQuery(AccountDashboardDocument, { fetchPolicy: 'cache-only' })
+  const tokens = dashboard.data?.customerPaymentTokens?.items
+
+  if (!tokens || tokens.length === 0) return null
+
+  return (
+    <AccountMenuItem
+      href='/account/payment-tokens'
+      iconSrc={iconCreditCard}
+      title={<Trans id='Stored payment methods'>Stored payment methods</Trans>}
+      subtitle={<Trans id='For faster checkout'>For faster checkout</Trans>}
+      {...props}
+    />
+  )
+}

package/components/index.ts

@@ -0,0 +1,2 @@
+export * from './CustomerTokensPage/CustomerTokensPage'
+export * from './PaymentTokensAccountMenuItem/PaymentTokensAccountMenuItem'

package/copy/pages/account/payment-tokens.tsx

@@ -0,0 +1,29 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import type { PageOptions } from '@graphcommerce/framer-next-pages'
+// eslint-disable-next-line import/no-extraneous-dependencies
+import {
+  createGetStaticProps,
+  CustomerTokensPage,
+  type CustomerTokensPageProps,
+} from '@graphcommerce/magento-payment-tokens'
+import type { GetStaticProps, LayoutOverlayProps } from '@graphcommerce/next-ui'
+import { LayoutOverlay } from '@graphcommerce/next-ui'
+import { graphqlSharedClient } from '../../lib/graphql/graphqlSsrClient'
+
+type GetPageStaticProps = GetStaticProps<LayoutOverlayProps>
+
+export default function Page(props: CustomerTokensPageProps) {
+  return <CustomerTokensPage {...props} />
+}
+
+const pageOptions: PageOptions<LayoutOverlayProps> = {
+  overlayGroup: 'account',
+  Layout: LayoutOverlay,
+}
+
+Page.pageOptions = pageOptions
+
+export const getStaticProps: GetPageStaticProps = async (context) => {
+  const client = graphqlSharedClient(context)
+  return createGetStaticProps(client)(context)
+}

package/graphql/fragments/PaymentToken.graphql

@@ -0,0 +1,6 @@
+fragment PaymentToken on PaymentToken {
+  details
+  payment_method_code
+  public_hash
+  type
+}

package/graphql/inject/AccountDashboardPaymentTokens.graphql

@@ -0,0 +1,8 @@
+fragment CustomerPaymentTokensAccountDashboard on Query
+@inject(into: ["AccountDashboardQueryFragment"]) {
+  customerPaymentTokens {
+    items {
+      __typename
+    }
+  }
+}

package/graphql/mutations/DeletePaymentToken.graphql

@@ -0,0 +1,10 @@
+mutation DeletePaymentToken($publicHash: String!) {
+  deletePaymentToken(public_hash: $publicHash) {
+    customerPaymentTokens {
+      items {
+        ...PaymentToken
+      }
+    }
+    result
+  }
+}

package/graphql/queries/PaymentTokens.graphql

@@ -0,0 +1,7 @@
+query CustomerPaymentTokens {
+  customerPaymentTokens {
+    items {
+      ...PaymentToken
+    }
+  }
+}

package/index.ts

@@ -0,0 +1,5 @@
+export * from './components'
+export * from './graphql/fragments/PaymentToken.gql'
+export * from './graphql/inject/AccountDashboardPaymentTokens.gql'
+export * from './graphql/mutations/DeletePaymentToken.gql'
+export * from './graphql/queries/PaymentTokens.gql'

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@graphcommerce/magento-payment-tokens",
+  "homepage": "https://www.graphcommerce.org/",
+  "repository": "github:graphcommerce-org/graphcommerce",
+  "version": "9.1.0-canary.17",
+  "sideEffects": false,
+  "prettier": "@graphcommerce/prettier-config-pwa",
+  "eslintConfig": {
+    "extends": "@graphcommerce/eslint-config-pwa",
+    "parserOptions": {
+      "project": "./tsconfig.json"
+    }
+  },
+  "peerDependencies": {
+    "@graphcommerce/ecommerce-ui": "^9.1.0-canary.17",
+    "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.17",
+    "@graphcommerce/graphql": "^9.1.0-canary.17",
+    "@graphcommerce/image": "^9.1.0-canary.17",
+    "@graphcommerce/magento-cart": "^9.1.0-canary.17",
+    "@graphcommerce/magento-cart-payment-method": "^9.1.0-canary.17",
+    "@graphcommerce/magento-customer": "^9.1.0-canary.17",
+    "@graphcommerce/magento-store": "^9.1.0-canary.17",
+    "@graphcommerce/next-ui": "^9.1.0-canary.17",
+    "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.17",
+    "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.17",
+    "@lingui/core": "^4.2.1",
+    "@lingui/macro": "^4.2.1",
+    "@lingui/react": "^4.2.1",
+    "@mui/material": "^5.10.16",
+    "framer-motion": "^11.0.0",
+    "next": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}

package/plugins/PaymentTokensAccountMenuItem.tsx

@@ -0,0 +1,19 @@
+import type { AccountMenuItemProps } from '@graphcommerce/magento-customer'
+import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
+import { PaymentTokensAccountMenuItem } from '../components'
+
+export const config: PluginConfig = {
+  module: '@graphcommerce/magento-customer',
+  type: 'component',
+}
+
+export function AccountMenuItem(props: PluginProps<AccountMenuItemProps>) {
+  const { Prev, href, ...rest } = props
+
+  return (
+    <>
+      <Prev {...rest} href={href} />
+      {href === '/account/orders' && <PaymentTokensAccountMenuItem />}
+    </>
+  )
+}