Add sync webhooks for tax calculations (#2204)

* Update schema

* Build types

* Add badgesto MultiAutocompleteSelectField

* Reduce z-index on MultiAutocompleteSelectField

* Add preview pills for new webhooks

* Change grid variant to uniform in Webhook details view to reduce clipping

* Update snapshots

* Change isWebhookInPreview to more scalable solution

schema.graphql

@@ -707,6 +707,9 @@ input AppExtensionFilterInput {
 
 """All places where app extension can be mounted."""
 enum AppExtensionMountEnum {
+  CUSTOMER_OVERVIEW_CREATE
+  CUSTOMER_OVERVIEW_MORE_ACTIONS
+  CUSTOMER_DETAILS_MORE_ACTIONS
   PRODUCT_OVERVIEW_CREATE
   PRODUCT_OVERVIEW_MORE_ACTIONS
   PRODUCT_DETAILS_MORE_ACTIONS
@@ -2175,8 +2178,19 @@ type Category implements Node & ObjectWithMetadata {
     last: Int
   ): CategoryCountableConnection
   backgroundImage(
-    """Size of the image."""
+    """
+    Size of the image. If not provided, the original image will be returned.
+    """
     size: Int
+
+    """
+    The format of the image. When not provided, format of the original image will be used. Must be provided together with the size value, otherwise original image will be returned.
+    
+    Added in Saleor 3.6.
+    
+    Note: this API is currently in Feature Preview and can be subject to changes at later point.
+    """
+    format: ThumbnailFormatEnum
   ): Image
 
   """Returns translated category fields for the given language code."""
@@ -2441,11 +2455,31 @@ type CategoryUpdated implements Event {
 """Represents channel."""
 type Channel implements Node {
   id: ID!
-  name: String!
+
-  isActive: Boolean!
+  """Slug of the channel."""
-  currencyCode: String!
   slug: String!
 
+  """
+  Name of the channel.
+  
+  Requires one of the following permissions: AUTHENTICATED_APP, AUTHENTICATED_STAFF_USER.
+  """
+  name: String!
+
+  """
+  Whether the channel is active.
+  
+  Requires one of the following permissions: AUTHENTICATED_APP, AUTHENTICATED_STAFF_USER.
+  """
+  isActive: Boolean!
+
+  """
+  A currency that is assigned to the channel.
+  
+  Requires one of the following permissions: AUTHENTICATED_APP, AUTHENTICATED_STAFF_USER.
+  """
+  currencyCode: String!
+
   """
   Whether a channel has associated orders.
   
@@ -2457,6 +2491,8 @@ type Channel implements Node {
   Default country for the channel. Default country can be used in checkout to determine the stock quantities or calculate taxes when the country was not explicitly provided.
   
   Added in Saleor 3.1.
+  
+  Requires one of the following permissions: AUTHENTICATED_APP, AUTHENTICATED_STAFF_USER.
   """
   defaultCountry: CountryDisplay!
 
@@ -2466,8 +2502,28 @@ type Channel implements Node {
   Added in Saleor 3.5.
   
   Note: this API is currently in Feature Preview and can be subject to changes at later point.
+  
+  Requires one of the following permissions: AUTHENTICATED_APP, AUTHENTICATED_STAFF_USER.
   """
   warehouses: [Warehouse!]!
+
+  """
+  List of shippable countries for the channel.
+  
+  Added in Saleor 3.6.
+  
+  Note: this API is currently in Feature Preview and can be subject to changes at later point.
+  """
+  countries: [CountryDisplay!]
+
+  """
+  Shipping methods that are available for the channel.
+  
+  Added in Saleor 3.6.
+  
+  Note: this API is currently in Feature Preview and can be subject to changes at later point.
+  """
+  availableShippingMethodsPerCountry(countries: [CountryCode!]): [ShippingMethodsPerCountry!]
 }
 
 """
@@ -2883,6 +2939,23 @@ type CheckoutAddPromoCode {
   errors: [CheckoutError!]!
 }
 
+input CheckoutAddressValidationRules {
+  """
+  Determines if an error should be raised when the provided address doesn't have all the required fields. The list of required fields is dynamic and depends on the country code (use the `addressValidationRules` query to fetch them). Note: country code is mandatory for all addresses regardless of the rules provided in this input.
+  """
+  checkRequiredFields: Boolean = true
+
+  """
+  Determines if an error should be raised when the provided address doesn't match the expected format. Example: using letters for postal code when the numbers are expected.
+  """
+  checkFieldsFormat: Boolean = true
+
+  """
+  Determines if Saleor should apply normalization on address fields. Example: converting city field to uppercase letters.
+  """
+  enableFieldsNormalization: Boolean = true
+}
+
 """Update billing address in the existing checkout."""
 type CheckoutBillingAddressUpdate {
   """An updated checkout."""
@@ -2959,6 +3032,15 @@ input CheckoutCreateInput {
 
   """Checkout language code."""
   languageCode: LanguageCodeEnum
+
+  """
+  The checkout validation rules that can be changed.
+  
+  Added in Saleor 3.5.
+  
+  Note: this API is currently in Feature Preview and can be subject to changes at later point.
+  """
+  validationRules: CheckoutValidationRules
 }
 
 type CheckoutCreated implements Event {
@@ -3329,6 +3411,18 @@ type CheckoutUpdated implements Event {
   checkout: Checkout
 }
 
+input CheckoutValidationRules {
+  """
+  The validation rules that can be applied to provided shipping address data.
+  """
+  shippingAddress: CheckoutAddressValidationRules
+
+  """
+  The validation rules that can be applied to provided billing address data.
+  """
+  billingAddress: CheckoutAddressValidationRules
+}
+
 type ChoiceValue {
   raw: String
   verbose: String
@@ -3428,8 +3522,19 @@ type Collection implements Node & ObjectWithMetadata {
     last: Int
   ): ProductCountableConnection
   backgroundImage(
-    """Size of the image."""
+    """
+    Size of the image. If not provided, the original image will be returned.
+    """
     size: Int
+
+    """
+    The format of the image. When not provided, format of the original image will be used. Must be provided together with the size value, otherwise original image will be returned.
+    
+    Added in Saleor 3.6.
+    
+    Note: this API is currently in Feature Preview and can be subject to changes at later point.
+    """
+    format: ThumbnailFormatEnum
   ): Image
 
   """Returns translated collection fields for the given language code."""
@@ -4357,6 +4462,8 @@ type CustomerEvent implements Node {
 """An enumeration."""
 enum CustomerEventsEnum {
   ACCOUNT_CREATED
+  ACCOUNT_ACTIVATED
+  ACCOUNT_DEACTIVATED
   PASSWORD_RESET_LINK_SENT
   PASSWORD_RESET
   EMAIL_CHANGED_REQUEST
@@ -10793,6 +10900,15 @@ type Mutation {
     DEPRECATED: this field will be removed in Saleor 4.0. Use `id` instead.
     """
     token: UUID
+
+    """
+    The rules for changing validation for received billing address data.
+    
+    Added in Saleor 3.5.
+    
+    Note: this API is currently in Feature Preview and can be subject to changes at later point.
+    """
+    validationRules: CheckoutAddressValidationRules
   ): CheckoutBillingAddressUpdate
 
   """
@@ -11119,6 +11235,15 @@ type Mutation {
     DEPRECATED: this field will be removed in Saleor 4.0. Use `id` instead.
     """
     token: UUID
+
+    """
+    The rules for changing validation for received shipping address data.
+    
+    Added in Saleor 3.5.
+    
+    Note: this API is currently in Feature Preview and can be subject to changes at later point.
+    """
+    validationRules: CheckoutAddressValidationRules
   ): CheckoutShippingAddressUpdate
 
   """Updates the shipping method of the checkout."""
@@ -11873,7 +11998,7 @@ type Mutation {
   ): CustomerBulkDelete
 
   """
-  Creates a new staff user. 
+  Creates a new staff user. Apps are not allowed to perform this mutation. 
   
   Requires one of the following permissions: MANAGE_STAFF.
   """
@@ -11883,7 +12008,7 @@ type Mutation {
   ): StaffCreate
 
   """
-  Updates an existing staff user. 
+  Updates an existing staff user. Apps are not allowed to perform this mutation. 
   
   Requires one of the following permissions: MANAGE_STAFF.
   """
@@ -11896,7 +12021,7 @@ type Mutation {
   ): StaffUpdate
 
   """
-  Deletes a staff user. 
+  Deletes a staff user. Apps are not allowed to perform this mutation. 
   
   Requires one of the following permissions: MANAGE_STAFF.
   """
@@ -11906,7 +12031,7 @@ type Mutation {
   ): StaffDelete
 
   """
-  Deletes staff users. 
+  Deletes staff users. Apps are not allowed to perform this mutation. 
   
   Requires one of the following permissions: MANAGE_STAFF.
   """
@@ -11946,7 +12071,7 @@ type Mutation {
   ): UserBulkSetActive
 
   """
-  Create new permission group. 
+  Create new permission group. Apps are not allowed to perform this mutation. 
   
   Requires one of the following permissions: MANAGE_STAFF.
   """
@@ -11956,7 +12081,7 @@ type Mutation {
   ): PermissionGroupCreate
 
   """
-  Update permission group. 
+  Update permission group. Apps are not allowed to perform this mutation. 
   
   Requires one of the following permissions: MANAGE_STAFF.
   """
@@ -11969,7 +12094,7 @@ type Mutation {
   ): PermissionGroupUpdate
 
   """
-  Delete permission group. 
+  Delete permission group. Apps are not allowed to perform this mutation. 
   
   Requires one of the following permissions: MANAGE_STAFF.
   """
@@ -13058,11 +13183,20 @@ type OrderLine implements Node & ObjectWithMetadata {
   unitDiscountReason: String
   taxRate: Float!
   digitalContentUrl: DigitalContentUrl
-
-  """The main thumbnail for the ordered product."""
   thumbnail(
-    """Size of thumbnail."""
+    """
+    Size of the image. If not provided, the original image will be returned.
+    """
     size: Int
+
+    """
+    The format of the image. When not provided, format of the original image will be used. Must be provided together with the size value, otherwise original image will be returned.
+    
+    Added in Saleor 3.6.
+    
+    Note: this API is currently in Feature Preview and can be subject to changes at later point.
+    """
+    format: ThumbnailFormatEnum
   ): Image
 
   """Price of the single item in the order line."""
@@ -14660,10 +14794,11 @@ enum PermissionEnum {
   MANAGE_TRANSLATIONS
   MANAGE_CHECKOUTS
   HANDLE_CHECKOUTS
+  HANDLE_TAXES
 }
 
 """
-Create new permission group. 
+Create new permission group. Apps are not allowed to perform this mutation. 
 
 Requires one of the following permissions: MANAGE_STAFF.
 """
@@ -14684,8 +14819,31 @@ input PermissionGroupCreateInput {
   name: String!
 }
 
+type PermissionGroupCreated implements Event {
+  """Time of the event."""
+  issuedAt: DateTime
+
+  """Saleor version that triggered the event."""
+  version: String
+
+  """The user or application that triggered the event."""
+  issuingPrincipal: IssuingPrincipal
+
+  """The application receiving the webhook."""
+  recipient: App
+
   """
-Delete permission group. 
+  The permission group the event relates to.
+  
+  Added in Saleor 3.6.
+  
+  Note: this API is currently in Feature Preview and can be subject to changes at later point.
+  """
+  permissionGroup: Group
+}
+
+"""
+Delete permission group. Apps are not allowed to perform this mutation. 
 
 Requires one of the following permissions: MANAGE_STAFF.
 """
@@ -14695,6 +14853,29 @@ type PermissionGroupDelete {
   group: Group
 }
 
+type PermissionGroupDeleted implements Event {
+  """Time of the event."""
+  issuedAt: DateTime
+
+  """Saleor version that triggered the event."""
+  version: String
+
+  """The user or application that triggered the event."""
+  issuingPrincipal: IssuingPrincipal
+
+  """The application receiving the webhook."""
+  recipient: App
+
+  """
+  The permission group the event relates to.
+  
+  Added in Saleor 3.6.
+  
+  Note: this API is currently in Feature Preview and can be subject to changes at later point.
+  """
+  permissionGroup: Group
+}
+
 type PermissionGroupError {
   """
   Name of a field that caused the error. A value of `null` indicates that the error isn't associated with a particular field.
@@ -14745,7 +14926,7 @@ input PermissionGroupSortingInput {
 }
 
 """
-Update permission group. 
+Update permission group. Apps are not allowed to perform this mutation. 
 
 Requires one of the following permissions: MANAGE_STAFF.
 """
@@ -14772,6 +14953,29 @@ input PermissionGroupUpdateInput {
   removeUsers: [ID!]
 }
 
+type PermissionGroupUpdated implements Event {
+  """Time of the event."""
+  issuedAt: DateTime
+
+  """Saleor version that triggered the event."""
+  version: String
+
+  """The user or application that triggered the event."""
+  issuingPrincipal: IssuingPrincipal
+
+  """The application receiving the webhook."""
+  recipient: App
+
+  """
+  The permission group the event relates to.
+  
+  Added in Saleor 3.6.
+  
+  Note: this API is currently in Feature Preview and can be subject to changes at later point.
+  """
+  permissionGroup: Group
+}
+
 """Plugin."""
 type Plugin {
   """Identifier of the plugin."""
@@ -15036,11 +15240,20 @@ type Product implements Node & ObjectWithMetadata {
   Rich text format. For reference see https://editorjs.io/
   """
   descriptionJson: JSONString @deprecated(reason: "This field will be removed in Saleor 4.0. Use the `description` field instead.")
-
-  """The main thumbnail for a product."""
   thumbnail(
-    """Size of thumbnail."""
+    """
+    Size of the image. If not provided, the original image will be returned.
+    """
     size: Int
+
+    """
+    The format of the image. When not provided, format of the original image will be used. Must be provided together with the size value, otherwise original image will be returned.
+    
+    Added in Saleor 3.6.
+    
+    Note: this API is currently in Feature Preview and can be subject to changes at later point.
+    """
+    format: ThumbnailFormatEnum
   ): Image
 
   """
@@ -15563,14 +15776,22 @@ input ProductFilterInput {
   categories: [ID!]
   hasCategory: Boolean
   attributes: [AttributeInput!]
+
+  """Filter by variants having specific stock status."""
   stockAvailability: StockAvailability
   stocks: ProductStockFilterInput
   search: String
   metadata: [MetadataFilter!]
   price: PriceRangeInput
+
+  """Filter by the lowest variant price after discounts."""
   minimalPrice: PriceRangeInput
+
+  """Filter by when was the most recent update."""
   updatedAt: DateTimeRangeInput
   productTypes: [ID!]
+
+  """Filter on whether product is a gift card or not."""
   giftCard: Boolean
   ids: [ID!]
   hasPreorderedVariants: Boolean
@@ -15595,11 +15816,20 @@ type ProductImage {
   The new relative sorting position of the item (from -inf to +inf). 1 moves the item one position forward, -1 moves the item one position backward, 0 leaves the item unchanged.
   """
   sortOrder: Int
-
-  """The URL of the image."""
   url(
-    """Size of the image."""
+    """
+    Size of the image. If not provided, the original image will be returned.
+    """
     size: Int
+
+    """
+    The format of the image. When not provided, format of the original image will be used. Must be provided together with the size value, otherwise original image will be returned.
+    
+    Added in Saleor 3.6.
+    
+    Note: this API is currently in Feature Preview and can be subject to changes at later point.
+    """
+    format: ThumbnailFormatEnum
   ): String!
 }
 
@@ -15649,11 +15879,20 @@ type ProductMedia implements Node {
   alt: String!
   type: ProductMediaType!
   oembedData: JSONString!
-
-  """The URL of the media."""
   url(
-    """Size of the image."""
+    """
+    Size of the image. If not provided, the original image will be returned.
+    """
     size: Int
+
+    """
+    The format of the image. When not provided, format of the original image will be used. Must be provided together with the size value, otherwise original image will be returned.
+    
+    Added in Saleor 3.6.
+    
+    Note: this API is currently in Feature Preview and can be subject to changes at later point.
+    """
+    format: ThumbnailFormatEnum
   ): String!
 }
 
@@ -17436,6 +17675,20 @@ type Query {
     last: Int
   ): PaymentCountableConnection
 
+  """
+  Look up a transaction by ID.
+  
+  Added in Saleor 3.6.
+  
+  Note: this API is currently in Feature Preview and can be subject to changes at later point.
+  
+  Requires one of the following permissions: HANDLE_PAYMENTS.
+  """
+  transaction(
+    """ID of a transaction."""
+    id: ID!
+  ): TransactionItem
+
   """Look up a page by ID or slug."""
   page(
     """ID of the page."""
@@ -17987,14 +18240,19 @@ type Query {
     last: Int
   ): CheckoutLineCountableConnection
 
-  """
+  """Look up a channel by ID or slug."""
-  Look up a channel by ID.
-  
-  Requires one of the following permissions: AUTHENTICATED_APP, AUTHENTICATED_STAFF_USER.
-  """
   channel(
     """ID of the channel."""
     id: ID
+
+    """
+    Slug of the channel.
+    
+    Added in Saleor 3.6.
+    
+    Note: this API is currently in Feature Preview and can be subject to changes at later point.
+    """
+    slug: String
   ): Channel
 
   """
@@ -19197,6 +19455,21 @@ enum ShippingMethodTypeEnum {
   WEIGHT
 }
 
+"""
+List of shipping methods available for the country.
+
+Added in Saleor 3.6.
+
+Note: this API is currently in Feature Preview and can be subject to changes at later point.
+"""
+type ShippingMethodsPerCountry {
+  """The country code."""
+  countryCode: CountryCode!
+
+  """List of available shipping methods."""
+  shippingMethods: [ShippingMethod!]
+}
+
 input ShippingPostalCodeRulesCreateInputRange {
   """Start range of the postal code."""
   start: String!
@@ -20115,7 +20388,7 @@ input SiteDomainInput {
 }
 
 """
-Deletes staff users. 
+Deletes staff users. Apps are not allowed to perform this mutation. 
 
 Requires one of the following permissions: MANAGE_STAFF.
 """
@@ -20127,7 +20400,7 @@ type StaffBulkDelete {
 }
 
 """
-Creates a new staff user. 
+Creates a new staff user. Apps are not allowed to perform this mutation. 
 
 Requires one of the following permissions: MANAGE_STAFF.
 """
@@ -20186,7 +20459,7 @@ type StaffCreated implements Event {
 }
 
 """
-Deletes a staff user. 
+Deletes a staff user. Apps are not allowed to perform this mutation. 
 
 Requires one of the following permissions: MANAGE_STAFF.
 """
@@ -20313,7 +20586,7 @@ type StaffNotificationRecipientUpdate {
 }
 
 """
-Updates an existing staff user. 
+Updates an existing staff user. Apps are not allowed to perform this mutation. 
 
 Requires one of the following permissions: MANAGE_STAFF.
 """
@@ -20523,6 +20796,11 @@ type TaxedMoneyRange {
   stop: TaxedMoney
 }
 
+"""An enumeration."""
+enum ThumbnailFormatEnum {
+  WEBP
+}
+
 type TimePeriod {
   """The length of the period."""
   amount: Int!
@@ -20795,6 +21073,13 @@ type TransactionItem implements Node & ObjectWithMetadata {
   """Reference of transaction."""
   reference: String!
 
+  """
+  The related order.
+  
+  Added in Saleor 3.6.
+  """
+  order: Order
+
   """List of all transaction's events."""
   events: [TransactionEvent!]!
 }
@@ -21208,8 +21493,19 @@ type User implements Node & ObjectWithMetadata {
   """List of user's permission groups which user can manage."""
   editableGroups: [Group!]
   avatar(
-    """Size of the avatar."""
+    """
+    Size of the image. If not provided, the original image will be returned.
+    """
     size: Int
+
+    """
+    The format of the image. When not provided, format of the original image will be used. Must be provided together with the size value, otherwise original image will be returned.
+    
+    Added in Saleor 3.6.
+    
+    Note: this API is currently in Feature Preview and can be subject to changes at later point.
+    """
+    format: ThumbnailFormatEnum
   ): Image
 
   """
@@ -21795,6 +22091,7 @@ input VoucherFilterInput {
   started: DateTimeRangeInput
   search: String
   metadata: [MetadataFilter!]
+  ids: [ID!]
 }
 
 input VoucherInput {
@@ -22590,12 +22887,26 @@ enum WebhookEventTypeAsyncEnum {
 
   """An order is fulfilled."""
   ORDER_FULFILLED
+
+  """A draft order is created."""
   DRAFT_ORDER_CREATED
+
+  """A draft order is updated."""
   DRAFT_ORDER_UPDATED
+
+  """A draft order is deleted."""
   DRAFT_ORDER_DELETED
+
+  """A sale is created."""
   SALE_CREATED
+
+  """A sale is updated."""
   SALE_UPDATED
+
+  """A sale is deleted."""
   SALE_DELETED
+
+  """A sale is activated or deactivated."""
   SALE_TOGGLE
 
   """An invoice for order requested."""
@@ -22642,7 +22953,11 @@ enum WebhookEventTypeAsyncEnum {
 
   """A product variant is deleted."""
   PRODUCT_VARIANT_DELETED
+
+  """A product variant is out of stock."""
   PRODUCT_VARIANT_OUT_OF_STOCK
+
+  """A product variant is back in stock."""
   PRODUCT_VARIANT_BACK_IN_STOCK
 
   """A new checkout is created."""
@@ -22680,6 +22995,15 @@ enum WebhookEventTypeAsyncEnum {
   """A page type is deleted."""
   PAGE_TYPE_DELETED
 
+  """A new permission group is created."""
+  PERMISSION_GROUP_CREATED
+
+  """A permission group is updated."""
+  PERMISSION_GROUP_UPDATED
+
+  """A permission group is deleted."""
+  PERMISSION_GROUP_DELETED
+
   """A new shipping price is created."""
   SHIPPING_PRICE_CREATED
 
@@ -22698,12 +23022,22 @@ enum WebhookEventTypeAsyncEnum {
   """A shipping zone is deleted."""
   SHIPPING_ZONE_DELETED
 
-  """A staff user is deleted"""
+  """A new staff user is created."""
   STAFF_CREATED
+
+  """A staff user is updated."""
   STAFF_UPDATED
+
+  """A staff user is deleted."""
   STAFF_DELETED
+
+  """An action requested for transaction."""
   TRANSACTION_ACTION_REQUEST
+
+  """A new translation is created."""
   TRANSLATION_CREATED
+
+  """A translation is updated."""
   TRANSLATION_UPDATED
 
   """A new warehouse created."""
@@ -22844,12 +23178,26 @@ enum WebhookEventTypeEnum {
 
   """An order is fulfilled."""
   ORDER_FULFILLED
+
+  """A draft order is created."""
   DRAFT_ORDER_CREATED
+
+  """A draft order is updated."""
   DRAFT_ORDER_UPDATED
+
+  """A draft order is deleted."""
   DRAFT_ORDER_DELETED
+
+  """A sale is created."""
   SALE_CREATED
+
+  """A sale is updated."""
   SALE_UPDATED
+
+  """A sale is deleted."""
   SALE_DELETED
+
+  """A sale is activated or deactivated."""
   SALE_TOGGLE
 
   """An invoice for order requested."""
@@ -22896,7 +23244,11 @@ enum WebhookEventTypeEnum {
 
   """A product variant is deleted."""
   PRODUCT_VARIANT_DELETED
+
+  """A product variant is out of stock."""
   PRODUCT_VARIANT_OUT_OF_STOCK
+
+  """A product variant is back in stock."""
   PRODUCT_VARIANT_BACK_IN_STOCK
 
   """A new checkout is created."""
@@ -22934,6 +23286,15 @@ enum WebhookEventTypeEnum {
   """A page type is deleted."""
   PAGE_TYPE_DELETED
 
+  """A new permission group is created."""
+  PERMISSION_GROUP_CREATED
+
+  """A permission group is updated."""
+  PERMISSION_GROUP_UPDATED
+
+  """A permission group is deleted."""
+  PERMISSION_GROUP_DELETED
+
   """A new shipping price is created."""
   SHIPPING_PRICE_CREATED
 
@@ -22952,12 +23313,22 @@ enum WebhookEventTypeEnum {
   """A shipping zone is deleted."""
   SHIPPING_ZONE_DELETED
 
-  """A staff user is deleted"""
+  """A new staff user is created."""
   STAFF_CREATED
+
+  """A staff user is updated."""
   STAFF_UPDATED
+
+  """A staff user is deleted."""
   STAFF_DELETED
+
+  """An action requested for transaction."""
   TRANSACTION_ACTION_REQUEST
+
+  """A new translation is created."""
   TRANSLATION_CREATED
+
+  """A translation is updated."""
   TRANSLATION_UPDATED
 
   """A new warehouse created."""
@@ -22980,29 +23351,104 @@ enum WebhookEventTypeEnum {
 
   """An observability event is created."""
   OBSERVABILITY
+
+  """Authorize payment."""
   PAYMENT_AUTHORIZE
+
+  """Capture payment."""
   PAYMENT_CAPTURE
+
+  """Confirm payment."""
   PAYMENT_CONFIRM
+
+  """Listing available payment gateways."""
   PAYMENT_LIST_GATEWAYS
+
+  """Process payment."""
   PAYMENT_PROCESS
+
+  """Refund payment."""
   PAYMENT_REFUND
+
+  """Void payment."""
   PAYMENT_VOID
+
+  """
+  Event called for checkout tax calculation.
+  
+  Added in Saleor 3.6.
+  
+  Note: this API is currently in Feature Preview and can be subject to changes at later point.
+  """
+  CHECKOUT_CALCULATE_TAXES
+
+  """
+  Event called for order tax calculation.
+  
+  Added in Saleor 3.6.
+  
+  Note: this API is currently in Feature Preview and can be subject to changes at later point.
+  """
+  ORDER_CALCULATE_TAXES
+
+  """Fetch external shipping methods for checkout."""
   SHIPPING_LIST_METHODS_FOR_CHECKOUT
+
+  """Filter shipping methods for order."""
   ORDER_FILTER_SHIPPING_METHODS
+
+  """Filter shipping methods for checkout."""
   CHECKOUT_FILTER_SHIPPING_METHODS
 }
 
 """Enum determining type of webhook."""
 enum WebhookEventTypeSyncEnum {
+  """Authorize payment."""
   PAYMENT_AUTHORIZE
+
+  """Capture payment."""
   PAYMENT_CAPTURE
+
+  """Confirm payment."""
   PAYMENT_CONFIRM
+
+  """Listing available payment gateways."""
   PAYMENT_LIST_GATEWAYS
+
+  """Process payment."""
   PAYMENT_PROCESS
+
+  """Refund payment."""
   PAYMENT_REFUND
+
+  """Void payment."""
   PAYMENT_VOID
+
+  """
+  Event called for checkout tax calculation.
+  
+  Added in Saleor 3.6.
+  
+  Note: this API is currently in Feature Preview and can be subject to changes at later point.
+  """
+  CHECKOUT_CALCULATE_TAXES
+
+  """
+  Event called for order tax calculation.
+  
+  Added in Saleor 3.6.
+  
+  Note: this API is currently in Feature Preview and can be subject to changes at later point.
+  """
+  ORDER_CALCULATE_TAXES
+
+  """Fetch external shipping methods for checkout."""
   SHIPPING_LIST_METHODS_FOR_CHECKOUT
+
+  """Filter shipping methods for order."""
   ORDER_FILTER_SHIPPING_METHODS
+
+  """Filter shipping methods for checkout."""
   CHECKOUT_FILTER_SHIPPING_METHODS
 }
 
@@ -23079,6 +23525,9 @@ enum WebhookSampleEventTypeEnum {
   PAGE_TYPE_CREATED
   PAGE_TYPE_UPDATED
   PAGE_TYPE_DELETED
+  PERMISSION_GROUP_CREATED
+  PERMISSION_GROUP_UPDATED
+  PERMISSION_GROUP_DELETED
   SHIPPING_PRICE_CREATED
   SHIPPING_PRICE_UPDATED
   SHIPPING_PRICE_DELETED

src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx

@@ -235,7 +235,7 @@ const MultiAutocompleteSelectFieldComponent: React.FC<MultiAutocompleteSelectFie
                       open={isOpen}
                       style={{
                         width: anchor.current.clientWidth,
-                        zIndex: 1301,
+                        zIndex: 10,
                       }}
                       placement={popperPlacement}
                     >

src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx

@@ -6,6 +6,7 @@ import {
   Typography,
 } from "@material-ui/core";
 import AddIcon from "@material-ui/icons/Add";
+import HorizontalSpacer from "@saleor/apps/components/HorizontalSpacer";
 import Checkbox from "@saleor/components/Checkbox";
 import useElementScroll, {
   isScrolledToBottom,
@@ -14,7 +15,7 @@ import { makeStyles } from "@saleor/macaw-ui";
 import { FetchMoreProps } from "@saleor/types";
 import classNames from "classnames";
 import { GetItemPropsOptions } from "downshift";
-import React from "react";
+import React, { ReactNode } from "react";
 import SVG from "react-inlinesvg";
 import { FormattedMessage } from "react-intl";
 
@@ -32,6 +33,7 @@ export interface MultiAutocompleteChoiceType {
   label: string;
   value: any;
   disabled?: boolean;
+  badge?: ReactNode;
 }
 export interface MultiAutocompleteSelectFieldContentProps
   extends Partial<FetchMoreProps> {
@@ -123,6 +125,7 @@ const useStyles = makeStyles(
       whiteSpace: "normal",
     },
     menuItemLabel: {
+      display: "flex",
       overflowWrap: "break-word",
     },
     progress: {},
@@ -264,7 +267,11 @@ const MultiAutocompleteSelectFieldContent: React.FC<MultiAutocompleteSelectField
                   disabled={value.disabled}
                   disableRipple
                 />
-                <span className={classes.menuItemLabel}>{value.label}</span>
+                <span className={classes.menuItemLabel}>
+                  {value.badge}
+                  {value.badge && <HorizontalSpacer spacing={1} />}
+                  {value.label}
+                </span>
               </MenuItem>
             ))}
             {displayValues?.length > 0 && choices.length > 0 && (
@@ -297,7 +304,10 @@ const MultiAutocompleteSelectFieldContent: React.FC<MultiAutocompleteSelectField
                     className={classes.checkbox}
                     disableRipple
                   />
+
                   <span className={classes.menuItemLabel}>
+                    {suggestion.badge}
+                    {suggestion.badge && <HorizontalSpacer spacing={1} />}
                     {suggestion.label}
                   </span>
                 </MenuItem>

src/graphql/fragmentTypes.generated.ts

@@ -69,6 +69,9 @@
       "PageTypeDeleted",
       "PageTypeUpdated",
       "PageUpdated",
+      "PermissionGroupCreated",
+      "PermissionGroupDeleted",
+      "PermissionGroupUpdated",
       "ProductCreated",
       "ProductDeleted",
       "ProductUpdated",

src/graphql/typePolicies.generated.ts

@@ -716,16 +716,18 @@ export type CategoryUpdatedFieldPolicy = {
 	recipient?: FieldPolicy<any> | FieldReadFunction<any>,
 	category?: FieldPolicy<any> | FieldReadFunction<any>
 };
-export type ChannelKeySpecifier = ('id' | 'name' | 'isActive' | 'currencyCode' | 'slug' | 'hasOrders' | 'defaultCountry' | 'warehouses' | ChannelKeySpecifier)[];
+export type ChannelKeySpecifier = ('id' | 'slug' | 'name' | 'isActive' | 'currencyCode' | 'hasOrders' | 'defaultCountry' | 'warehouses' | 'countries' | 'availableShippingMethodsPerCountry' | ChannelKeySpecifier)[];
 export type ChannelFieldPolicy = {
 	id?: FieldPolicy<any> | FieldReadFunction<any>,
+	slug?: FieldPolicy<any> | FieldReadFunction<any>,
 	name?: FieldPolicy<any> | FieldReadFunction<any>,
 	isActive?: FieldPolicy<any> | FieldReadFunction<any>,
 	currencyCode?: FieldPolicy<any> | FieldReadFunction<any>,
-	slug?: FieldPolicy<any> | FieldReadFunction<any>,
 	hasOrders?: FieldPolicy<any> | FieldReadFunction<any>,
 	defaultCountry?: FieldPolicy<any> | FieldReadFunction<any>,
-	warehouses?: FieldPolicy<any> | FieldReadFunction<any>
+	warehouses?: FieldPolicy<any> | FieldReadFunction<any>,
+	countries?: FieldPolicy<any> | FieldReadFunction<any>,
+	availableShippingMethodsPerCountry?: FieldPolicy<any> | FieldReadFunction<any>
 };
 export type ChannelActivateKeySpecifier = ('channel' | 'channelErrors' | 'errors' | ChannelActivateKeySpecifier)[];
 export type ChannelActivateFieldPolicy = {
@@ -3240,12 +3242,28 @@ export type PermissionGroupCreateFieldPolicy = {
 	errors?: FieldPolicy<any> | FieldReadFunction<any>,
 	group?: FieldPolicy<any> | FieldReadFunction<any>
 };
+export type PermissionGroupCreatedKeySpecifier = ('issuedAt' | 'version' | 'issuingPrincipal' | 'recipient' | 'permissionGroup' | PermissionGroupCreatedKeySpecifier)[];
+export type PermissionGroupCreatedFieldPolicy = {
+	issuedAt?: FieldPolicy<any> | FieldReadFunction<any>,
+	version?: FieldPolicy<any> | FieldReadFunction<any>,
+	issuingPrincipal?: FieldPolicy<any> | FieldReadFunction<any>,
+	recipient?: FieldPolicy<any> | FieldReadFunction<any>,
+	permissionGroup?: FieldPolicy<any> | FieldReadFunction<any>
+};
 export type PermissionGroupDeleteKeySpecifier = ('permissionGroupErrors' | 'errors' | 'group' | PermissionGroupDeleteKeySpecifier)[];
 export type PermissionGroupDeleteFieldPolicy = {
 	permissionGroupErrors?: FieldPolicy<any> | FieldReadFunction<any>,
 	errors?: FieldPolicy<any> | FieldReadFunction<any>,
 	group?: FieldPolicy<any> | FieldReadFunction<any>
 };
+export type PermissionGroupDeletedKeySpecifier = ('issuedAt' | 'version' | 'issuingPrincipal' | 'recipient' | 'permissionGroup' | PermissionGroupDeletedKeySpecifier)[];
+export type PermissionGroupDeletedFieldPolicy = {
+	issuedAt?: FieldPolicy<any> | FieldReadFunction<any>,
+	version?: FieldPolicy<any> | FieldReadFunction<any>,
+	issuingPrincipal?: FieldPolicy<any> | FieldReadFunction<any>,
+	recipient?: FieldPolicy<any> | FieldReadFunction<any>,
+	permissionGroup?: FieldPolicy<any> | FieldReadFunction<any>
+};
 export type PermissionGroupErrorKeySpecifier = ('field' | 'message' | 'code' | 'permissions' | 'users' | PermissionGroupErrorKeySpecifier)[];
 export type PermissionGroupErrorFieldPolicy = {
 	field?: FieldPolicy<any> | FieldReadFunction<any>,
@@ -3260,6 +3278,14 @@ export type PermissionGroupUpdateFieldPolicy = {
 	errors?: FieldPolicy<any> | FieldReadFunction<any>,
 	group?: FieldPolicy<any> | FieldReadFunction<any>
 };
+export type PermissionGroupUpdatedKeySpecifier = ('issuedAt' | 'version' | 'issuingPrincipal' | 'recipient' | 'permissionGroup' | PermissionGroupUpdatedKeySpecifier)[];
+export type PermissionGroupUpdatedFieldPolicy = {
+	issuedAt?: FieldPolicy<any> | FieldReadFunction<any>,
+	version?: FieldPolicy<any> | FieldReadFunction<any>,
+	issuingPrincipal?: FieldPolicy<any> | FieldReadFunction<any>,
+	recipient?: FieldPolicy<any> | FieldReadFunction<any>,
+	permissionGroup?: FieldPolicy<any> | FieldReadFunction<any>
+};
 export type PluginKeySpecifier = ('id' | 'name' | 'description' | 'globalConfiguration' | 'channelConfigurations' | PluginKeySpecifier)[];
 export type PluginFieldPolicy = {
 	id?: FieldPolicy<any> | FieldReadFunction<any>,
@@ -3818,7 +3844,7 @@ export type ProductVariantUpdatedFieldPolicy = {
 	recipient?: FieldPolicy<any> | FieldReadFunction<any>,
 	productVariant?: FieldPolicy<any> | FieldReadFunction<any>
 };
-export type QueryKeySpecifier = ('webhook' | 'webhookEvents' | 'webhookSamplePayload' | 'warehouse' | 'warehouses' | 'translations' | 'translation' | 'stock' | 'stocks' | 'shop' | 'orderSettings' | 'giftCardSettings' | 'shippingZone' | 'shippingZones' | 'digitalContent' | 'digitalContents' | 'categories' | 'category' | 'collection' | 'collections' | 'product' | 'products' | 'productType' | 'productTypes' | 'productVariant' | 'productVariants' | 'reportProductSales' | 'payment' | 'payments' | 'page' | 'pages' | 'pageType' | 'pageTypes' | 'homepageEvents' | 'order' | 'orders' | 'draftOrders' | 'ordersTotal' | 'orderByToken' | 'menu' | 'menus' | 'menuItem' | 'menuItems' | 'giftCard' | 'giftCards' | 'giftCardCurrencies' | 'giftCardTags' | 'plugin' | 'plugins' | 'sale' | 'sales' | 'voucher' | 'vouchers' | 'exportFile' | 'exportFiles' | 'taxTypes' | 'checkout' | 'checkouts' | 'checkoutLines' | 'channel' | 'channels' | 'attributes' | 'attribute' | 'appsInstallations' | 'apps' | 'app' | 'appExtensions' | 'appExtension' | 'addressValidationRules' | 'address' | 'customers' | 'permissionGroups' | 'permissionGroup' | 'me' | 'staffUsers' | 'user' | '_entities' | '_service' | QueryKeySpecifier)[];
+export type QueryKeySpecifier = ('webhook' | 'webhookEvents' | 'webhookSamplePayload' | 'warehouse' | 'warehouses' | 'translations' | 'translation' | 'stock' | 'stocks' | 'shop' | 'orderSettings' | 'giftCardSettings' | 'shippingZone' | 'shippingZones' | 'digitalContent' | 'digitalContents' | 'categories' | 'category' | 'collection' | 'collections' | 'product' | 'products' | 'productType' | 'productTypes' | 'productVariant' | 'productVariants' | 'reportProductSales' | 'payment' | 'payments' | 'transaction' | 'page' | 'pages' | 'pageType' | 'pageTypes' | 'homepageEvents' | 'order' | 'orders' | 'draftOrders' | 'ordersTotal' | 'orderByToken' | 'menu' | 'menus' | 'menuItem' | 'menuItems' | 'giftCard' | 'giftCards' | 'giftCardCurrencies' | 'giftCardTags' | 'plugin' | 'plugins' | 'sale' | 'sales' | 'voucher' | 'vouchers' | 'exportFile' | 'exportFiles' | 'taxTypes' | 'checkout' | 'checkouts' | 'checkoutLines' | 'channel' | 'channels' | 'attributes' | 'attribute' | 'appsInstallations' | 'apps' | 'app' | 'appExtensions' | 'appExtension' | 'addressValidationRules' | 'address' | 'customers' | 'permissionGroups' | 'permissionGroup' | 'me' | 'staffUsers' | 'user' | '_entities' | '_service' | QueryKeySpecifier)[];
 export type QueryFieldPolicy = {
 	webhook?: FieldPolicy<any> | FieldReadFunction<any>,
 	webhookEvents?: FieldPolicy<any> | FieldReadFunction<any>,
@@ -3849,6 +3875,7 @@ export type QueryFieldPolicy = {
 	reportProductSales?: FieldPolicy<any> | FieldReadFunction<any>,
 	payment?: FieldPolicy<any> | FieldReadFunction<any>,
 	payments?: FieldPolicy<any> | FieldReadFunction<any>,
+	transaction?: FieldPolicy<any> | FieldReadFunction<any>,
 	page?: FieldPolicy<any> | FieldReadFunction<any>,
 	pages?: FieldPolicy<any> | FieldReadFunction<any>,
 	pageType?: FieldPolicy<any> | FieldReadFunction<any>,
@@ -4161,6 +4188,11 @@ export type ShippingMethodTypeFieldPolicy = {
 	maximumDeliveryDays?: FieldPolicy<any> | FieldReadFunction<any>,
 	minimumDeliveryDays?: FieldPolicy<any> | FieldReadFunction<any>
 };
+export type ShippingMethodsPerCountryKeySpecifier = ('countryCode' | 'shippingMethods' | ShippingMethodsPerCountryKeySpecifier)[];
+export type ShippingMethodsPerCountryFieldPolicy = {
+	countryCode?: FieldPolicy<any> | FieldReadFunction<any>,
+	shippingMethods?: FieldPolicy<any> | FieldReadFunction<any>
+};
 export type ShippingPriceBulkDeleteKeySpecifier = ('count' | 'shippingErrors' | 'errors' | ShippingPriceBulkDeleteKeySpecifier)[];
 export type ShippingPriceBulkDeleteFieldPolicy = {
 	count?: FieldPolicy<any> | FieldReadFunction<any>,
@@ -4570,7 +4602,7 @@ export type TransactionEventFieldPolicy = {
 	reference?: FieldPolicy<any> | FieldReadFunction<any>,
 	name?: FieldPolicy<any> | FieldReadFunction<any>
 };
-export type TransactionItemKeySpecifier = ('id' | 'privateMetadata' | 'privateMetafield' | 'privateMetafields' | 'metadata' | 'metafield' | 'metafields' | 'createdAt' | 'modifiedAt' | 'actions' | 'authorizedAmount' | 'refundedAmount' | 'voidedAmount' | 'chargedAmount' | 'status' | 'type' | 'reference' | 'events' | TransactionItemKeySpecifier)[];
+export type TransactionItemKeySpecifier = ('id' | 'privateMetadata' | 'privateMetafield' | 'privateMetafields' | 'metadata' | 'metafield' | 'metafields' | 'createdAt' | 'modifiedAt' | 'actions' | 'authorizedAmount' | 'refundedAmount' | 'voidedAmount' | 'chargedAmount' | 'status' | 'type' | 'reference' | 'order' | 'events' | TransactionItemKeySpecifier)[];
 export type TransactionItemFieldPolicy = {
 	id?: FieldPolicy<any> | FieldReadFunction<any>,
 	privateMetadata?: FieldPolicy<any> | FieldReadFunction<any>,
@@ -4589,6 +4621,7 @@ export type TransactionItemFieldPolicy = {
 	status?: FieldPolicy<any> | FieldReadFunction<any>,
 	type?: FieldPolicy<any> | FieldReadFunction<any>,
 	reference?: FieldPolicy<any> | FieldReadFunction<any>,
+	order?: FieldPolicy<any> | FieldReadFunction<any>,
 	events?: FieldPolicy<any> | FieldReadFunction<any>
 };
 export type TransactionRequestActionKeySpecifier = ('transaction' | 'errors' | TransactionRequestActionKeySpecifier)[];
@@ -6598,10 +6631,18 @@ export type StrictTypedTypePolicies = {
 		keyFields?: false | PermissionGroupCreateKeySpecifier | (() => undefined | PermissionGroupCreateKeySpecifier),
 		fields?: PermissionGroupCreateFieldPolicy,
 	},
+	PermissionGroupCreated?: Omit<TypePolicy, "fields" | "keyFields"> & {
+		keyFields?: false | PermissionGroupCreatedKeySpecifier | (() => undefined | PermissionGroupCreatedKeySpecifier),
+		fields?: PermissionGroupCreatedFieldPolicy,
+	},
 	PermissionGroupDelete?: Omit<TypePolicy, "fields" | "keyFields"> & {
 		keyFields?: false | PermissionGroupDeleteKeySpecifier | (() => undefined | PermissionGroupDeleteKeySpecifier),
 		fields?: PermissionGroupDeleteFieldPolicy,
 	},
+	PermissionGroupDeleted?: Omit<TypePolicy, "fields" | "keyFields"> & {
+		keyFields?: false | PermissionGroupDeletedKeySpecifier | (() => undefined | PermissionGroupDeletedKeySpecifier),
+		fields?: PermissionGroupDeletedFieldPolicy,
+	},
 	PermissionGroupError?: Omit<TypePolicy, "fields" | "keyFields"> & {
 		keyFields?: false | PermissionGroupErrorKeySpecifier | (() => undefined | PermissionGroupErrorKeySpecifier),
 		fields?: PermissionGroupErrorFieldPolicy,
@@ -6610,6 +6651,10 @@ export type StrictTypedTypePolicies = {
 		keyFields?: false | PermissionGroupUpdateKeySpecifier | (() => undefined | PermissionGroupUpdateKeySpecifier),
 		fields?: PermissionGroupUpdateFieldPolicy,
 	},
+	PermissionGroupUpdated?: Omit<TypePolicy, "fields" | "keyFields"> & {
+		keyFields?: false | PermissionGroupUpdatedKeySpecifier | (() => undefined | PermissionGroupUpdatedKeySpecifier),
+		fields?: PermissionGroupUpdatedFieldPolicy,
+	},
 	Plugin?: Omit<TypePolicy, "fields" | "keyFields"> & {
 		keyFields?: false | PluginKeySpecifier | (() => undefined | PluginKeySpecifier),
 		fields?: PluginFieldPolicy,
@@ -7022,6 +7067,10 @@ export type StrictTypedTypePolicies = {
 		keyFields?: false | ShippingMethodTypeKeySpecifier | (() => undefined | ShippingMethodTypeKeySpecifier),
 		fields?: ShippingMethodTypeFieldPolicy,
 	},
+	ShippingMethodsPerCountry?: Omit<TypePolicy, "fields" | "keyFields"> & {
+		keyFields?: false | ShippingMethodsPerCountryKeySpecifier | (() => undefined | ShippingMethodsPerCountryKeySpecifier),
+		fields?: ShippingMethodsPerCountryFieldPolicy,
+	},
 	ShippingPriceBulkDelete?: Omit<TypePolicy, "fields" | "keyFields"> & {
 		keyFields?: false | ShippingPriceBulkDeleteKeySpecifier | (() => undefined | ShippingPriceBulkDeleteKeySpecifier),
 		fields?: ShippingPriceBulkDeleteFieldPolicy,

src/graphql/types.generated.ts

@@ -180,6 +180,9 @@ export type AppExtensionFilterInput = {
 
 /** All places where app extension can be mounted. */
 export enum AppExtensionMountEnum {
+  CUSTOMER_OVERVIEW_CREATE = 'CUSTOMER_OVERVIEW_CREATE',
+  CUSTOMER_OVERVIEW_MORE_ACTIONS = 'CUSTOMER_OVERVIEW_MORE_ACTIONS',
+  CUSTOMER_DETAILS_MORE_ACTIONS = 'CUSTOMER_DETAILS_MORE_ACTIONS',
   PRODUCT_OVERVIEW_CREATE = 'PRODUCT_OVERVIEW_CREATE',
   PRODUCT_OVERVIEW_MORE_ACTIONS = 'PRODUCT_OVERVIEW_MORE_ACTIONS',
   PRODUCT_DETAILS_MORE_ACTIONS = 'PRODUCT_DETAILS_MORE_ACTIONS',
@@ -682,6 +685,15 @@ export type ChannelUpdateInput = {
   removeWarehouses?: InputMaybe<Array<Scalars['ID']>>;
 };
 
+export type CheckoutAddressValidationRules = {
+  /** Determines if an error should be raised when the provided address doesn't have all the required fields. The list of required fields is dynamic and depends on the country code (use the `addressValidationRules` query to fetch them). Note: country code is mandatory for all addresses regardless of the rules provided in this input. */
+  checkRequiredFields?: InputMaybe<Scalars['Boolean']>;
+  /** Determines if an error should be raised when the provided address doesn't match the expected format. Example: using letters for postal code when the numbers are expected. */
+  checkFieldsFormat?: InputMaybe<Scalars['Boolean']>;
+  /** Determines if Saleor should apply normalization on address fields. Example: converting city field to uppercase letters. */
+  enableFieldsNormalization?: InputMaybe<Scalars['Boolean']>;
+};
+
 export type CheckoutCreateInput = {
   /** Slug of a channel in which to create a checkout. */
   channel?: InputMaybe<Scalars['String']>;
@@ -695,6 +707,14 @@ export type CheckoutCreateInput = {
   billingAddress?: InputMaybe<AddressInput>;
   /** Checkout language code. */
   languageCode?: InputMaybe<LanguageCodeEnum>;
+  /**
+   * The checkout validation rules that can be changed.
+   *
+   * Added in Saleor 3.5.
+   *
+   * Note: this API is currently in Feature Preview and can be subject to changes at later point.
+   */
+  validationRules?: InputMaybe<CheckoutValidationRules>;
 };
 
 /** An enumeration. */
@@ -782,6 +802,13 @@ export type CheckoutSortingInput = {
   field: CheckoutSortField;
 };
 
+export type CheckoutValidationRules = {
+  /** The validation rules that can be applied to provided shipping address data. */
+  shippingAddress?: InputMaybe<CheckoutAddressValidationRules>;
+  /** The validation rules that can be applied to provided billing address data. */
+  billingAddress?: InputMaybe<CheckoutAddressValidationRules>;
+};
+
 export type CollectionChannelListingUpdateInput = {
   /** List of channels to which the collection should be assigned. */
   addChannels?: InputMaybe<Array<PublishableChannelListingInput>>;
@@ -1192,6 +1219,8 @@ export type CountryFilterInput = {
 /** An enumeration. */
 export enum CustomerEventsEnum {
   ACCOUNT_CREATED = 'ACCOUNT_CREATED',
+  ACCOUNT_ACTIVATED = 'ACCOUNT_ACTIVATED',
+  ACCOUNT_DEACTIVATED = 'ACCOUNT_DEACTIVATED',
   PASSWORD_RESET_LINK_SENT = 'PASSWORD_RESET_LINK_SENT',
   PASSWORD_RESET = 'PASSWORD_RESET',
   EMAIL_CHANGED_REQUEST = 'EMAIL_CHANGED_REQUEST',
@@ -3412,7 +3441,8 @@ export enum PermissionEnum {
   MANAGE_SETTINGS = 'MANAGE_SETTINGS',
   MANAGE_TRANSLATIONS = 'MANAGE_TRANSLATIONS',
   MANAGE_CHECKOUTS = 'MANAGE_CHECKOUTS',
-  HANDLE_CHECKOUTS = 'HANDLE_CHECKOUTS'
+  HANDLE_CHECKOUTS = 'HANDLE_CHECKOUTS',
+  HANDLE_TAXES = 'HANDLE_TAXES'
 }
 
 export type PermissionGroupCreateInput = {
@@ -3688,14 +3718,18 @@ export type ProductFilterInput = {
   categories?: InputMaybe<Array<Scalars['ID']>>;
   hasCategory?: InputMaybe<Scalars['Boolean']>;
   attributes?: InputMaybe<Array<AttributeInput>>;
+  /** Filter by variants having specific stock status. */
   stockAvailability?: InputMaybe<StockAvailability>;
   stocks?: InputMaybe<ProductStockFilterInput>;
   search?: InputMaybe<Scalars['String']>;
   metadata?: InputMaybe<Array<MetadataFilter>>;
   price?: InputMaybe<PriceRangeInput>;
+  /** Filter by the lowest variant price after discounts. */
   minimalPrice?: InputMaybe<PriceRangeInput>;
+  /** Filter by when was the most recent update. */
   updatedAt?: InputMaybe<DateTimeRangeInput>;
   productTypes?: InputMaybe<Array<Scalars['ID']>>;
+  /** Filter on whether product is a gift card or not. */
   giftCard?: InputMaybe<Scalars['Boolean']>;
   ids?: InputMaybe<Array<Scalars['ID']>>;
   hasPreorderedVariants?: InputMaybe<Scalars['Boolean']>;
@@ -4443,6 +4477,11 @@ export enum StorePaymentMethodEnum {
   NONE = 'NONE'
 }
 
+/** An enumeration. */
+export enum ThumbnailFormatEnum {
+  WEBP = 'WEBP'
+}
+
 export type TimePeriodInputType = {
   /** The length of the period. */
   amount: Scalars['Int'];
@@ -4718,6 +4757,7 @@ export type VoucherFilterInput = {
   started?: InputMaybe<DateTimeRangeInput>;
   search?: InputMaybe<Scalars['String']>;
   metadata?: InputMaybe<Array<MetadataFilter>>;
+  ids?: InputMaybe<Array<Scalars['ID']>>;
 };
 
 export type VoucherInput = {
@@ -4996,12 +5036,19 @@ export enum WebhookEventTypeAsyncEnum {
   ORDER_CANCELLED = 'ORDER_CANCELLED',
   /** An order is fulfilled. */
   ORDER_FULFILLED = 'ORDER_FULFILLED',
+  /** A draft order is created. */
   DRAFT_ORDER_CREATED = 'DRAFT_ORDER_CREATED',
+  /** A draft order is updated. */
   DRAFT_ORDER_UPDATED = 'DRAFT_ORDER_UPDATED',
+  /** A draft order is deleted. */
   DRAFT_ORDER_DELETED = 'DRAFT_ORDER_DELETED',
+  /** A sale is created. */
   SALE_CREATED = 'SALE_CREATED',
+  /** A sale is updated. */
   SALE_UPDATED = 'SALE_UPDATED',
+  /** A sale is deleted. */
   SALE_DELETED = 'SALE_DELETED',
+  /** A sale is activated or deactivated. */
   SALE_TOGGLE = 'SALE_TOGGLE',
   /** An invoice for order requested. */
   INVOICE_REQUESTED = 'INVOICE_REQUESTED',
@@ -5033,7 +5080,9 @@ export enum WebhookEventTypeAsyncEnum {
   PRODUCT_VARIANT_UPDATED = 'PRODUCT_VARIANT_UPDATED',
   /** A product variant is deleted. */
   PRODUCT_VARIANT_DELETED = 'PRODUCT_VARIANT_DELETED',
+  /** A product variant is out of stock. */
   PRODUCT_VARIANT_OUT_OF_STOCK = 'PRODUCT_VARIANT_OUT_OF_STOCK',
+  /** A product variant is back in stock. */
   PRODUCT_VARIANT_BACK_IN_STOCK = 'PRODUCT_VARIANT_BACK_IN_STOCK',
   /** A new checkout is created. */
   CHECKOUT_CREATED = 'CHECKOUT_CREATED',
@@ -5057,6 +5106,12 @@ export enum WebhookEventTypeAsyncEnum {
   PAGE_TYPE_UPDATED = 'PAGE_TYPE_UPDATED',
   /** A page type is deleted. */
   PAGE_TYPE_DELETED = 'PAGE_TYPE_DELETED',
+  /** A new permission group is created. */
+  PERMISSION_GROUP_CREATED = 'PERMISSION_GROUP_CREATED',
+  /** A permission group is updated. */
+  PERMISSION_GROUP_UPDATED = 'PERMISSION_GROUP_UPDATED',
+  /** A permission group is deleted. */
+  PERMISSION_GROUP_DELETED = 'PERMISSION_GROUP_DELETED',
   /** A new shipping price is created. */
   SHIPPING_PRICE_CREATED = 'SHIPPING_PRICE_CREATED',
   /** A shipping price is updated. */
@@ -5069,12 +5124,17 @@ export enum WebhookEventTypeAsyncEnum {
   SHIPPING_ZONE_UPDATED = 'SHIPPING_ZONE_UPDATED',
   /** A shipping zone is deleted. */
   SHIPPING_ZONE_DELETED = 'SHIPPING_ZONE_DELETED',
-  /** A staff user is deleted */
+  /** A new staff user is created. */
   STAFF_CREATED = 'STAFF_CREATED',
+  /** A staff user is updated. */
   STAFF_UPDATED = 'STAFF_UPDATED',
+  /** A staff user is deleted. */
   STAFF_DELETED = 'STAFF_DELETED',
+  /** An action requested for transaction. */
   TRANSACTION_ACTION_REQUEST = 'TRANSACTION_ACTION_REQUEST',
+  /** A new translation is created. */
   TRANSLATION_CREATED = 'TRANSLATION_CREATED',
+  /** A translation is updated. */
   TRANSLATION_UPDATED = 'TRANSLATION_UPDATED',
   /** A new warehouse created. */
   WAREHOUSE_CREATED = 'WAREHOUSE_CREATED',
@@ -5168,12 +5228,19 @@ export enum WebhookEventTypeEnum {
   ORDER_CANCELLED = 'ORDER_CANCELLED',
   /** An order is fulfilled. */
   ORDER_FULFILLED = 'ORDER_FULFILLED',
+  /** A draft order is created. */
   DRAFT_ORDER_CREATED = 'DRAFT_ORDER_CREATED',
+  /** A draft order is updated. */
   DRAFT_ORDER_UPDATED = 'DRAFT_ORDER_UPDATED',
+  /** A draft order is deleted. */
   DRAFT_ORDER_DELETED = 'DRAFT_ORDER_DELETED',
+  /** A sale is created. */
   SALE_CREATED = 'SALE_CREATED',
+  /** A sale is updated. */
   SALE_UPDATED = 'SALE_UPDATED',
+  /** A sale is deleted. */
   SALE_DELETED = 'SALE_DELETED',
+  /** A sale is activated or deactivated. */
   SALE_TOGGLE = 'SALE_TOGGLE',
   /** An invoice for order requested. */
   INVOICE_REQUESTED = 'INVOICE_REQUESTED',
@@ -5205,7 +5272,9 @@ export enum WebhookEventTypeEnum {
   PRODUCT_VARIANT_UPDATED = 'PRODUCT_VARIANT_UPDATED',
   /** A product variant is deleted. */
   PRODUCT_VARIANT_DELETED = 'PRODUCT_VARIANT_DELETED',
+  /** A product variant is out of stock. */
   PRODUCT_VARIANT_OUT_OF_STOCK = 'PRODUCT_VARIANT_OUT_OF_STOCK',
+  /** A product variant is back in stock. */
   PRODUCT_VARIANT_BACK_IN_STOCK = 'PRODUCT_VARIANT_BACK_IN_STOCK',
   /** A new checkout is created. */
   CHECKOUT_CREATED = 'CHECKOUT_CREATED',
@@ -5229,6 +5298,12 @@ export enum WebhookEventTypeEnum {
   PAGE_TYPE_UPDATED = 'PAGE_TYPE_UPDATED',
   /** A page type is deleted. */
   PAGE_TYPE_DELETED = 'PAGE_TYPE_DELETED',
+  /** A new permission group is created. */
+  PERMISSION_GROUP_CREATED = 'PERMISSION_GROUP_CREATED',
+  /** A permission group is updated. */
+  PERMISSION_GROUP_UPDATED = 'PERMISSION_GROUP_UPDATED',
+  /** A permission group is deleted. */
+  PERMISSION_GROUP_DELETED = 'PERMISSION_GROUP_DELETED',
   /** A new shipping price is created. */
   SHIPPING_PRICE_CREATED = 'SHIPPING_PRICE_CREATED',
   /** A shipping price is updated. */
@@ -5241,12 +5316,17 @@ export enum WebhookEventTypeEnum {
   SHIPPING_ZONE_UPDATED = 'SHIPPING_ZONE_UPDATED',
   /** A shipping zone is deleted. */
   SHIPPING_ZONE_DELETED = 'SHIPPING_ZONE_DELETED',
-  /** A staff user is deleted */
+  /** A new staff user is created. */
   STAFF_CREATED = 'STAFF_CREATED',
+  /** A staff user is updated. */
   STAFF_UPDATED = 'STAFF_UPDATED',
+  /** A staff user is deleted. */
   STAFF_DELETED = 'STAFF_DELETED',
+  /** An action requested for transaction. */
   TRANSACTION_ACTION_REQUEST = 'TRANSACTION_ACTION_REQUEST',
+  /** A new translation is created. */
   TRANSLATION_CREATED = 'TRANSLATION_CREATED',
+  /** A translation is updated. */
   TRANSLATION_UPDATED = 'TRANSLATION_UPDATED',
   /** A new warehouse created. */
   WAREHOUSE_CREATED = 'WAREHOUSE_CREATED',
@@ -5262,29 +5342,81 @@ export enum WebhookEventTypeEnum {
   VOUCHER_DELETED = 'VOUCHER_DELETED',
   /** An observability event is created. */
   OBSERVABILITY = 'OBSERVABILITY',
+  /** Authorize payment. */
   PAYMENT_AUTHORIZE = 'PAYMENT_AUTHORIZE',
+  /** Capture payment. */
   PAYMENT_CAPTURE = 'PAYMENT_CAPTURE',
+  /** Confirm payment. */
   PAYMENT_CONFIRM = 'PAYMENT_CONFIRM',
+  /** Listing available payment gateways. */
   PAYMENT_LIST_GATEWAYS = 'PAYMENT_LIST_GATEWAYS',
+  /** Process payment. */
   PAYMENT_PROCESS = 'PAYMENT_PROCESS',
+  /** Refund payment. */
   PAYMENT_REFUND = 'PAYMENT_REFUND',
+  /** Void payment. */
   PAYMENT_VOID = 'PAYMENT_VOID',
+  /**
+   * Event called for checkout tax calculation.
+   *
+   * Added in Saleor 3.6.
+   *
+   * Note: this API is currently in Feature Preview and can be subject to changes at later point.
+   */
+  CHECKOUT_CALCULATE_TAXES = 'CHECKOUT_CALCULATE_TAXES',
+  /**
+   * Event called for order tax calculation.
+   *
+   * Added in Saleor 3.6.
+   *
+   * Note: this API is currently in Feature Preview and can be subject to changes at later point.
+   */
+  ORDER_CALCULATE_TAXES = 'ORDER_CALCULATE_TAXES',
+  /** Fetch external shipping methods for checkout. */
   SHIPPING_LIST_METHODS_FOR_CHECKOUT = 'SHIPPING_LIST_METHODS_FOR_CHECKOUT',
+  /** Filter shipping methods for order. */
   ORDER_FILTER_SHIPPING_METHODS = 'ORDER_FILTER_SHIPPING_METHODS',
+  /** Filter shipping methods for checkout. */
   CHECKOUT_FILTER_SHIPPING_METHODS = 'CHECKOUT_FILTER_SHIPPING_METHODS'
 }
 
 /** Enum determining type of webhook. */
 export enum WebhookEventTypeSyncEnum {
+  /** Authorize payment. */
   PAYMENT_AUTHORIZE = 'PAYMENT_AUTHORIZE',
+  /** Capture payment. */
   PAYMENT_CAPTURE = 'PAYMENT_CAPTURE',
+  /** Confirm payment. */
   PAYMENT_CONFIRM = 'PAYMENT_CONFIRM',
+  /** Listing available payment gateways. */
   PAYMENT_LIST_GATEWAYS = 'PAYMENT_LIST_GATEWAYS',
+  /** Process payment. */
   PAYMENT_PROCESS = 'PAYMENT_PROCESS',
+  /** Refund payment. */
   PAYMENT_REFUND = 'PAYMENT_REFUND',
+  /** Void payment. */
   PAYMENT_VOID = 'PAYMENT_VOID',
+  /**
+   * Event called for checkout tax calculation.
+   *
+   * Added in Saleor 3.6.
+   *
+   * Note: this API is currently in Feature Preview and can be subject to changes at later point.
+   */
+  CHECKOUT_CALCULATE_TAXES = 'CHECKOUT_CALCULATE_TAXES',
+  /**
+   * Event called for order tax calculation.
+   *
+   * Added in Saleor 3.6.
+   *
+   * Note: this API is currently in Feature Preview and can be subject to changes at later point.
+   */
+  ORDER_CALCULATE_TAXES = 'ORDER_CALCULATE_TAXES',
+  /** Fetch external shipping methods for checkout. */
   SHIPPING_LIST_METHODS_FOR_CHECKOUT = 'SHIPPING_LIST_METHODS_FOR_CHECKOUT',
+  /** Filter shipping methods for order. */
   ORDER_FILTER_SHIPPING_METHODS = 'ORDER_FILTER_SHIPPING_METHODS',
+  /** Filter shipping methods for checkout. */
   CHECKOUT_FILTER_SHIPPING_METHODS = 'CHECKOUT_FILTER_SHIPPING_METHODS'
 }
 
@@ -5361,6 +5493,9 @@ export enum WebhookSampleEventTypeEnum {
   PAGE_TYPE_CREATED = 'PAGE_TYPE_CREATED',
   PAGE_TYPE_UPDATED = 'PAGE_TYPE_UPDATED',
   PAGE_TYPE_DELETED = 'PAGE_TYPE_DELETED',
+  PERMISSION_GROUP_CREATED = 'PERMISSION_GROUP_CREATED',
+  PERMISSION_GROUP_UPDATED = 'PERMISSION_GROUP_UPDATED',
+  PERMISSION_GROUP_DELETED = 'PERMISSION_GROUP_DELETED',
   SHIPPING_PRICE_CREATED = 'SHIPPING_PRICE_CREATED',
   SHIPPING_PRICE_UPDATED = 'SHIPPING_PRICE_UPDATED',
   SHIPPING_PRICE_DELETED = 'SHIPPING_PRICE_DELETED',

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -26541,7 +26541,7 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details default 1`] = `
         </div>
       </div>
       <div
-        class="Grid-root-id Grid-default-id"
+        class="Grid-root-id Grid-uniform-id"
       >
         <div>
           <div
@@ -27041,7 +27041,7 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details form errors 1`] =
         </div>
       </div>
       <div
-        class="Grid-root-id Grid-default-id"
+        class="Grid-root-id Grid-uniform-id"
       >
         <div>
           <div
@@ -27546,7 +27546,7 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details loading 1`] = `
         </div>
       </div>
       <div
-        class="Grid-root-id Grid-default-id"
+        class="Grid-root-id Grid-uniform-id"
       >
         <div>
           <div
@@ -28051,7 +28051,7 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details undefined 1`] = `
         </div>
       </div>
       <div
-        class="Grid-root-id Grid-default-id"
+        class="Grid-root-id Grid-uniform-id"
       >
         <div>
           <div
@@ -28551,7 +28551,7 @@ exports[`Storyshots Views / Apps / Webhooks / Webhook details unnamed 1`] = `
         </div>
       </div>
       <div
-        class="Grid-root-id Grid-default-id"
+        class="Grid-root-id Grid-uniform-id"
       >
         <div>
           <div

src/webhooks/components/WebhookDetailsPage/WebhookDetailsPage.tsx

@@ -96,7 +96,7 @@ const WebhookDetailsPage: React.FC<WebhookDetailsPageProps> = ({
           <Container>
             <Backlink href={customAppUrl(appId)}>{appName}</Backlink>
             <PageHeader title={getHeaderTitle(intl, webhook)} />
-            <Grid>
+            <Grid variant="uniform">
               <div>
                 <WebhookInfo
                   data={data}

src/webhooks/utils.tsx

@@ -1,20 +1,31 @@
 import { MultiAutocompleteChoiceType } from "@saleor/components/MultiAutocompleteSelectField";
+import PreviewPill from "@saleor/components/PreviewPill";
 import {
   WebhookEventTypeAsyncEnum,
   WebhookEventTypeSyncEnum,
   WebhookFragment,
 } from "@saleor/graphql";
+import React from "react";
 
 export function isUnnamed(webhook: WebhookFragment): boolean {
   return ["", null].includes(webhook?.name);
 }
 
+type WebhookEventType = WebhookEventTypeSyncEnum | WebhookEventTypeAsyncEnum;
+
+const isWebhookInPreview = (webhook: WebhookEventType) =>
+  ([
+    WebhookEventTypeSyncEnum.CHECKOUT_CALCULATE_TAXES,
+    WebhookEventTypeSyncEnum.ORDER_CALCULATE_TAXES,
+  ] as WebhookEventType[]).includes(webhook);
+
 export function mapSyncEventsToChoices(
   events: WebhookEventTypeSyncEnum[],
 ): MultiAutocompleteChoiceType[] {
   return events.map(event => ({
     label: event,
     value: event,
+    badge: isWebhookInPreview(event) ? <PreviewPill /> : undefined,
   }));
 }