@graphcommerce/magento-cart-shipping-address 2.103.1

package/Api/BillingAddress.gql.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type BillingAddressFragment = { id: string, billing_address?: Types.Maybe<{ __typename: 'BillingCartAddress', firstname: string, lastname: string, city: string, company?: Types.Maybe<string>, postcode?: Types.Maybe<string>, street: Array<Types.Maybe<string>>, telephone: string, country: { code: string, label: string }, region?: Types.Maybe<{ code?: Types.Maybe<string>, label?: Types.Maybe<string>, region_id?: Types.Maybe<number> }> }> };

package/Api/BillingAddress.graphql

@@ -0,0 +1,6 @@
+fragment BillingAddress on Cart @injectable {
+  id
+  billing_address {
+    ...CartAddress
+  }
+}

package/Api/ShippingAddress.gql.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type ShippingAddressFragment = { id: string, shipping_addresses: Array<Types.Maybe<{ __typename: 'ShippingCartAddress', firstname: string, lastname: string, city: string, company?: Types.Maybe<string>, postcode?: Types.Maybe<string>, street: Array<Types.Maybe<string>>, telephone: string, available_shipping_methods?: Types.Maybe<Array<Types.Maybe<{ available: boolean, carrier_code: string, carrier_title: string, error_message?: Types.Maybe<string>, method_code?: Types.Maybe<string>, method_title?: Types.Maybe<string>, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>>, selected_shipping_method?: Types.Maybe<{ carrier_code: string, method_code: string }>, country: { code: string, label: string }, region?: Types.Maybe<{ code?: Types.Maybe<string>, label?: Types.Maybe<string>, region_id?: Types.Maybe<number> }> }>> };

package/Api/ShippingAddress.graphql

@@ -0,0 +1,6 @@
+fragment ShippingAddress on Cart @injectable {
+  id
+  shipping_addresses {
+    ...CartAddress
+  }
+}

package/CHANGELOG.md

@@ -0,0 +1,82 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [2.103.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-shipping-address@2.103.0...@graphcommerce/magento-cart-shipping-address@2.103.1) (2021-09-27)
+
+**Note:** Version bump only for package @graphcommerce/magento-cart-shipping-address
+
+
+
+
+
+# 2.103.0 (2021-09-27)
+
+
+### Bug Fixes
+
+* add removed form import ([4bfea00](https://github.com/ho-nl/m2-pwa/commit/4bfea00038cebd50fb1bc6a123bc697ac582f06d))
+* display empty country in country selector ([8b2a6a7](https://github.com/ho-nl/m2-pwa/commit/8b2a6a7af4ec1dec745dd96687712bc5a17b28d4))
+* ignore md files from triggering version updates ([4f98392](https://github.com/ho-nl/m2-pwa/commit/4f9839250b3a32d3070da5290e5efcc5e2243fba))
+* implement next-ui barrel imports ([75bea70](https://github.com/ho-nl/m2-pwa/commit/75bea703dba898f18a2a1dfa3243ebd0a4e6f0e1))
+* make sure ComposedForm actually submits correctly ([c6499d9](https://github.com/ho-nl/m2-pwa/commit/c6499d9d36f874cd65b310cbf7f63f5a88fa86cd))
+
+
+### Features
+
+* add barrel file for magento-customer ([02fb7f0](https://github.com/ho-nl/m2-pwa/commit/02fb7f004de968ee968b00e364b2b370f4f7d4f1))
+* always use same shipping and billing address ([7b613bf](https://github.com/ho-nl/m2-pwa/commit/7b613bf569e69c76bcc4750943bf4adaa0132eb9))
+* **cart:** when a cart is not active anymore show a clear cart button ([5d04a14](https://github.com/ho-nl/m2-pwa/commit/5d04a14726c040b20b34c0b88f923aee1dff22e5))
+* **graphql:** introduced new graphql package that holds all generated files ([a3e7aa0](https://github.com/ho-nl/m2-pwa/commit/a3e7aa05540540533b5ced9a95f1f802ecbe499f))
+* **image:** introduced completely rewritten Image component ([e3413b3](https://github.com/ho-nl/m2-pwa/commit/e3413b3a57392d6571ea64cb8d9c8dca05ea31df))
+* implemented purchase order ([3a40033](https://github.com/ho-nl/m2-pwa/commit/3a40033cd4d6712a17bb9c41a8841ebf7aa2f025))
+* **next-ui:** SectionContainer/SectionHeader now accepts variantLeft/variantRight as prop ([a58f8f2](https://github.com/ho-nl/m2-pwa/commit/a58f8f2962e74c9aaa41142524d42d9c8f662b8d))
+* next.js 11 ([7d61407](https://github.com/ho-nl/m2-pwa/commit/7d614075a778f488045034f74be4f75b93f63c43))
+* **playwright:** added new playwright package to enable browser testing ([6f49ec7](https://github.com/ho-nl/m2-pwa/commit/6f49ec7595563775b96ebf21c27e39da1282e8d9))
+* renamed all packages to use [@graphcommerce](https://github.com/graphcommerce) instead of [@reachdigital](https://github.com/reachdigital) ([491e4ce](https://github.com/ho-nl/m2-pwa/commit/491e4cec9a2686472dac36b79f999257c0811ffe))
+* submit composed form sequentially ([890d839](https://github.com/ho-nl/m2-pwa/commit/890d8393d635c3777aa17cfa8d4dafc13c2e6cdc))
+* upgraded to nextjs 11 ([0053beb](https://github.com/ho-nl/m2-pwa/commit/0053beb7ef597c190add7264256a0eaec35868da))
+* useFormMutationCart and simpler imports ([012f090](https://github.com/ho-nl/m2-pwa/commit/012f090e8f54d09f35d393c61ad1e2319f5a90ff))
+
+
+### Reverts
+
+* Revert "chore: upgrade @apollo/client" ([55ff24e](https://github.com/ho-nl/m2-pwa/commit/55ff24ede0e56c85b8095edadadd1ec5e0b1b8d2))
+
+
+
+
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [2.102.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-shipping-address@2.101.10...@graphcommerce/magento-cart-shipping-address@2.102.0) (2021-08-12)
+
+### Features
+
+- upgraded to nextjs 11
+  ([0053beb](https://github.com/ho-nl/m2-pwa/commit/0053beb7ef597c190add7264256a0eaec35868da))
+
+## [2.101.9](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-shipping-address@2.101.8...@graphcommerce/magento-cart-shipping-address@2.101.9) (2021-08-09)
+
+### Reverts
+
+- Revert "chore: upgrade @apollo/client"
+  ([55ff24e](https://github.com/ho-nl/m2-pwa/commit/55ff24ede0e56c85b8095edadadd1ec5e0b1b8d2))
+
+# [2.101.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-shipping-address@2.100.19...@graphcommerce/magento-cart-shipping-address@2.101.0) (2021-07-26)
+
+### Features
+
+- **playwright:** added new playwright package to enable browser testing
+  ([6f49ec7](https://github.com/ho-nl/m2-pwa/commit/6f49ec7595563775b96ebf21c27e39da1282e8d9))
+
+## [2.100.11](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-shipping-address@2.100.10...@graphcommerce/magento-cart-shipping-address@2.100.11) (2021-07-20)
+
+### Bug Fixes
+
+- ignore md files from triggering version updates
+  ([4f98392](https://github.com/ho-nl/m2-pwa/commit/4f9839250b3a32d3070da5290e5efcc5e2243fba))

package/README.md

@@ -0,0 +1,9 @@
+# Magento Cart Shipping Address
+
+## Provides Injectables
+
+- [`ShippingAddress`](./Injectable/ShippingAddress.graphql)
+
+## Injects into
+
+- none

package/ShippingAddressForm/GetShippingAddress.gql.ts

@@ -0,0 +1,12 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+export const GetShippingAddressDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetShippingAddress"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"cartId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"cart"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"cart_id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"cartId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"shipping_addresses"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"available_shipping_methods"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"amount"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"available"}},{"kind":"Field","name":{"kind":"Name","value":"carrier_code"}},{"kind":"Field","name":{"kind":"Name","value":"carrier_title"}},{"kind":"Field","name":{"kind":"Name","value":"error_message"}},{"kind":"Field","name":{"kind":"Name","value":"method_code"}},{"kind":"Field","name":{"kind":"Name","value":"method_title"}}]}},{"kind":"Field","name":{"kind":"Name","value":"selected_shipping_method"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"carrier_code"}},{"kind":"Field","name":{"kind":"Name","value":"method_code"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"CartAddressInterface"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"firstname"}},{"kind":"Field","name":{"kind":"Name","value":"lastname"}},{"kind":"Field","name":{"kind":"Name","value":"city"}},{"kind":"Field","name":{"kind":"Name","value":"company"}},{"kind":"Field","name":{"kind":"Name","value":"country"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"code"}},{"kind":"Field","name":{"kind":"Name","value":"label"}}]}},{"kind":"Field","name":{"kind":"Name","value":"postcode"}},{"kind":"Field","name":{"kind":"Name","value":"region"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"code"}},{"kind":"Field","name":{"kind":"Name","value":"label"}},{"kind":"Field","name":{"kind":"Name","value":"region_id"}}]}},{"kind":"Field","name":{"kind":"Name","value":"street"}},{"kind":"Field","name":{"kind":"Name","value":"telephone"}}]}}]}}]}}]}}]} as unknown as DocumentNode<GetShippingAddressQuery, GetShippingAddressQueryVariables>;
+export type GetShippingAddressQueryVariables = Types.Exact<{
+  cartId: Types.Scalars['String'];
+}>;
+
+
+export type GetShippingAddressQuery = { cart?: Types.Maybe<{ id: string, shipping_addresses: Array<Types.Maybe<{ __typename: 'ShippingCartAddress', firstname: string, lastname: string, city: string, company?: Types.Maybe<string>, postcode?: Types.Maybe<string>, street: Array<Types.Maybe<string>>, telephone: string, country: { code: string, label: string }, region?: Types.Maybe<{ code?: Types.Maybe<string>, label?: Types.Maybe<string>, region_id?: Types.Maybe<number> }>, available_shipping_methods?: Types.Maybe<Array<Types.Maybe<{ available: boolean, carrier_code: string, carrier_title: string, error_message?: Types.Maybe<string>, method_code?: Types.Maybe<string>, method_title?: Types.Maybe<string>, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>>, selected_shipping_method?: Types.Maybe<{ carrier_code: string, method_code: string }> }>> }> };

package/ShippingAddressForm/GetShippingAddress.graphql

@@ -0,0 +1,5 @@
+query GetShippingAddress($cartId: String!) {
+  cart(cart_id: $cartId) {
+    ...ShippingAddress
+  }
+}

package/ShippingAddressForm/ShippingAddressForm.gql.ts

@@ -0,0 +1,25 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+export const ShippingAddressFormDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"ShippingAddressForm"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"cartId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"company"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"firstname"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"lastname"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"postcode"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"city"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"countryCode"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"regionId"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"street"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"houseNumber"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"addition"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"telephone"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}},"defaultValue":{"kind":"StringValue","value":"000 - 000 0000","block":false}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"saveInAddressBook"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Boolean"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"customerNote"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"setShippingAddressesOnCart"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"cart_id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"cartId"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"shipping_addresses"},"value":{"kind":"ListValue","values":[{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"address"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"company"},"value":{"kind":"Variable","name":{"kind":"Name","value":"company"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"firstname"},"value":{"kind":"Variable","name":{"kind":"Name","value":"firstname"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"lastname"},"value":{"kind":"Variable","name":{"kind":"Name","value":"lastname"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"postcode"},"value":{"kind":"Variable","name":{"kind":"Name","value":"postcode"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"city"},"value":{"kind":"Variable","name":{"kind":"Name","value":"city"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"country_code"},"value":{"kind":"Variable","name":{"kind":"Name","value":"countryCode"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"region_id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"regionId"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"street"},"value":{"kind":"ListValue","values":[{"kind":"Variable","name":{"kind":"Name","value":"street"}},{"kind":"Variable","name":{"kind":"Name","value":"houseNumber"}},{"kind":"Variable","name":{"kind":"Name","value":"addition"}}]}},{"kind":"ObjectField","name":{"kind":"Name","value":"telephone"},"value":{"kind":"Variable","name":{"kind":"Name","value":"telephone"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"save_in_address_book"},"value":{"kind":"Variable","name":{"kind":"Name","value":"saveInAddressBook"}}}]}},{"kind":"ObjectField","name":{"kind":"Name","value":"customer_notes"},"value":{"kind":"Variable","name":{"kind":"Name","value":"customerNote"}}}]}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"cart"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"shipping_addresses"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"available_shipping_methods"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"amount"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"available"}},{"kind":"Field","name":{"kind":"Name","value":"carrier_code"}},{"kind":"Field","name":{"kind":"Name","value":"carrier_title"}},{"kind":"Field","name":{"kind":"Name","value":"error_message"}},{"kind":"Field","name":{"kind":"Name","value":"method_code"}},{"kind":"Field","name":{"kind":"Name","value":"method_title"}}]}},{"kind":"Field","name":{"kind":"Name","value":"selected_shipping_method"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"carrier_code"}},{"kind":"Field","name":{"kind":"Name","value":"method_code"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"CartAddressInterface"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"firstname"}},{"kind":"Field","name":{"kind":"Name","value":"lastname"}},{"kind":"Field","name":{"kind":"Name","value":"city"}},{"kind":"Field","name":{"kind":"Name","value":"company"}},{"kind":"Field","name":{"kind":"Name","value":"country"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"code"}},{"kind":"Field","name":{"kind":"Name","value":"label"}}]}},{"kind":"Field","name":{"kind":"Name","value":"postcode"}},{"kind":"Field","name":{"kind":"Name","value":"region"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"code"}},{"kind":"Field","name":{"kind":"Name","value":"label"}},{"kind":"Field","name":{"kind":"Name","value":"region_id"}}]}},{"kind":"Field","name":{"kind":"Name","value":"street"}},{"kind":"Field","name":{"kind":"Name","value":"telephone"}}]}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"setBillingAddressOnCart"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"cart_id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"cartId"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"billing_address"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"address"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"company"},"value":{"kind":"Variable","name":{"kind":"Name","value":"company"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"firstname"},"value":{"kind":"Variable","name":{"kind":"Name","value":"firstname"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"lastname"},"value":{"kind":"Variable","name":{"kind":"Name","value":"lastname"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"postcode"},"value":{"kind":"Variable","name":{"kind":"Name","value":"postcode"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"city"},"value":{"kind":"Variable","name":{"kind":"Name","value":"city"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"country_code"},"value":{"kind":"Variable","name":{"kind":"Name","value":"countryCode"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"region_id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"regionId"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"street"},"value":{"kind":"ListValue","values":[{"kind":"Variable","name":{"kind":"Name","value":"street"}},{"kind":"Variable","name":{"kind":"Name","value":"houseNumber"}},{"kind":"Variable","name":{"kind":"Name","value":"addition"}}]}},{"kind":"ObjectField","name":{"kind":"Name","value":"telephone"},"value":{"kind":"Variable","name":{"kind":"Name","value":"telephone"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"save_in_address_book"},"value":{"kind":"Variable","name":{"kind":"Name","value":"saveInAddressBook"}}}]}},{"kind":"ObjectField","name":{"kind":"Name","value":"same_as_shipping"},"value":{"kind":"BooleanValue","value":true}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"cart"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"billing_address"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"CartAddressInterface"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"firstname"}},{"kind":"Field","name":{"kind":"Name","value":"lastname"}},{"kind":"Field","name":{"kind":"Name","value":"city"}},{"kind":"Field","name":{"kind":"Name","value":"company"}},{"kind":"Field","name":{"kind":"Name","value":"country"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"code"}},{"kind":"Field","name":{"kind":"Name","value":"label"}}]}},{"kind":"Field","name":{"kind":"Name","value":"postcode"}},{"kind":"Field","name":{"kind":"Name","value":"region"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"code"}},{"kind":"Field","name":{"kind":"Name","value":"label"}},{"kind":"Field","name":{"kind":"Name","value":"region_id"}}]}},{"kind":"Field","name":{"kind":"Name","value":"street"}},{"kind":"Field","name":{"kind":"Name","value":"telephone"}}]}}]}}]}}]}}]}}]} as unknown as DocumentNode<ShippingAddressFormMutation, ShippingAddressFormMutationVariables>;
+export type ShippingAddressFormMutationVariables = Types.Exact<{
+  cartId: Types.Scalars['String'];
+  company?: Types.Maybe<Types.Scalars['String']>;
+  firstname: Types.Scalars['String'];
+  lastname: Types.Scalars['String'];
+  postcode: Types.Scalars['String'];
+  city: Types.Scalars['String'];
+  countryCode: Types.Scalars['String'];
+  regionId?: Types.Maybe<Types.Scalars['Int']>;
+  street: Types.Scalars['String'];
+  houseNumber: Types.Scalars['String'];
+  addition?: Types.Maybe<Types.Scalars['String']>;
+  telephone?: Types.Maybe<Types.Scalars['String']>;
+  saveInAddressBook: Types.Scalars['Boolean'];
+  customerNote?: Types.Maybe<Types.Scalars['String']>;
+}>;
+
+
+export type ShippingAddressFormMutation = { setShippingAddressesOnCart?: Types.Maybe<{ cart: { __typename: 'Cart', id: string, shipping_addresses: Array<Types.Maybe<{ __typename: 'ShippingCartAddress', firstname: string, lastname: string, city: string, company?: Types.Maybe<string>, postcode?: Types.Maybe<string>, street: Array<Types.Maybe<string>>, telephone: string, country: { code: string, label: string }, region?: Types.Maybe<{ code?: Types.Maybe<string>, label?: Types.Maybe<string>, region_id?: Types.Maybe<number> }>, available_shipping_methods?: Types.Maybe<Array<Types.Maybe<{ available: boolean, carrier_code: string, carrier_title: string, error_message?: Types.Maybe<string>, method_code?: Types.Maybe<string>, method_title?: Types.Maybe<string>, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>>, selected_shipping_method?: Types.Maybe<{ carrier_code: string, method_code: string }> }>> } }>, setBillingAddressOnCart?: Types.Maybe<{ cart: { __typename: 'Cart', id: string, billing_address?: Types.Maybe<{ __typename: 'BillingCartAddress', firstname: string, lastname: string, city: string, company?: Types.Maybe<string>, postcode?: Types.Maybe<string>, street: Array<Types.Maybe<string>>, telephone: string, country: { code: string, label: string }, region?: Types.Maybe<{ code?: Types.Maybe<string>, label?: Types.Maybe<string>, region_id?: Types.Maybe<number> }> }> } }> };

package/ShippingAddressForm/ShippingAddressForm.graphql

@@ -0,0 +1,72 @@
+mutation ShippingAddressForm(
+  $cartId: String!
+  $company: String
+  $firstname: String!
+  $lastname: String!
+  $postcode: String!
+  $city: String!
+  $countryCode: String!
+  $regionId: Int
+  $street: String!
+  $houseNumber: String!
+  $addition: String
+  $telephone: String = "000 - 000 0000"
+  $saveInAddressBook: Boolean!
+  $customerNote: String
+) {
+  setShippingAddressesOnCart(
+    input: {
+      cart_id: $cartId
+      shipping_addresses: [
+        {
+          address: {
+            company: $company
+            firstname: $firstname
+            lastname: $lastname
+            postcode: $postcode
+            city: $city
+            country_code: $countryCode
+            region_id: $regionId
+            street: [$street, $houseNumber, $addition]
+            telephone: $telephone
+            save_in_address_book: $saveInAddressBook
+          }
+          customer_notes: $customerNote
+        }
+      ]
+    }
+  ) {
+    cart {
+      id
+      __typename
+      ...ShippingAddress
+    }
+  }
+
+  setBillingAddressOnCart(
+    input: {
+      cart_id: $cartId
+      billing_address: {
+        address: {
+          company: $company
+          firstname: $firstname
+          lastname: $lastname
+          postcode: $postcode
+          city: $city
+          country_code: $countryCode
+          region_id: $regionId
+          street: [$street, $houseNumber, $addition]
+          telephone: $telephone
+          save_in_address_book: $saveInAddressBook
+        }
+        same_as_shipping: true
+      }
+    }
+  ) {
+    cart {
+      id
+      __typename
+      ...BillingAddress
+    }
+  }
+}

package/ShippingAddressForm/ShippingAddressForm.tsx

@@ -0,0 +1,111 @@
+import { useQuery } from '@apollo/client'
+import { TextField } from '@material-ui/core'
+import {
+  useCartQuery,
+  useFormGqlMutationCart,
+  ApolloCartErrorAlert,
+} from '@graphcommerce/magento-cart'
+import { AddressFields, CustomerDocument, NameFields } from '@graphcommerce/magento-customer'
+import { StoreConfigDocument, CountryRegionsDocument } from '@graphcommerce/magento-store'
+import { Form, FormRow, InputCheckmark } from '@graphcommerce/next-ui'
+import {
+  phonePattern,
+  useFormAutoSubmit,
+  useFormCompose,
+  UseFormComposeOptions,
+  useFormPersist,
+} from '@graphcommerce/react-hook-form'
+import { AnimatePresence } from 'framer-motion'
+import React, { useRef } from 'react'
+import { GetShippingAddressDocument } from './GetShippingAddress.gql'
+import { ShippingAddressFormDocument } from './ShippingAddressForm.gql'
+
+export type ShippingAddressFormProps = Pick<UseFormComposeOptions, 'step'>
+
+export default function ShippingAddressForm(props: ShippingAddressFormProps) {
+  const { step } = props
+  const ref = useRef<HTMLFormElement>(null)
+  const { data: cartQuery } = useCartQuery(GetShippingAddressDocument)
+  const { data: config } = useQuery(StoreConfigDocument)
+  const { data: countriesData } = useQuery(CountryRegionsDocument)
+  const { data: customerQuery } = useQuery(CustomerDocument, { fetchPolicy: 'cache-only' })
+
+  const shopCountry = config?.storeConfig?.locale?.split('_')?.[1].toUpperCase()
+
+  const currentAddress = cartQuery?.cart?.shipping_addresses?.[0]
+  const currentCustomer = customerQuery?.customer
+  const currentCountryCode = currentAddress?.country.code ?? shopCountry
+
+  const form = useFormGqlMutationCart(ShippingAddressFormDocument, {
+    defaultValues: {
+      // todo(paales): change to something more sustainable
+      firstname: currentAddress?.firstname ?? currentCustomer?.firstname ?? '',
+      lastname: currentAddress?.lastname ?? currentCustomer?.lastname ?? '',
+      telephone: currentAddress?.telephone !== '000 - 000 0000' ? currentAddress?.telephone : '',
+      city: currentAddress?.city ?? '',
+      company: currentAddress?.company ?? '',
+      postcode: currentAddress?.postcode ?? '',
+      street: currentAddress?.street?.[0] ?? '',
+      houseNumber: currentAddress?.street?.[1] ?? '',
+      addition: currentAddress?.street?.[2] ?? '',
+      regionId: currentAddress?.region?.region_id ?? null,
+      countryCode: currentCountryCode, // todo: replace by the default shipping country of the store + geoip,
+      saveInAddressBook: true,
+    },
+    mode: 'onChange',
+    onBeforeSubmit: (variables) => {
+      const regionId = countriesData?.countries
+        ?.find((country) => country?.two_letter_abbreviation === variables.countryCode)
+        ?.available_regions?.find((region) => region?.id === variables.regionId)?.id
+
+      return {
+        ...variables,
+        telephone: variables.telephone || '000 - 000 0000',
+        regionId,
+        customerNote: '',
+      }
+    },
+  })
+  const { muiRegister, handleSubmit, valid, formState, required, error } = form
+  const submit = handleSubmit(() => {})
+
+  useFormPersist({ form, name: 'ShippingAddressForm' })
+  useFormCompose({ form, step, submit, key: 'ShippingAddressForm' })
+
+  const autoSubmitting = useFormAutoSubmit({
+    form,
+    submit,
+    fields: ['postcode', 'countryCode', 'regionId'],
+  })
+  const readOnly = formState.isSubmitting && !autoSubmitting
+
+  return (
+    <Form onSubmit={submit} noValidate ref={ref}>
+      <AnimatePresence initial={false}>
+        <NameFields form={form} key='name' readOnly={readOnly} />
+        <AddressFields form={form} key='addressfields' readOnly={readOnly} />
+
+        <FormRow key='telephone'>
+          <TextField
+            variant='outlined'
+            type='text'
+            error={!!formState.errors.telephone}
+            required={required.telephone}
+            label='Telephone'
+            {...muiRegister('telephone', {
+              required: required.telephone,
+              pattern: { value: phonePattern, message: 'Invalid phone number' },
+            })}
+            helperText={formState.isSubmitted && formState.errors.telephone?.message}
+            InputProps={{
+              readOnly,
+              endAdornment: <InputCheckmark show={valid.telephone} />,
+            }}
+          />
+        </FormRow>
+
+        <ApolloCartErrorAlert error={error} />
+      </AnimatePresence>
+    </Form>
+  )
+}

package/ShippingAddressIdForm/ShippingAddressIdForm.gql.ts

@@ -0,0 +1,13 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+export const ShippingAddressIdFormDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"ShippingAddressIdForm"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"cartId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"addressId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"setShippingAddressesOnCart"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"cart_id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"cartId"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"shipping_addresses"},"value":{"kind":"ListValue","values":[{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"customer_address_id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"addressId"}}}]}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"cart"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"shipping_addresses"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"available_shipping_methods"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"amount"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"available"}},{"kind":"Field","name":{"kind":"Name","value":"carrier_code"}},{"kind":"Field","name":{"kind":"Name","value":"carrier_title"}},{"kind":"Field","name":{"kind":"Name","value":"error_message"}},{"kind":"Field","name":{"kind":"Name","value":"method_code"}},{"kind":"Field","name":{"kind":"Name","value":"method_title"}}]}},{"kind":"Field","name":{"kind":"Name","value":"selected_shipping_method"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"carrier_code"}},{"kind":"Field","name":{"kind":"Name","value":"method_code"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"CartAddressInterface"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"firstname"}},{"kind":"Field","name":{"kind":"Name","value":"lastname"}},{"kind":"Field","name":{"kind":"Name","value":"city"}},{"kind":"Field","name":{"kind":"Name","value":"company"}},{"kind":"Field","name":{"kind":"Name","value":"country"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"code"}},{"kind":"Field","name":{"kind":"Name","value":"label"}}]}},{"kind":"Field","name":{"kind":"Name","value":"postcode"}},{"kind":"Field","name":{"kind":"Name","value":"region"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"code"}},{"kind":"Field","name":{"kind":"Name","value":"label"}},{"kind":"Field","name":{"kind":"Name","value":"region_id"}}]}},{"kind":"Field","name":{"kind":"Name","value":"street"}},{"kind":"Field","name":{"kind":"Name","value":"telephone"}}]}}]}}]}}]}}]}}]} as unknown as DocumentNode<ShippingAddressIdFormMutation, ShippingAddressIdFormMutationVariables>;
+export type ShippingAddressIdFormMutationVariables = Types.Exact<{
+  cartId: Types.Scalars['String'];
+  addressId: Types.Scalars['Int'];
+}>;
+
+
+export type ShippingAddressIdFormMutation = { setShippingAddressesOnCart?: Types.Maybe<{ cart: { id: string, shipping_addresses: Array<Types.Maybe<{ __typename: 'ShippingCartAddress', firstname: string, lastname: string, city: string, company?: Types.Maybe<string>, postcode?: Types.Maybe<string>, street: Array<Types.Maybe<string>>, telephone: string, country: { code: string, label: string }, region?: Types.Maybe<{ code?: Types.Maybe<string>, label?: Types.Maybe<string>, region_id?: Types.Maybe<number> }>, available_shipping_methods?: Types.Maybe<Array<Types.Maybe<{ available: boolean, carrier_code: string, carrier_title: string, error_message?: Types.Maybe<string>, method_code?: Types.Maybe<string>, method_title?: Types.Maybe<string>, amount: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>>>, selected_shipping_method?: Types.Maybe<{ carrier_code: string, method_code: string }> }>> } }> };

package/ShippingAddressIdForm/ShippingAddressIdForm.graphql

@@ -0,0 +1,9 @@
+mutation ShippingAddressIdForm($cartId: String!, $addressId: Int!) {
+  setShippingAddressesOnCart(
+    input: { cart_id: $cartId, shipping_addresses: [{ customer_address_id: $addressId }] }
+  ) {
+    cart {
+      ...ShippingAddress
+    }
+  }
+}

package/_playwright/fillShippingAddressForm.ts

@@ -0,0 +1,22 @@
+import { Page } from '@playwright/test'
+
+export async function fillShippingAddressForm(page: Page) {
+  await page.click('input[name="firstname"]')
+  await page.fill('input[name="firstname"]', 'Test')
+  await page.click('input[name="lastname"]')
+  await page.fill('input[name="lastname"]', 'Account')
+  await page.click('input[name="street"]')
+  await page.fill('input[name="street"]', 'Street')
+  await page.press('input[name="street"]', 'Tab')
+  await page.fill('input[name="houseNumber"]', '1')
+  await page.press('input[name="houseNumber"]', 'Tab')
+  await page.press('input[name="addition"]', 'Tab')
+  await page.fill('input[name="postcode"]', '1234AB')
+  await page.press('input[name="postcode"]', 'Tab')
+  await page.fill('input[name="city"]', 'Amsterdam')
+  await page.press('input[name="city"]', 'Tab')
+  await page.selectOption('select[name="countryCode"]', 'NL')
+  await page.click('input[name="telephone"]')
+  await page.fill('input[name="telephone"]', '0123456789')
+  await page.press('input[name="telephone"]', 'Tab')
+}

package/index.ts

@@ -0,0 +1,5 @@
+export * from './Api/BillingAddress.gql'
+export * from './Api/ShippingAddress.gql'
+
+export * from './ShippingAddressForm/ShippingAddressForm'
+export { default as ShippingAddressForm } from './ShippingAddressForm/ShippingAddressForm'

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@graphcommerce/magento-cart-shipping-address",
+  "version": "2.103.1",
+  "sideEffects": false,
+  "prettier": "@graphcommerce/prettier-config-pwa",
+  "browserslist": [
+    "extends @graphcommerce/browserslist-config-pwa"
+  ],
+  "eslintConfig": {
+    "extends": "@graphcommerce/eslint-config-pwa",
+    "parserOptions": {
+      "project": "./tsconfig.json"
+    }
+  },
+  "devDependencies": {
+    "@graphcommerce/browserslist-config-pwa": "^3.0.1",
+    "@graphcommerce/eslint-config-pwa": "^3.0.1",
+    "@graphcommerce/prettier-config-pwa": "^3.0.1",
+    "@graphcommerce/typescript-config-pwa": "^3.0.1",
+    "@playwright/test": "^1.14.1"
+  },
+  "dependencies": {
+    "@apollo/client": "^3.3.21",
+    "@graphcommerce/graphql": "^2.103.1",
+    "@graphcommerce/image": "^2.104.1",
+    "@graphcommerce/magento-cart": "^3.0.1",
+    "@graphcommerce/magento-customer": "^3.0.1",
+    "@graphcommerce/magento-store": "^3.0.1",
+    "@graphcommerce/next-ui": "^3.0.1",
+    "@graphcommerce/react-hook-form": "^2.102.1",
+    "@graphql-typed-document-node/core": "^3.1.0",
+    "@material-ui/core": "^4.12.3",
+    "@material-ui/lab": "^4.0.0-alpha.60",
+    "clsx": "^1.1.1",
+    "framer-motion": "^4.1.17",
+    "next": "^11.1.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  }
+}