Add channel default country (#1330)

* Add channel default country (#1323)

* Add default country to channel

* Fix fixtures

* Update snapshots, extract messages

* Trigger deployment

* Update schema

* Update snapshots

* Trigger deployment

locale/defaultMessages.json

@@ -1514,9 +1514,9 @@
     "context": "channel settings",
     "string": "Channel Settings"
   },
-  "src_dot_channels_dot_components_dot_ChannelForm_dot_1843613796": {
+  "src_dot_channels_dot_components_dot_ChannelForm_dot_146559392": {
     "context": "selected currency",
-    "string": "Selected Currency"
+    "string": "Selected currency"
   },
   "src_dot_channels_dot_components_dot_ChannelForm_dot_2864204643": {
     "context": "button",
@@ -1526,10 +1526,6 @@
     "context": "channel slug",
     "string": "Slug"
   },
-  "src_dot_channels_dot_components_dot_ChannelForm_dot_3511613983": {
-    "context": "channel name",
-    "string": "Channel Name"
-  },
   "src_dot_channels_dot_components_dot_ChannelForm_dot_383867403": {
     "context": "button",
     "string": "Copy"
@@ -1538,6 +1534,13 @@
     "context": "channel currency",
     "string": "Currency"
   },
+  "src_dot_channels_dot_components_dot_ChannelForm_dot_3962880609": {
+    "string": "Default country"
+  },
+  "src_dot_channels_dot_components_dot_ChannelForm_dot_507892781": {
+    "context": "channel name",
+    "string": "Channel name"
+  },
   "src_dot_channels_dot_components_dot_ChannelPickerDialog_dot_2423186459": {
     "context": "dialog header",
     "string": "Select a channel"
@@ -7510,6 +7513,10 @@
     "context": "event",
     "string": "Product variant deleted"
   },
+  "src_dot_webhooks_dot_components_dot_WebhookEvents_dot_1594316266": {
+    "context": "event",
+    "string": "Fulfillment canceled"
+  },
   "src_dot_webhooks_dot_components_dot_WebhookEvents_dot_1606361075": {
     "context": "event",
     "string": "Order updated"

schema.graphql

@@ -906,6 +906,7 @@ type Channel implements Node {
   slug: String!
   currencyCode: String!
   hasOrders: Boolean!
+  defaultCountry: CountryDisplay!
 }
 
 type ChannelActivate {
@@ -925,6 +926,7 @@ input ChannelCreateInput {
   name: String!
   slug: String!
   currencyCode: String!
+  defaultCountry: CountryCode!
   addShippingZones: [ID!]
 }
 
@@ -973,6 +975,7 @@ input ChannelUpdateInput {
   isActive: Boolean
   name: String
   slug: String
+  defaultCountry: CountryCode
   addShippingZones: [ID!]
   removeShippingZones: [ID!]
 }
@@ -2159,7 +2162,7 @@ type FulfillmentCancel {
 }
 
 input FulfillmentCancelInput {
-  warehouseId: ID!
+  warehouseId: ID
 }
 
 type FulfillmentLine implements Node {
@@ -3702,7 +3705,7 @@ type Mutation {
   orderCapture(amount: PositiveDecimal!, id: ID!): OrderCapture
   orderConfirm(id: ID!): OrderConfirm
   orderFulfill(input: OrderFulfillInput!, order: ID): OrderFulfill
-  orderFulfillmentCancel(id: ID!, input: FulfillmentCancelInput!): FulfillmentCancel
+  orderFulfillmentCancel(id: ID!, input: FulfillmentCancelInput): FulfillmentCancel
   orderFulfillmentApprove(id: ID!, notifyCustomer: Boolean!): FulfillmentApprove
   orderFulfillmentUpdateTracking(id: ID!, input: FulfillmentUpdateTrackingInput!): FulfillmentUpdateTracking
   orderFulfillmentRefundProducts(input: OrderRefundProductsInput!, order: ID!): FulfillmentRefundProducts
@@ -7024,6 +7027,7 @@ enum WebhookEventTypeEnum {
   CHECKOUT_CREATED
   CHECKOUT_UPDATED
   FULFILLMENT_CREATED
+  FULFILLMENT_CANCELED
   NOTIFY_USER
   PAGE_CREATED
   PAGE_UPDATED
@@ -7060,6 +7064,7 @@ enum WebhookSampleEventTypeEnum {
   CHECKOUT_CREATED
   CHECKOUT_UPDATED
   FULFILLMENT_CREATED
+  FULFILLMENT_CANCELED
   NOTIFY_USER
   PAGE_CREATED
   PAGE_UPDATED

src/channels/components/ChannelForm/ChannelForm.stories.tsx

@@ -1,4 +1,6 @@
+import { countries } from "@saleor/fixtures";
 import Decorator from "@saleor/storybook/Decorator";
+import { CountryCode } from "@saleor/types/globalTypes";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
@@ -11,11 +13,15 @@ const props: ChannelFormProps = {
     shippingZonesIdsToAdd: [],
     shippingZonesIdsToRemove: [],
     name: "Test",
-    slug: "test"
+    slug: "test",
+    defaultCountry: CountryCode.PL
   },
   disabled: false,
   errors: [],
-  onChange: () => undefined
+  selectedCountryDisplayName: "Poland",
+  countries: countries.map(({ name, code }) => ({ label: name, value: code })),
+  onChange: () => undefined,
+  onDefaultCountryChange: () => undefined
 };
 
 storiesOf("Views / Channels / Channel form", module)

src/channels/components/ChannelForm/ChannelForm.tsx

@@ -16,6 +16,7 @@ import useClipboard from "@saleor/hooks/useClipboard";
 import { ChangeEvent } from "@saleor/hooks/useForm";
 import { FormChange } from "@saleor/hooks/useForm";
 import { commonMessages } from "@saleor/intl";
+import { CountryCode } from "@saleor/types/globalTypes";
 import { getFormErrors } from "@saleor/utils/errors";
 import getChannelsErrorMessage from "@saleor/utils/errors/channels";
 import React from "react";
@@ -30,6 +31,7 @@ export interface FormData {
   slug: string;
   shippingZonesIdsToAdd: string[];
   shippingZonesIdsToRemove: string[];
+  defaultCountry: CountryCode;
 }
 
 export interface ChannelFormProps {
@@ -38,8 +40,11 @@ export interface ChannelFormProps {
   currencyCodes?: SingleAutocompleteChoiceType[];
   errors: ChannelErrorFragment[];
   selectedCurrencyCode?: string;
+  selectedCountryDisplayName: string;
+  countries: SingleAutocompleteChoiceType[];
   onChange: FormChange;
   onCurrencyCodeChange?: (event: ChangeEvent) => void;
+  onDefaultCountryChange: (event: ChangeEvent) => void;
 }
 
 export const ChannelForm: React.FC<ChannelFormProps> = ({
@@ -48,8 +53,11 @@ export const ChannelForm: React.FC<ChannelFormProps> = ({
   disabled,
   errors,
   selectedCurrencyCode,
+  selectedCountryDisplayName,
+  countries,
   onChange,
-  onCurrencyCodeChange
+  onCurrencyCodeChange,
+  onDefaultCountryChange
 }) => {
   const intl = useIntl();
   const [copied, copy] = useClipboard();
@@ -58,7 +66,6 @@ export const ChannelForm: React.FC<ChannelFormProps> = ({
     errors
   );
   const classes = useStyles({});
-
   return (
     <>
       <Card>
@@ -72,7 +79,7 @@ export const ChannelForm: React.FC<ChannelFormProps> = ({
             disabled={disabled}
             fullWidth
             label={intl.formatMessage({
-              defaultMessage: "Channel Name",
+              defaultMessage: "Channel name",
               description: "channel name"
             })}
             name="name"
@@ -132,7 +139,7 @@ export const ChannelForm: React.FC<ChannelFormProps> = ({
           })}
         />
         <CardContent>
-          {!!currencyCodes ? (
+          {currencyCodes ? (
             <SingleAutocompleteSelectField
               data-test-id="channel-currency-select-input"
               allowCustomValues
@@ -161,13 +168,36 @@ export const ChannelForm: React.FC<ChannelFormProps> = ({
             <>
               <Typography variant="caption" className={classes.label}>
                 <FormattedMessage
-                  defaultMessage="Selected Currency"
+                  defaultMessage="Selected currency"
                   description="selected currency"
                 />
               </Typography>
               <Typography>{data.currencyCode}</Typography>
             </>
           )}
+          <FormSpacer />
+          <SingleAutocompleteSelectField
+            data-test-id="country-select-input"
+            error={!!formErrors.defaultCountry}
+            FormHelperTextProps={
+              {
+                "data-testid": "country-text-input-helper-text"
+              } as ExtendedFormHelperTextProps
+            }
+            helperText={getChannelsErrorMessage(
+              formErrors?.defaultCountry,
+              intl
+            )}
+            disabled={disabled}
+            label={intl.formatMessage({
+              defaultMessage: "Default country"
+            })}
+            choices={countries}
+            name="defaultCountry"
+            displayValue={selectedCountryDisplayName}
+            value={data.defaultCountry}
+            onChange={onDefaultCountryChange}
+          />
         </CardContent>
       </Card>
     </>

src/channels/fixtures.ts

@@ -22,7 +22,12 @@ export const channelsList: Channels_channels[] = [
     id: "Q2hhbm5lcDoy",
     isActive: true,
     name: "Test",
-    slug: "test"
+    slug: "test",
+    defaultCountry: {
+      code: "PL",
+      country: "Poland",
+      __typename: "CountryDisplay"
+    }
   },
   {
     __typename: "Channel",
@@ -31,7 +36,12 @@ export const channelsList: Channels_channels[] = [
     id: "Q2hhbm7lbDoy213",
     isActive: true,
     name: "Channel",
-    slug: "channel"
+    slug: "channel",
+    defaultCountry: {
+      code: "PL",
+      country: "Poland",
+      __typename: "CountryDisplay"
+    }
   },
   {
     __typename: "Channel",
@@ -40,7 +50,12 @@ export const channelsList: Channels_channels[] = [
     id: "Q2hhbn5lbDoytr",
     isActive: true,
     name: "Channel test",
-    slug: "channeltest"
+    slug: "channeltest",
+    defaultCountry: {
+      code: "PL",
+      country: "Poland",
+      __typename: "CountryDisplay"
+    }
   },
   {
     __typename: "Channel",
@@ -49,7 +64,12 @@ export const channelsList: Channels_channels[] = [
     id: "Q2hhbm5lbDo5bot",
     isActive: true,
     name: "Channel USD",
-    slug: "channel-usd"
+    slug: "channel-usd",
+    defaultCountry: {
+      code: "PL",
+      country: "Poland",
+      __typename: "CountryDisplay"
+    }
   },
   {
     __typename: "Channel",
@@ -58,7 +78,12 @@ export const channelsList: Channels_channels[] = [
     id: "Q2hhbm7lbDoyr0tr",
     isActive: true,
     name: "Channel",
-    slug: "channel2"
+    slug: "channel2",
+    defaultCountry: {
+      code: "PL",
+      country: "Poland",
+      __typename: "CountryDisplay"
+    }
   },
   {
     __typename: "Channel",
@@ -67,7 +92,12 @@ export const channelsList: Channels_channels[] = [
     id: "Q2hhbn5lbDoyya",
     isActive: true,
     name: "Channel test",
-    slug: "channeltest4"
+    slug: "channeltest4",
+    defaultCountry: {
+      code: "PL",
+      country: "Poland",
+      __typename: "CountryDisplay"
+    }
   },
   {
     __typename: "Channel",
@@ -76,7 +106,12 @@ export const channelsList: Channels_channels[] = [
     id: "Q2hhbm5lbDo5w0z",
     isActive: true,
     name: "Channel USD",
-    slug: "channel-usd1"
+    slug: "channel-usd1",
+    defaultCountry: {
+      code: "PL",
+      country: "Poland",
+      __typename: "CountryDisplay"
+    }
   }
 ];
 
@@ -87,7 +122,12 @@ export const channel: Channel_channel = {
   id: "Q2hhbm5lbDov78",
   isActive: true,
   name: "Test",
-  slug: "test"
+  slug: "test",
+  defaultCountry: {
+    code: "PL",
+    country: "Poland",
+    __typename: "CountryDisplay"
+  }
 };
 
 export const productChannels: ProductDetails_product_channelListings[] = [

src/channels/pages/ChannelDetailsPage/ChannelDetailsPage.stories.tsx

@@ -1,3 +1,4 @@
+import { countries } from "@saleor/fixtures";
 import Decorator from "@saleor/storybook/Decorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
@@ -21,6 +22,11 @@ const props: ChannelDetailsPageProps = {
   updateChannelStatus: () => undefined,
   searchShippingZones: () => undefined,
   searchShippingZonesData: undefined,
+  countries: countries.map(({ name, code }) => ({
+    code,
+    country: name,
+    __typename: "CountryDisplay"
+  })),
   channelShippingZones: [
     {
       __typename: "ShippingZone",

src/channels/pages/ChannelDetailsPage/ChannelDetailsPage.tsx

@@ -6,6 +6,7 @@ import Grid from "@saleor/components/Grid";
 import Savebar from "@saleor/components/Savebar";
 import { SingleAutocompleteChoiceType } from "@saleor/components/SingleAutocompleteSelectField";
 import { ChannelErrorFragment } from "@saleor/fragments/types/ChannelErrorFragment";
+import { CountryFragment } from "@saleor/fragments/types/CountryFragment";
 import { SearchData } from "@saleor/hooks/makeTopLevelSearch";
 import { getParsedSearchData } from "@saleor/hooks/makeTopLevelSearch/utils";
 import useStateFromProps from "@saleor/hooks/useStateFromProps";
@@ -15,7 +16,9 @@ import {
 } from "@saleor/orders/components/OrderReturnPage/utils";
 import { SearchShippingZones_search_edges_node } from "@saleor/searches/types/SearchShippingZones";
 import { FetchMoreProps } from "@saleor/types";
+import { CountryCode } from "@saleor/types/globalTypes";
 import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
+import { mapCountriesToChoices } from "@saleor/utils/maps";
 import React, { useState } from "react";
 
 import { ChannelForm, FormData } from "../../components/ChannelForm";
@@ -31,14 +34,15 @@ export interface ChannelDetailsPageProps {
   disabledStatus?: boolean;
   errors: ChannelErrorFragment[];
   saveButtonBarState: ConfirmButtonTransitionState;
+  searchShippingZonesData?: SearchData;
+  fetchMoreShippingZones: FetchMoreProps;
+  channelShippingZones?: ChannelShippingZones;
+  countries: CountryFragment[];
   onBack?: () => void;
   onDelete?: () => void;
   onSubmit: (data: FormData) => void;
   updateChannelStatus?: () => void;
   searchShippingZones: (query: string) => void;
-  searchShippingZonesData?: SearchData;
-  fetchMoreShippingZones: FetchMoreProps;
-  channelShippingZones?: ChannelShippingZones;
 }
 
 export const ChannelDetailsPage: React.FC<ChannelDetailsPageProps> = ({
@@ -55,21 +59,30 @@ export const ChannelDetailsPage: React.FC<ChannelDetailsPageProps> = ({
   searchShippingZones,
   searchShippingZonesData,
   fetchMoreShippingZones,
+  countries,
   channelShippingZones = []
 }) => {
   const [selectedCurrencyCode, setSelectedCurrencyCode] = useState("");
+  const [
+    selectedCountryDisplayName,
+    setSelectedCountryDisplayName
+  ] = useStateFromProps(channel?.defaultCountry.country || "");
 
   const [shippingZonesToDisplay, setShippingZonesToDisplay] = useStateFromProps<
     ChannelShippingZones
   >(channelShippingZones);
 
+  const countryChoices = mapCountriesToChoices(countries || []);
+
+  const { defaultCountry, ...formData } = channel || {};
   const initialData: FormData = {
     currencyCode: "",
     name: "",
     slug: "",
     shippingZonesIdsToAdd: [],
     shippingZonesIdsToRemove: [],
-    ...channel
+    defaultCountry: (defaultCountry?.code || "") as CountryCode,
+    ...formData
   };
 
   const getFilteredShippingZonesChoices = (): SearchShippingZones_search_edges_node[] =>
@@ -86,6 +99,11 @@ export const ChannelDetailsPage: React.FC<ChannelDetailsPageProps> = ({
           setSelectedCurrencyCode,
           currencyCodes
         );
+        const handleDefaultCountrySelect = createSingleAutocompleteSelectHandler(
+          change,
+          setSelectedCountryDisplayName,
+          countryChoices
+        );
 
         const addShippingZone = (zoneId: string) => {
           set({
@@ -136,9 +154,12 @@ export const ChannelDetailsPage: React.FC<ChannelDetailsPageProps> = ({
                   data={data}
                   disabled={disabled}
                   currencyCodes={currencyCodes}
+                  countries={countryChoices}
                   selectedCurrencyCode={selectedCurrencyCode}
+                  selectedCountryDisplayName={selectedCountryDisplayName}
                   onChange={change}
                   onCurrencyCodeChange={handleCurrencyCodeSelect}
+                  onDefaultCountryChange={handleDefaultCountrySelect}
                   errors={errors}
                 />
               </div>

src/channels/types/BaseChannels.ts

@@ -7,6 +7,12 @@
 // GraphQL query operation: BaseChannels
 // ====================================================
 
+export interface BaseChannels_channels_defaultCountry {
+  __typename: "CountryDisplay";
+  code: string;
+  country: string;
+}
+
 export interface BaseChannels_channels {
   __typename: "Channel";
   id: string;
@@ -14,6 +20,7 @@ export interface BaseChannels_channels {
   name: string;
   slug: string;
   currencyCode: string;
+  defaultCountry: BaseChannels_channels_defaultCountry;
 }
 
 export interface BaseChannels {

src/channels/types/Channel.ts

@@ -7,6 +7,12 @@
 // GraphQL query operation: Channel
 // ====================================================
 
+export interface Channel_channel_defaultCountry {
+  __typename: "CountryDisplay";
+  code: string;
+  country: string;
+}
+
 export interface Channel_channel {
   __typename: "Channel";
   id: string;
@@ -14,6 +20,7 @@ export interface Channel_channel {
   name: string;
   slug: string;
   currencyCode: string;
+  defaultCountry: Channel_channel_defaultCountry;
   hasOrders: boolean;
 }
 

src/channels/types/ChannelActivate.ts

@@ -9,6 +9,12 @@ import { ChannelErrorCode } from "./../../types/globalTypes";
 // GraphQL mutation operation: ChannelActivate
 // ====================================================
 
+export interface ChannelActivate_channelActivate_channel_defaultCountry {
+  __typename: "CountryDisplay";
+  code: string;
+  country: string;
+}
+
 export interface ChannelActivate_channelActivate_channel {
   __typename: "Channel";
   id: string;
@@ -16,6 +22,7 @@ export interface ChannelActivate_channelActivate_channel {
   name: string;
   slug: string;
   currencyCode: string;
+  defaultCountry: ChannelActivate_channelActivate_channel_defaultCountry;
   hasOrders: boolean;
 }
 

src/channels/types/ChannelCreate.ts

@@ -9,6 +9,12 @@ import { ChannelCreateInput, ChannelErrorCode } from "./../../types/globalTypes"
 // GraphQL mutation operation: ChannelCreate
 // ====================================================
 
+export interface ChannelCreate_channelCreate_channel_defaultCountry {
+  __typename: "CountryDisplay";
+  code: string;
+  country: string;
+}
+
 export interface ChannelCreate_channelCreate_channel {
   __typename: "Channel";
   id: string;
@@ -16,6 +22,7 @@ export interface ChannelCreate_channelCreate_channel {
   name: string;
   slug: string;
   currencyCode: string;
+  defaultCountry: ChannelCreate_channelCreate_channel_defaultCountry;
   hasOrders: boolean;
 }
 

src/channels/types/ChannelDeactivate.ts

@@ -9,6 +9,12 @@ import { ChannelErrorCode } from "./../../types/globalTypes";
 // GraphQL mutation operation: ChannelDeactivate
 // ====================================================
 
+export interface ChannelDeactivate_channelDeactivate_channel_defaultCountry {
+  __typename: "CountryDisplay";
+  code: string;
+  country: string;
+}
+
 export interface ChannelDeactivate_channelDeactivate_channel {
   __typename: "Channel";
   id: string;
@@ -16,6 +22,7 @@ export interface ChannelDeactivate_channelDeactivate_channel {
   name: string;
   slug: string;
   currencyCode: string;
+  defaultCountry: ChannelDeactivate_channelDeactivate_channel_defaultCountry;
   hasOrders: boolean;
 }
 

src/channels/types/ChannelUpdate.ts

@@ -9,6 +9,12 @@ import { ChannelUpdateInput, ChannelErrorCode } from "./../../types/globalTypes"
 // GraphQL mutation operation: ChannelUpdate
 // ====================================================
 
+export interface ChannelUpdate_channelUpdate_channel_defaultCountry {
+  __typename: "CountryDisplay";
+  code: string;
+  country: string;
+}
+
 export interface ChannelUpdate_channelUpdate_channel {
   __typename: "Channel";
   id: string;
@@ -16,6 +22,7 @@ export interface ChannelUpdate_channelUpdate_channel {
   name: string;
   slug: string;
   currencyCode: string;
+  defaultCountry: ChannelUpdate_channelUpdate_channel_defaultCountry;
   hasOrders: boolean;
 }
 

src/channels/types/Channels.ts

@@ -7,6 +7,12 @@
 // GraphQL query operation: Channels
 // ====================================================
 
+export interface Channels_channels_defaultCountry {
+  __typename: "CountryDisplay";
+  code: string;
+  country: string;
+}
+
 export interface Channels_channels {
   __typename: "Channel";
   id: string;
@@ -14,6 +20,7 @@ export interface Channels_channels {
   name: string;
   slug: string;
   currencyCode: string;
+  defaultCountry: Channels_channels_defaultCountry;
   hasOrders: boolean;
 }
 

src/channels/views/ChannelCreate/ChannelCreate.tsx

@@ -8,6 +8,7 @@ import { getSearchFetchMoreProps } from "@saleor/hooks/makeTopLevelSearch/utils"
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import { getDefaultNotifierSuccessErrorData } from "@saleor/hooks/useNotifier/utils";
+import useShop from "@saleor/hooks/useShop";
 import { sectionNames } from "@saleor/intl";
 import { Backlink } from "@saleor/macaw-ui";
 import useShippingZonesSearch from "@saleor/searches/useShippingZonesSearch";
@@ -23,6 +24,7 @@ export const ChannelCreateView = ({}) => {
   const navigate = useNavigator();
   const notify = useNotifier();
   const intl = useIntl();
+  const shop = useShop();
 
   const handleBack = () => navigate(channelsListUrl());
 
@@ -105,6 +107,7 @@ export const ChannelCreateView = ({}) => {
           onSubmit={handleSubmit}
           onBack={handleBack}
           saveButtonBarState={createChannelOpts.status}
+          countries={shop?.countries || []}
         />
       </Container>
     </>

src/channels/views/ChannelDetails/ChannelDetails.tsx

@@ -11,6 +11,7 @@ import { getSearchFetchMoreProps } from "@saleor/hooks/makeTopLevelSearch/utils"
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import { getDefaultNotifierSuccessErrorData } from "@saleor/hooks/useNotifier/utils";
+import useShop from "@saleor/hooks/useShop";
 import { sectionNames } from "@saleor/intl";
 import { Backlink } from "@saleor/macaw-ui";
 import useShippingZonesSearch from "@saleor/searches/useShippingZonesSearch";
@@ -48,6 +49,7 @@ export const ChannelDetails: React.FC<ChannelDetailsProps> = ({
   const navigate = useNavigator();
   const notify = useNotifier();
   const intl = useIntl();
+  const shop = useShop();
 
   const handleBack = () => navigate(channelsListUrl());
 
@@ -100,7 +102,8 @@ export const ChannelDetails: React.FC<ChannelDetailsProps> = ({
     name,
     slug,
     shippingZonesIdsToRemove,
-    shippingZonesIdsToAdd
+    shippingZonesIdsToAdd,
+    defaultCountry
   }: FormData) =>
     updateChannel({
       variables: {
@@ -108,6 +111,7 @@ export const ChannelDetails: React.FC<ChannelDetailsProps> = ({
         input: {
           name,
           slug,
+          defaultCountry,
           addShippingZones: shippingZonesIdsToAdd,
           removeShippingZones: shippingZonesIdsToRemove
         }
@@ -209,6 +213,7 @@ export const ChannelDetails: React.FC<ChannelDetailsProps> = ({
               : activateChannel({ variables: { id } })
           }
           saveButtonBarState={updateChannelOpts.status}
+          countries={shop?.countries || []}
         />
       </Container>
       <ChannelDeleteDialog

src/fragments/channels.ts

@@ -15,6 +15,10 @@ export const channelFragment = gql`
     name
     slug
     currencyCode
+    defaultCountry {
+      code
+      country
+    }
   }
 `;
 

src/fragments/types/ChannelDetailsFragment.ts

@@ -7,6 +7,12 @@
 // GraphQL fragment: ChannelDetailsFragment
 // ====================================================
 
+export interface ChannelDetailsFragment_defaultCountry {
+  __typename: "CountryDisplay";
+  code: string;
+  country: string;
+}
+
 export interface ChannelDetailsFragment {
   __typename: "Channel";
   id: string;
@@ -14,5 +20,6 @@ export interface ChannelDetailsFragment {
   name: string;
   slug: string;
   currencyCode: string;
+  defaultCountry: ChannelDetailsFragment_defaultCountry;
   hasOrders: boolean;
 }

src/fragments/types/ChannelFragment.ts

@@ -7,6 +7,12 @@
 // GraphQL fragment: ChannelFragment
 // ====================================================
 
+export interface ChannelFragment_defaultCountry {
+  __typename: "CountryDisplay";
+  code: string;
+  country: string;
+}
+
 export interface ChannelFragment {
   __typename: "Channel";
   id: string;
@@ -14,4 +20,5 @@ export interface ChannelFragment {
   name: string;
   slug: string;
   currencyCode: string;
+  defaultCountry: ChannelFragment_defaultCountry;
 }

src/types/globalTypes.ts

@@ -1797,6 +1797,7 @@ export enum WebhookEventTypeEnum {
   CHECKOUT_UPDATED = "CHECKOUT_UPDATED",
   CUSTOMER_CREATED = "CUSTOMER_CREATED",
   CUSTOMER_UPDATED = "CUSTOMER_UPDATED",
+  FULFILLMENT_CANCELED = "FULFILLMENT_CANCELED",
   FULFILLMENT_CREATED = "FULFILLMENT_CREATED",
   INVOICE_DELETED = "INVOICE_DELETED",
   INVOICE_REQUESTED = "INVOICE_REQUESTED",
@@ -2007,6 +2008,7 @@ export interface ChannelCreateInput {
   name: string;
   slug: string;
   currencyCode: string;
+  defaultCountry: CountryCode;
   addShippingZones?: string[] | null;
 }
 
@@ -2018,6 +2020,7 @@ export interface ChannelUpdateInput {
   isActive?: boolean | null;
   name?: string | null;
   slug?: string | null;
+  defaultCountry?: CountryCode | null;
   addShippingZones?: string[] | null;
   removeShippingZones?: string[] | null;
 }
@@ -2141,7 +2144,7 @@ export interface ExportProductsInput {
 }
 
 export interface FulfillmentCancelInput {
-  warehouseId: string;
+  warehouseId?: string | null;
 }
 
 export interface FulfillmentUpdateTrackingInput {

src/webhooks/components/WebhookEvents/WebhookEvents.tsx

@@ -146,6 +146,10 @@ const WebhookEvents: React.FC<WebhookEventsProps> = ({
       defaultMessage: "Fulfillment created",
       description: "event"
     }),
+    [WebhookEventTypeEnum.FULFILLMENT_CANCELED]: intl.formatMessage({
+      defaultMessage: "Fulfillment canceled",
+      description: "event"
+    }),
     [WebhookEventTypeEnum.INVOICE_REQUESTED]: intl.formatMessage({
       defaultMessage: "Invoice requested",
       description: "event"