diff --git a/cypress/integration/products.js b/cypress/integration/products.js index f4405fc44..1d8e38ee8 100644 --- a/cypress/integration/products.js +++ b/cypress/integration/products.js @@ -1,6 +1,5 @@ import { LEFT_MENU_SELECTORS } from "../elements/account/left-menu/left-menu-selectors"; import { PRODUCTS_SELECTORS } from "../elements/catalog/product-selectors"; -import { BUTTON_SELECTORS } from "../elements/shared/button-selectors"; // describe("Products", () => { @@ -14,8 +13,6 @@ describe("Products", () => { .click() .get(PRODUCTS_SELECTORS.products) .click() - .get(BUTTON_SELECTORS.submit) - .click() .get(PRODUCTS_SELECTORS.createProductBtn) .click() .get(PRODUCTS_SELECTORS.productNameInput) diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json index 6e92ebff9..5e139efb9 100644 --- a/locale/defaultMessages.json +++ b/locale/defaultMessages.json @@ -1325,10 +1325,6 @@ "context": "field is optional", "string": "(Optional)" }, - "src_dot_collections_dot_components_dot_CollectionListPage_dot_1391686013": { - "context": "button", - "string": "Settings" - }, "src_dot_collections_dot_components_dot_CollectionListPage_dot_1631917001": { "context": "tab name", "string": "All Collections" @@ -1651,10 +1647,6 @@ "context": "section header button", "string": "Manage" }, - "src_dot_components_dot_ChannelsSelect_dot_4183335632": { - "context": "channel select label", - "string": "Channel:" - }, "src_dot_components_dot_ColumnPicker_dot_1483881697": { "context": "button", "string": "Reset" @@ -2062,6 +2054,10 @@ "context": "button", "string": "Account Settings" }, + "src_dot_components_dot_UserChip_dot_85001470": { + "context": "button", + "string": "Enable Dark Mode" + }, "src_dot_components_dot_VisibilityCard_dot_1311467573": { "string": "Show in product listings" }, @@ -2496,10 +2492,6 @@ "context": "sale name", "string": "Name" }, - "src_dot_discounts_dot_components_dot_SaleListPage_dot_1391686013": { - "context": "button", - "string": "Settings" - }, "src_dot_discounts_dot_components_dot_SaleListPage_dot_1866913828": { "string": "Search Sale" }, @@ -2660,10 +2652,6 @@ "context": "tab name", "string": "All Vouchers" }, - "src_dot_discounts_dot_components_dot_VoucherListPage_dot_1391686013": { - "context": "button", - "string": "Settings" - }, "src_dot_discounts_dot_components_dot_VoucherListPage_dot_1930485532": { "string": "Search Voucher" }, @@ -3004,9 +2992,6 @@ "src_dot_home_dot_components_dot_HomeActivityCard_dot_placed": { "string": "Order #{orderId} was placed" }, - "src_dot_home_dot_components_dot_HomeHeader_dot_4019698341": { - "string": "Channel" - }, "src_dot_hooks_dot_3382262667": { "string": "Variant {name} has been set as default." }, @@ -3163,10 +3148,6 @@ "context": "button", "string": "Add products" }, - "src_dot_orders_dot_components_dot_OrderDraftListPage_dot_1391686013": { - "context": "button", - "string": "Settings" - }, "src_dot_orders_dot_components_dot_OrderDraftListPage_dot_2826235371": { "context": "button", "string": "Create order" @@ -3491,10 +3472,6 @@ "context": "generate invoice button", "string": "Generate" }, - "src_dot_orders_dot_components_dot_OrderListPage_dot_1391686013": { - "context": "button", - "string": "Settings" - }, "src_dot_orders_dot_components_dot_OrderListPage_dot_2826235371": { "context": "button", "string": "Create order" @@ -4561,10 +4538,6 @@ "context": "product price", "string": "Price" }, - "src_dot_products_dot_components_dot_ProductListPage_dot_1391686013": { - "context": "button", - "string": "Settings" - }, "src_dot_products_dot_components_dot_ProductListPage_dot_1542417144": { "context": "button", "string": "Create Product" @@ -5296,10 +5269,6 @@ "context": "header", "string": "Shipping" }, - "src_dot_shipping_dot_components_dot_ShippingZonesListPage_dot_1391686013": { - "context": "button", - "string": "Settings" - }, "src_dot_shipping_dot_components_dot_ShippingZonesList_dot_120574110": { "context": "sort shipping methods by zone, section header", "string": "Shipping By Zone" diff --git a/src/categories/components/CategoryProductList/CategoryProductList.tsx b/src/categories/components/CategoryProductList/CategoryProductList.tsx index bd40db659..b6ffd2ae3 100644 --- a/src/categories/components/CategoryProductList/CategoryProductList.tsx +++ b/src/categories/components/CategoryProductList/CategoryProductList.tsx @@ -14,7 +14,7 @@ import TableCellAvatar, { import TableHead from "@saleor/components/TableHead"; import TablePagination from "@saleor/components/TablePagination"; import { maybe, renderCollection } from "@saleor/misc"; -import { ListActions, ListProps } from "@saleor/types"; +import { ChannelProps, ListActions, ListProps } from "@saleor/types"; import React from "react"; import { FormattedMessage } from "react-intl"; @@ -70,9 +70,11 @@ const useStyles = makeStyles( } ); -interface CategoryProductListProps extends ListProps, ListActions { +interface CategoryProductListProps + extends ListProps, + ListActions, + ChannelProps { channelsCount: number; - selectedChannel: string; products: CategoryDetails_category_products_edges_node[]; } @@ -90,7 +92,7 @@ export const CategoryProductList: React.FC = props => onNextPage, onPreviousPage, onRowClick, - selectedChannel + selectedChannelId } = props; const classes = useStyles(props); @@ -158,7 +160,7 @@ export const CategoryProductList: React.FC = props => product => { const isSelected = product ? isChecked(product.id) : false; const channel = product?.channelListings.find( - listing => listing.channel.id === selectedChannel + listing => listing.channel.id === selectedChannelId ); return ( diff --git a/src/categories/components/CategoryProducts/CategoryProducts.tsx b/src/categories/components/CategoryProducts/CategoryProducts.tsx index 6059953b2..4c309cc13 100644 --- a/src/categories/components/CategoryProducts/CategoryProducts.tsx +++ b/src/categories/components/CategoryProducts/CategoryProducts.tsx @@ -1,36 +1,25 @@ import Button from "@material-ui/core/Button"; import Card from "@material-ui/core/Card"; -import CardContent from "@material-ui/core/CardContent"; -import { makeStyles } from "@material-ui/core/styles"; import CardTitle from "@saleor/components/CardTitle"; -import { ChannelsSelect } from "@saleor/components/ChannelsSelect"; import { SingleAutocompleteChoiceType } from "@saleor/components/SingleAutocompleteSelectField"; -import useStateFromProps from "@saleor/hooks/useStateFromProps"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; -import { ListActions, PageListProps } from "../../../types"; +import { ChannelProps, ListActions, PageListProps } from "../../../types"; import { CategoryDetails_category_products_edges_node } from "../../types/CategoryDetails"; import CategoryProductList from "../CategoryProductList"; -interface CategoryProductsProps extends PageListProps, ListActions { +interface CategoryProductsProps + extends PageListProps, + ListActions, + ChannelProps { products: CategoryDetails_category_products_edges_node[]; channelChoices: SingleAutocompleteChoiceType[]; channelsCount: number; categoryName: string; } -const useStyles = makeStyles( - theme => ({ - channelsSelectContainer: { - paddingTop: theme.spacing(2) - } - }), - { name: "CategoryProducts" } -); - export const CategoryProducts: React.FC = ({ - channelChoices, channelsCount, products, disabled, @@ -42,16 +31,12 @@ export const CategoryProducts: React.FC = ({ categoryName, isChecked, selected, + selectedChannelId, toggle, toggleAll, toolbar }) => { const intl = useIntl(); - const classes = useStyles({}); - - const [channelChoice, setChannelChoice] = useStateFromProps( - channelChoices?.length ? channelChoices[0]?.value : "" - ); return ( @@ -72,16 +57,9 @@ export const CategoryProducts: React.FC = ({ } /> - - - { + extends TabListActions<"productListToolbar" | "subcategoryListToolbar">, + ChannelProps { changeTab: (index: CategoryPageTab) => void; currentTab: CategoryPageTab; errors: ProductErrorFragment[]; @@ -93,6 +94,7 @@ export const CategoryUpdatePage: React.FC = ({ isChecked, productListToolbar, selected, + selectedChannelId, subcategoryListToolbar, toggle, toggleAll @@ -216,6 +218,7 @@ export const CategoryUpdatePage: React.FC = ({ toggle={toggle} toggleAll={toggleAll} selected={selected} + selectedChannelId={selectedChannelId} isChecked={isChecked} toolbar={productListToolbar} /> diff --git a/src/categories/views/CategoryDetails.tsx b/src/categories/views/CategoryDetails.tsx index c7323d452..847422848 100644 --- a/src/categories/views/CategoryDetails.tsx +++ b/src/categories/views/CategoryDetails.tsx @@ -1,8 +1,8 @@ import DialogContentText from "@material-ui/core/DialogContentText"; import IconButton from "@material-ui/core/IconButton"; import DeleteIcon from "@material-ui/icons/Delete"; -import { useChannelsList } from "@saleor/channels/queries"; import ActionDialog from "@saleor/components/ActionDialog"; +import useAppChannel from "@saleor/components/AppLayout/AppChannelContext"; import NotFoundPage from "@saleor/components/NotFoundPage"; import { WindowTitle } from "@saleor/components/WindowTitle"; import useBulkActions from "@saleor/hooks/useBulkActions"; @@ -14,6 +14,7 @@ import usePaginator, { import { commonMessages } from "@saleor/intl"; import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler"; +import { mapNodeToChoice } from "@saleor/utils/maps"; import { useMetadataUpdate, usePrivateMetadataUpdate @@ -79,12 +80,9 @@ export const CategoryDetails: React.FC = ({ variables: { ...paginationState, id } }); - const { data: channelsData } = useChannelsList({}); + const { availableChannels, channel } = useAppChannel(); - const channelChoices = channelsData?.channels?.map(channel => ({ - label: channel.name, - value: channel.id - })); + const channelChoices = mapNodeToChoice(availableChannels); const category = data?.category; @@ -213,7 +211,7 @@ export const CategoryDetails: React.FC = ({ <> data.category.name)} /> = ({ data.category.products.edges.map(edge => edge.node) )} saveButtonBarState={updateResult.status} + selectedChannelId={channel.id} subcategories={maybe(() => data.category.children.edges.map(edge => edge.node) )} diff --git a/src/channels/types/Channel.ts b/src/channels/types/Channel.ts index e0cbc55c6..13dec0357 100644 --- a/src/channels/types/Channel.ts +++ b/src/channels/types/Channel.ts @@ -8,10 +8,10 @@ export interface Channel_channel { __typename: "Channel"; - id: string; - isActive: boolean; name: string; slug: string; + id: string; + isActive: boolean; currencyCode: string; } diff --git a/src/channels/types/ChannelActivate.ts b/src/channels/types/ChannelActivate.ts index d011227a9..ce74a8593 100644 --- a/src/channels/types/ChannelActivate.ts +++ b/src/channels/types/ChannelActivate.ts @@ -10,10 +10,10 @@ import { ChannelErrorCode } from "./../../types/globalTypes"; export interface ChannelActivate_channelActivate_channel { __typename: "Channel"; - id: string; - isActive: boolean; name: string; slug: string; + id: string; + isActive: boolean; currencyCode: string; } diff --git a/src/channels/types/ChannelCreate.ts b/src/channels/types/ChannelCreate.ts index 5437a1d29..3874c967c 100644 --- a/src/channels/types/ChannelCreate.ts +++ b/src/channels/types/ChannelCreate.ts @@ -10,10 +10,10 @@ import { ChannelCreateInput, ChannelErrorCode } from "./../../types/globalTypes" export interface ChannelCreate_channelCreate_channel { __typename: "Channel"; - id: string; - isActive: boolean; name: string; slug: string; + id: string; + isActive: boolean; currencyCode: string; } diff --git a/src/channels/types/ChannelDeactivate.ts b/src/channels/types/ChannelDeactivate.ts index d4bee0c93..3d6dfc641 100644 --- a/src/channels/types/ChannelDeactivate.ts +++ b/src/channels/types/ChannelDeactivate.ts @@ -10,10 +10,10 @@ import { ChannelErrorCode } from "./../../types/globalTypes"; export interface ChannelDeactivate_channelDeactivate_channel { __typename: "Channel"; - id: string; - isActive: boolean; name: string; slug: string; + id: string; + isActive: boolean; currencyCode: string; } diff --git a/src/channels/types/ChannelDelete.ts b/src/channels/types/ChannelDelete.ts index 7dbcef156..07a5f85da 100644 --- a/src/channels/types/ChannelDelete.ts +++ b/src/channels/types/ChannelDelete.ts @@ -10,10 +10,10 @@ import { ChannelDeleteInput, ChannelErrorCode } from "./../../types/globalTypes" export interface ChannelDelete_channelDelete_channel { __typename: "Channel"; - id: string; - isActive: boolean; name: string; slug: string; + id: string; + isActive: boolean; currencyCode: string; } diff --git a/src/channels/types/ChannelUpdate.ts b/src/channels/types/ChannelUpdate.ts index 26ef58efd..c730281ed 100644 --- a/src/channels/types/ChannelUpdate.ts +++ b/src/channels/types/ChannelUpdate.ts @@ -10,10 +10,10 @@ import { ChannelUpdateInput, ChannelErrorCode } from "./../../types/globalTypes" export interface ChannelUpdate_channelUpdate_channel { __typename: "Channel"; - id: string; - isActive: boolean; name: string; slug: string; + id: string; + isActive: boolean; currencyCode: string; } diff --git a/src/channels/types/Channels.ts b/src/channels/types/Channels.ts index eb551cf26..faff84c7f 100644 --- a/src/channels/types/Channels.ts +++ b/src/channels/types/Channels.ts @@ -8,10 +8,10 @@ export interface Channels_channels { __typename: "Channel"; - id: string; - isActive: boolean; name: string; slug: string; + id: string; + isActive: boolean; currencyCode: string; } diff --git a/src/channels/utils.ts b/src/channels/utils.ts index c2ec5a30f..8961b0a66 100644 --- a/src/channels/utils.ts +++ b/src/channels/utils.ts @@ -6,7 +6,7 @@ import { RequireOnlyOne } from "@saleor/misc"; import { ProductDetails_product } from "@saleor/products/types/ProductDetails"; import { ProductVariantDetails_productVariant } from "@saleor/products/types/ProductVariantDetails"; import { ShippingZone_shippingZone_shippingMethods_channelListings } from "@saleor/shipping/types/ShippingZone"; -import { uniqBy } from "lodash"; +import uniqBy from "lodash-es/uniqBy"; export interface Channel { id: string; diff --git a/src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx b/src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx index 6db58a13c..c3b06f497 100644 --- a/src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx +++ b/src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx @@ -16,14 +16,17 @@ import { sectionNames } from "@saleor/intl"; import React from "react"; import { useIntl } from "react-intl"; -import { ListActions, PageListProps } from "../../../types"; +import { ChannelProps, ListActions, PageListProps } from "../../../types"; import { CollectionDetails_collection } from "../../types/CollectionDetails"; import CollectionDetails from "../CollectionDetails/CollectionDetails"; import { CollectionImage } from "../CollectionImage/CollectionImage"; import CollectionProducts from "../CollectionProducts/CollectionProducts"; import CollectionUpdateForm, { CollectionUpdateData } from "./form"; -export interface CollectionDetailsPageProps extends PageListProps, ListActions { +export interface CollectionDetailsPageProps + extends PageListProps, + ListActions, + ChannelProps { channelsCount: number; channelsErrors: CollectionChannelListingErrorFragment[]; collection: CollectionDetails_collection; @@ -31,7 +34,6 @@ export interface CollectionDetailsPageProps extends PageListProps, ListActions { errors: CollectionErrorFragment[]; hasChannelChanged: boolean; saveButtonBarState: ConfirmButtonTransitionState; - selectedChannel: string; onBack: () => void; onCollectionRemove: () => void; onImageDelete: () => void; @@ -51,7 +53,7 @@ const CollectionDetailsPage: React.FC = ({ errors, hasChannelChanged, saveButtonBarState, - selectedChannel, + selectedChannelId, onBack, onCollectionRemove, onImageDelete, @@ -99,7 +101,7 @@ const CollectionDetailsPage: React.FC = ({ diff --git a/src/collections/components/CollectionList/CollectionList.tsx b/src/collections/components/CollectionList/CollectionList.tsx index 3d0937d29..a42b4c57f 100644 --- a/src/collections/components/CollectionList/CollectionList.tsx +++ b/src/collections/components/CollectionList/CollectionList.tsx @@ -12,7 +12,7 @@ import TableCellHeader from "@saleor/components/TableCellHeader"; import TableHead from "@saleor/components/TableHead"; import TablePagination from "@saleor/components/TablePagination"; import { maybe, renderCollection } from "@saleor/misc"; -import { ListActions, ListProps, SortPage } from "@saleor/types"; +import { ChannelProps, ListActions, ListProps, SortPage } from "@saleor/types"; import { getArrowDirection } from "@saleor/utils/sort"; import React from "react"; import { FormattedMessage } from "react-intl"; @@ -47,10 +47,10 @@ const useStyles = makeStyles( interface CollectionListProps extends ListProps, ListActions, - SortPage { + SortPage, + ChannelProps { collections: CollectionList_collections_edges_node[]; channelsCount: number; - selectedChannel: string; } const numberOfColumns = 4; @@ -70,7 +70,7 @@ const CollectionList: React.FC = props => { pageInfo, isChecked, selected, - selectedChannel, + selectedChannelId, toggle, toggleAll, toolbar @@ -147,7 +147,7 @@ const CollectionList: React.FC = props => { collection => { const isSelected = collection ? isChecked(collection.id) : false; const channel = collection?.channelListings.find( - listing => listing.channel.id === selectedChannel + listing => listing.channel.id === selectedChannelId ); return ( , - TabPageProps { + TabPageProps, + ChannelProps { collections: CollectionList_collections_edges_node[]; channelsCount: number; - selectedChannel: string; - onSettingsOpen?: () => void; } -const useStyles = makeStyles( - theme => ({ - settings: { - marginRight: theme.spacing(2) - } - }), - { name: "CollectionListPage" } -); - const CollectionListPage: React.FC = ({ channelsCount, currentTab, @@ -49,34 +38,18 @@ const CollectionListPage: React.FC = ({ onAdd, onAll, onSearchChange, - onSettingsOpen, onTabChange, onTabDelete, onTabSave, - selectedChannel, + selectedChannelId, tabs, ...listProps }) => { const intl = useIntl(); - const classes = useStyles({}); return ( - {!!onSettingsOpen && ( - - )} diff --git a/src/discounts/components/SaleSummary/SaleSummary.tsx b/src/discounts/components/SaleSummary/SaleSummary.tsx index 39097b43b..08bca53af 100644 --- a/src/discounts/components/SaleSummary/SaleSummary.tsx +++ b/src/discounts/components/SaleSummary/SaleSummary.tsx @@ -10,6 +10,7 @@ import Money from "@saleor/components/Money"; import Percent from "@saleor/components/Percent"; import Skeleton from "@saleor/components/Skeleton"; import { commonMessages } from "@saleor/intl"; +import { ChannelProps } from "@saleor/types"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -17,16 +18,18 @@ import { maybe } from "../../../misc"; import { SaleType } from "../../../types/globalTypes"; import { SaleDetails_sale } from "../../types/SaleDetails"; -export interface SaleSummaryProps { - selectedChannel: string; +export interface SaleSummaryProps extends ChannelProps { sale: SaleDetails_sale; } -const SaleSummary: React.FC = ({ selectedChannel, sale }) => { +const SaleSummary: React.FC = ({ + selectedChannelId, + sale +}) => { const intl = useIntl(); const channel = sale?.channelListings?.find( - listing => listing.channel.id === selectedChannel + listing => listing.channel.id === selectedChannelId ); return ( diff --git a/src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx b/src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx index 0fbaafe0f..189af5aa0 100644 --- a/src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx +++ b/src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx @@ -20,7 +20,7 @@ import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; import { maybe, splitDateTime } from "../../../misc"; -import { ListProps, TabListActions } from "../../../types"; +import { ChannelProps, ListProps, TabListActions } from "../../../types"; import { DiscountValueTypeEnum, VoucherTypeEnum @@ -73,12 +73,12 @@ export interface VoucherDetailsPageProps extends Pick>, TabListActions< "categoryListToolbar" | "collectionListToolbar" | "productListToolbar" - > { + >, + ChannelProps { activeTab: VoucherDetailsPageTab; errors: DiscountErrorFragment[]; saveButtonBarState: ConfirmButtonTransitionState; voucher: VoucherDetails_voucher; - selectedChannel: string; allChannelsCount: number; channelListings: ChannelVoucherData[]; hasChannelChanged: boolean; @@ -137,7 +137,7 @@ const VoucherDetailsPage: React.FC = ({ toggle, toggleAll, selected, - selectedChannel, + selectedChannelId, isChecked, categoryListToolbar, collectionListToolbar, @@ -145,7 +145,7 @@ const VoucherDetailsPage: React.FC = ({ }) => { const intl = useIntl(); const channel = voucher?.channelListings?.find( - listing => listing.channel.id === selectedChannel + listing => listing.channel.id === selectedChannelId ); let requirementsPickerInitValue; if (voucher?.minCheckoutItemsQuantity > 0) { @@ -331,7 +331,7 @@ const VoucherDetailsPage: React.FC = ({ onRowClick={onProductClick} pageInfo={pageInfo} discount={voucher} - selectedChannel={selectedChannel} + selectedChannelId={selectedChannelId} channelsCount={allChannelsCount} isChecked={isChecked} selected={selected} @@ -391,7 +391,7 @@ const VoucherDetailsPage: React.FC = ({
{ + SortPage, + ChannelProps { vouchers: VoucherList_vouchers_edges_node[]; - selectedChannel: string; } const useStyles = makeStyles( @@ -94,7 +94,7 @@ const VoucherList: React.FC = props => { vouchers, isChecked, selected, - selectedChannel, + selectedChannelId, sort, toggle, toggleAll, @@ -219,7 +219,7 @@ const VoucherList: React.FC = props => { voucher => { const isSelected = voucher ? isChecked(voucher.id) : false; const channel = voucher?.channelListings?.find( - listing => listing.channel.id === selectedChannel + listing => listing.channel.id === selectedChannelId ); const hasChannelsLoaded = voucher?.channelListings?.length; diff --git a/src/discounts/components/VoucherListPage/VoucherListPage.tsx b/src/discounts/components/VoucherListPage/VoucherListPage.tsx index 8eb2ece05..da52cec29 100644 --- a/src/discounts/components/VoucherListPage/VoucherListPage.tsx +++ b/src/discounts/components/VoucherListPage/VoucherListPage.tsx @@ -1,13 +1,12 @@ import Button from "@material-ui/core/Button"; import Card from "@material-ui/core/Card"; -import makeStyles from "@material-ui/core/styles/makeStyles"; -import CardMenu from "@saleor/components/CardMenu"; import Container from "@saleor/components/Container"; import FilterBar from "@saleor/components/FilterBar"; import PageHeader from "@saleor/components/PageHeader"; import { VoucherListUrlSortField } from "@saleor/discounts/urls"; import { sectionNames } from "@saleor/intl"; import { + ChannelProps, FilterPageProps, ListActions, PageListProps, @@ -30,20 +29,10 @@ export interface VoucherListPageProps ListActions, FilterPageProps, SortPage, - TabPageProps { + TabPageProps, + ChannelProps { vouchers: VoucherList_vouchers_edges_node[]; - selectedChannel: string; - onSettingsOpen?: () => void; } -const useStyles = makeStyles( - theme => ({ - settings: { - marginRight: theme.spacing(2) - } - }), - { name: "VoucherListPage" } -); - const VoucherListPage: React.FC = ({ currentTab, filterOpts, @@ -52,7 +41,6 @@ const VoucherListPage: React.FC = ({ onAll, onFilterChange, onSearchChange, - onSettingsOpen, onTabChange, onTabDelete, onTabSave, @@ -60,26 +48,11 @@ const VoucherListPage: React.FC = ({ ...listProps }) => { const intl = useIntl(); - const classes = useStyles({}); const structure = createFilterStructure(intl, filterOpts); return ( - {onSettingsOpen && ( - - )}
); }; diff --git a/src/home/components/HomePage/HomePage.tsx b/src/home/components/HomePage/HomePage.tsx index 8291e6eb3..072173bcd 100644 --- a/src/home/components/HomePage/HomePage.tsx +++ b/src/home/components/HomePage/HomePage.tsx @@ -4,7 +4,6 @@ import Container from "@saleor/components/Container"; import Grid from "@saleor/components/Grid"; import Money from "@saleor/components/Money"; import RequirePermissions from "@saleor/components/RequirePermissions"; -import { Choices } from "@saleor/components/SingleSelectField"; import Skeleton from "@saleor/components/Skeleton"; import { UserPermissionProps } from "@saleor/types"; import { PermissionEnum } from "@saleor/types/globalTypes"; @@ -54,9 +53,6 @@ export interface HomePageProps extends UserPermissionProps { sales: Home_salesToday_gross; topProducts: Home_productTopToday_edges_node[]; userName: string; - channelChoices: Choices; - channelValue: string; - onChannelChange: (value: string) => void; onOrdersToCaptureClick: () => void; onOrdersToFulfillClick: () => void; onProductClick: (productId: string, variantId: string) => void; @@ -65,8 +61,6 @@ export interface HomePageProps extends UserPermissionProps { const HomePage: React.FC = props => { const { - channelChoices, - channelValue, userName, orders, sales, @@ -78,7 +72,6 @@ const HomePage: React.FC = props => { onProductsOutOfStockClick, ordersToCapture, ordersToFulfill, - onChannelChange, productsOutOfStock, userPermissions } = props; @@ -87,12 +80,7 @@ const HomePage: React.FC = props => { return ( - +
diff --git a/src/home/views/index.tsx b/src/home/views/index.tsx index 0102a8fb4..957ed0c8f 100644 --- a/src/home/views/index.tsx +++ b/src/home/views/index.tsx @@ -1,8 +1,7 @@ -import { useChannelsList } from "@saleor/channels/queries"; -import useLocalStorage from "@saleor/hooks/useLocalStorage"; +import useAppChannel from "@saleor/components/AppLayout/AppChannelContext"; import useNavigator from "@saleor/hooks/useNavigator"; import useUser from "@saleor/hooks/useUser"; -import React, { useCallback, useEffect } from "react"; +import React from "react"; import { getUserName, maybe } from "../../misc"; import { orderListUrl } from "../../orders/urls"; @@ -14,29 +13,10 @@ import { HomePageQuery } from "../queries"; const HomeSection = () => { const navigate = useNavigator(); const { user } = useUser(); - const { data: channelsData } = useChannelsList({}); - - const channelChoices = - channelsData?.channels?.map(channel => ({ - label: channel.name, - value: channel.slug - })) || []; - - const [channelChoice, setChannelChoice] = useLocalStorage( - "homepageChannelChoice", - channelChoices?.length ? channelChoices[0]?.value : "" - ); - - useEffect(() => { - if (!channelChoice && channelChoices[0]) { - setChannelChoice(channelChoices[0].value); - } - }, [channelChoices]); - - const handleChannelChange = useCallback(value => setChannelChoice(value), []); + const { channel } = useAppChannel(); return ( - + {({ data }) => ( @@ -47,9 +27,6 @@ const HomeSection = () => { topProducts={maybe(() => data.productTopToday.edges.map(edge => edge.node) )} - channelChoices={channelChoices} - channelValue={channelChoice} - onChannelChange={handleChannelChange} onProductClick={(productId, variantId) => navigate(productVariantEditUrl(productId, variantId)) } diff --git a/src/hooks/useChannelsSettings.tsx b/src/hooks/useChannelsSettings.tsx deleted file mode 100644 index 494c21cf8..000000000 --- a/src/hooks/useChannelsSettings.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import { useChannelsList } from "@saleor/channels/queries"; -import useLocalStorage from "@saleor/hooks/useLocalStorage"; -import { useEffect } from "react"; - -interface Actions { - openModal: (value: string) => void; - closeModal: () => void; -} - -function useChannelsSettings(key: string, { openModal, closeModal }: Actions) { - const { data: channelsData } = useChannelsList({}); - const channelChoices = channelsData?.channels?.map(channel => ({ - label: channel.name, - value: channel.id - })); - - const [selectedChannel, setSelectedChannel] = useLocalStorage(key, ""); - - const handleChannelSelectConfirm = (channel: string) => { - setSelectedChannel(channel); - closeModal(); - }; - - useEffect(() => { - if (!selectedChannel) { - openModal("settings"); - } - }, [selectedChannel]); - - const channel = channelsData?.channels?.find( - channel => channel.id === selectedChannel - ); - - return { - channel, - channelChoices, - channels: channelsData?.channels, - handleChannelSelectConfirm, - selectedChannel, - slug: channel?.slug - }; -} - -export default useChannelsSettings; diff --git a/src/hooks/useLocalStorage.ts b/src/hooks/useLocalStorage.ts index 13deab7df..3e17bef8d 100644 --- a/src/hooks/useLocalStorage.ts +++ b/src/hooks/useLocalStorage.ts @@ -7,14 +7,26 @@ export default function useLocalStorage( initialValue: T ): [T, SetLocalStorage] { const [storedValue, setStoredValue] = useState(() => { - const item = window.localStorage.getItem(key); - return item ? JSON.parse(item) : initialValue; + let result: T; + try { + const item = window.localStorage.getItem(key); + result = item ? JSON.parse(item) : initialValue; + } catch { + result = initialValue; + } + + return result; }); const setValue = (value: SetLocalStorageValue) => { const valueToStore = value instanceof Function ? value(storedValue) : value; setStoredValue(valueToStore); - window.localStorage.setItem(key, JSON.stringify(valueToStore)); + + try { + window.localStorage.setItem(key, JSON.stringify(valueToStore)); + } catch { + console.warn(`Could not save ${key} to localStorage`); + } }; return [storedValue, setValue]; diff --git a/src/index.tsx b/src/index.tsx index 99fb7e065..3a948e6e4 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -27,6 +27,9 @@ import ChannelsSection from "./channels"; import { channelsSection } from "./channels/urls"; import CollectionSection from "./collections"; import AppLayout from "./components/AppLayout"; +import useAppChannel, { + AppChannelProvider +} from "./components/AppLayout/AppChannelContext"; import { DateProvider } from "./components/Date"; import { LocaleProvider } from "./components/Locale"; import MessageManagerProvider from "./components/messages"; @@ -60,7 +63,7 @@ import { PermissionEnum } from "./types/globalTypes"; import WarehouseSection from "./warehouses"; import { warehouseSection } from "./warehouses/urls"; -if (process.env.GTM_ID !== undefined) { +if (process.env.GTM_ID) { TagManager.initialize({ gtmId: GTM_ID }); } @@ -111,7 +114,9 @@ const App: React.FC = () => { - + + + @@ -135,11 +140,15 @@ const Routes: React.FC = () => { tokenVerifyLoading, user } = useAuth(); + const { channel } = useAppChannel(false); return ( <> - {isAuthenticated && !tokenAuthLoading && !tokenVerifyLoading ? ( + {channel && + isAuthenticated && + !tokenAuthLoading && + !tokenVerifyLoading ? ( @@ -271,7 +280,7 @@ const Routes: React.FC = () => { - ) : hasToken && tokenVerifyLoading ? ( + ) : (isAuthenticated && !channel) || (hasToken && tokenVerifyLoading) ? ( ) : ( diff --git a/src/orders/components/OrderDraftListPage/OrderDraftListPage.tsx b/src/orders/components/OrderDraftListPage/OrderDraftListPage.tsx index 991bfc716..382bd5305 100644 --- a/src/orders/components/OrderDraftListPage/OrderDraftListPage.tsx +++ b/src/orders/components/OrderDraftListPage/OrderDraftListPage.tsx @@ -1,7 +1,5 @@ import Button from "@material-ui/core/Button"; import Card from "@material-ui/core/Card"; -import makeStyles from "@material-ui/core/styles/makeStyles"; -import CardMenu from "@saleor/components/CardMenu"; import Container from "@saleor/components/Container"; import FilterBar from "@saleor/components/FilterBar"; import PageHeader from "@saleor/components/PageHeader"; @@ -32,18 +30,8 @@ export interface OrderDraftListPageProps SortPage, TabPageProps { orders: OrderDraftList_draftOrders_edges_node[]; - onSettingsOpen?: () => void; } -const useStyles = makeStyles( - theme => ({ - settings: { - marginRight: theme.spacing(2) - } - }), - { name: "OrderDraftListPage" } -); - const OrderDraftListPage: React.FC = ({ currentTab, disabled, @@ -53,7 +41,6 @@ const OrderDraftListPage: React.FC = ({ onAll, onFilterChange, onSearchChange, - onSettingsOpen, onTabChange, onTabDelete, onTabSave, @@ -61,26 +48,11 @@ const OrderDraftListPage: React.FC = ({ ...listProps }) => { const intl = useIntl(); - const classes = useStyles({}); const structure = createFilterStructure(intl, filterOpts); return ( - {!!onSettingsOpen && ( - - )}
diff --git a/src/shipping/components/ShippingZoneRates/ShippingZoneRates.tsx b/src/shipping/components/ShippingZoneRates/ShippingZoneRates.tsx index 0ba002150..ddaaa18b0 100644 --- a/src/shipping/components/ShippingZoneRates/ShippingZoneRates.tsx +++ b/src/shipping/components/ShippingZoneRates/ShippingZoneRates.tsx @@ -15,16 +15,16 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable"; import Skeleton from "@saleor/components/Skeleton"; import WeightRange from "@saleor/components/WeightRange"; import { ShippingZoneDetailsFragment_shippingMethods } from "@saleor/fragments/types/ShippingZoneDetailsFragment"; +import { ChannelProps } from "@saleor/types"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; import { maybe, renderCollection } from "../../../misc"; import { ICONBUTTON_SIZE } from "../../../theme"; -export interface ShippingZoneRatesProps { +export interface ShippingZoneRatesProps extends ChannelProps { disabled: boolean; rates: ShippingZoneDetailsFragment_shippingMethods[]; - selectedChannel: string; variant: "price" | "weight"; onRateAdd: () => void; onRateEdit: (id: string) => void; @@ -56,7 +56,7 @@ const ShippingZoneRates: React.FC = props => { onRateEdit, onRateRemove, rates, - selectedChannel, + selectedChannelId, variant } = props; @@ -122,7 +122,7 @@ const ShippingZoneRates: React.FC = props => { rates, rate => { const channel = rate?.channelListings?.find( - listing => listing.channel.id === selectedChannel + listing => listing.channel.id === selectedChannelId ); return ( void; onRemove: (id: string) => void; onSubmit: (unit: WeightUnitsEnum) => void; - selectedChannel: string; - onSettingsOpen: () => void; } const ShippingZonesListPage: React.FC = ({ @@ -32,7 +29,6 @@ const ShippingZonesListPage: React.FC = ({ disabled, userPermissions, onBack, - onSettingsOpen, onSubmit, ...listProps }) => { @@ -48,19 +44,7 @@ const ShippingZonesListPage: React.FC = ({ defaultMessage: "Shipping", description: "header" })} - > - - + />
diff --git a/src/shipping/urls.ts b/src/shipping/urls.ts index 6c8db1401..053ca4b6a 100644 --- a/src/shipping/urls.ts +++ b/src/shipping/urls.ts @@ -7,7 +7,7 @@ import { ShippingMethodTypeEnum } from "../types/globalTypes"; export const shippingSection = "/shipping/"; export const shippingZonesListPath = shippingSection; -export type ShippingZonesListUrlDialog = "remove" | "remove-many" | "settings"; +export type ShippingZonesListUrlDialog = "remove" | "remove-many"; export type ShippingZonesListUrlQueryParams = BulkAction & Dialog & Pagination & diff --git a/src/shipping/views/ShippingZoneDetails/index.tsx b/src/shipping/views/ShippingZoneDetails/index.tsx index a50012149..501b81cbe 100644 --- a/src/shipping/views/ShippingZoneDetails/index.tsx +++ b/src/shipping/views/ShippingZoneDetails/index.tsx @@ -1,8 +1,8 @@ import DialogContentText from "@material-ui/core/DialogContentText"; import ActionDialog from "@saleor/components/ActionDialog"; +import useAppChannel from "@saleor/components/AppLayout/AppChannelContext"; import NotFoundPage from "@saleor/components/NotFoundPage"; import { DEFAULT_INITIAL_SEARCH_DATA } from "@saleor/config"; -import useLocalStorage from "@saleor/hooks/useLocalStorage"; import useNavigator from "@saleor/hooks/useNavigator"; import useNotifier from "@saleor/hooks/useNotifier"; import useShop from "@saleor/hooks/useShop"; @@ -63,8 +63,7 @@ const ShippingZoneDetails: React.FC = ({ displayLoader: true, variables: { id } }); - - const [selectedChannel] = useLocalStorage("shippingListChannel", ""); + const { channel } = useAppChannel(); const [openModal, closeModal] = createDialogActionHandlers< ShippingZoneUrlDialog, @@ -183,7 +182,7 @@ const ShippingZoneDetails: React.FC = ({ loading={searchWarehousesOpts.loading} onFetchMore={loadMore} onSearchChange={search} - selectedChannel={selectedChannel} + selectedChannelId={channel.id} /> = ({ ShippingZonesListUrlQueryParams >(navigate, shippingZonesListUrl, params); - const { - channelChoices, - handleChannelSelectConfirm, - selectedChannel - } = useChannelsSettings("shippingListChannel", { closeModal, openModal }); - const { data, loading, refetch } = useShippingZoneList({ displayLoader: true, variables: paginationState @@ -125,14 +117,6 @@ export const ShippingZonesList: React.FC = ({ ); return ( <> - = ({ } userPermissions={user?.userPermissions || []} - selectedChannel={selectedChannel} - onSettingsOpen={() => openModal("settings")} /> `; -exports[`Storyshots Generics / ChannelsSelect default 1`] = ` -
-
- Channel: -
- - - Channel1 - - - -
-`; - exports[`Storyshots Generics / Checkbox checked 1`] = `
-
-
- Channel: -
- - - Channel1 - - - -
@@ -40812,40 +40741,6 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
-
-
- Channel: -
- - - Channel1 - - - -
@@ -72127,33 +72022,6 @@ exports[`Storyshots Views / Discounts / Sale list default 1`] = `
-
- -
-
-
-
-
-
-
-
- -
-
- Test -
- - - -
-
-
-
-
- -
-
- Test -
- - - -
-
-
-
-
- -
-
- Test -
- - - -
-
-
-
-
- -
-
- Test -
- - - -
-
-
-
-
- -
-
- Test -
- - - -
-
-
-
-
- -
-
- Test -
- - - -
-
-
-
- -
-
- - - + />
-
- -
-
+ />
-
- -
-
+ />
-
- -
-
+ />
= { productListToolbar: null, products: category.products.edges.map(edge => edge.node), saveButtonBarState: "default", + selectedChannelId: "123", subcategories: category.children.edges.map(edge => edge.node), subcategoryListToolbar: null, ...listActionsProps diff --git a/src/storybook/stories/collections/CollectionDetailsPage.tsx b/src/storybook/stories/collections/CollectionDetailsPage.tsx index 8ff3b4240..e4da1623d 100644 --- a/src/storybook/stories/collections/CollectionDetailsPage.tsx +++ b/src/storybook/stories/collections/CollectionDetailsPage.tsx @@ -38,7 +38,7 @@ const props: Omit = { onSubmit: () => undefined, openChannelsModal: () => undefined, saveButtonBarState: "default", - selectedChannel: "123" + selectedChannelId: "123" }; storiesOf("Views / Collections / Collection details", module) diff --git a/src/storybook/stories/collections/CollectionListPage.tsx b/src/storybook/stories/collections/CollectionListPage.tsx index 0f4ed1bc0..13a798c1c 100644 --- a/src/storybook/stories/collections/CollectionListPage.tsx +++ b/src/storybook/stories/collections/CollectionListPage.tsx @@ -27,7 +27,7 @@ const props: CollectionListPageProps = { }, ...tabPageProps, collections, - selectedChannel: "123" + selectedChannelId: "123" }; storiesOf("Views / Collections / Collection list", module) diff --git a/src/storybook/stories/discounts/SaleDetailsPage.tsx b/src/storybook/stories/discounts/SaleDetailsPage.tsx index 31ca59b46..58c2b3d6f 100644 --- a/src/storybook/stories/discounts/SaleDetailsPage.tsx +++ b/src/storybook/stories/discounts/SaleDetailsPage.tsx @@ -47,7 +47,7 @@ const props: SaleDetailsPageProps = { productListToolbar: null, sale, saveButtonBarState: "default", - selectedChannel: "123", + selectedChannelId: "123", ...listActionsProps }; diff --git a/src/storybook/stories/discounts/SaleListPage.tsx b/src/storybook/stories/discounts/SaleListPage.tsx index e37af1c92..27be6c9f9 100644 --- a/src/storybook/stories/discounts/SaleListPage.tsx +++ b/src/storybook/stories/discounts/SaleListPage.tsx @@ -42,9 +42,8 @@ const props: SaleListPageProps = { value: [DiscountStatusEnum.ACTIVE] } }, - onSettingsOpen: () => undefined, sales: saleList, - selectedChannel: "123", + selectedChannelId: "123", sort: { ...sortPageProps.sort, sort: SaleListUrlSortField.name @@ -60,7 +59,6 @@ storiesOf("Views / Discounts / Sale list", module) ({ ...sale, channelListings: [] }))} - selectedChannel="" - onSettingsOpen={undefined} + selectedChannelId="" /> )); diff --git a/src/storybook/stories/discounts/VoucherDetailsPage.tsx b/src/storybook/stories/discounts/VoucherDetailsPage.tsx index 7f701bccd..03f8774cf 100644 --- a/src/storybook/stories/discounts/VoucherDetailsPage.tsx +++ b/src/storybook/stories/discounts/VoucherDetailsPage.tsx @@ -47,7 +47,7 @@ const props: VoucherDetailsPageProps = { openChannelsModal: () => undefined, productListToolbar: null, saveButtonBarState: "default", - selectedChannel: "123", + selectedChannelId: "123", voucher: voucherDetails }; diff --git a/src/storybook/stories/discounts/VoucherListPage.tsx b/src/storybook/stories/discounts/VoucherListPage.tsx index 63b3b8849..49079996e 100644 --- a/src/storybook/stories/discounts/VoucherListPage.tsx +++ b/src/storybook/stories/discounts/VoucherListPage.tsx @@ -51,8 +51,7 @@ const props: VoucherListPageProps = { } } }, - onSettingsOpen: () => undefined, - selectedChannel: "123", + selectedChannelId: "123", sort: { ...sortPageProps.sort, sort: VoucherListUrlSortField.code @@ -68,8 +67,7 @@ storiesOf("Views / Discounts / Voucher list", module) .add("no channels", () => ( ({ ...voucher, channelListings: [] diff --git a/src/storybook/stories/home/HomePage.tsx b/src/storybook/stories/home/HomePage.tsx index d76a39546..44b528c0c 100644 --- a/src/storybook/stories/home/HomePage.tsx +++ b/src/storybook/stories/home/HomePage.tsx @@ -1,6 +1,5 @@ import placeholderImage from "@assets/images/placeholder60x60.png"; import { Omit } from "@material-ui/core"; -import { channelsList } from "@saleor/channels/fixtures"; import { adminUserPermissions } from "@saleor/fixtures"; import { PermissionEnum } from "@saleor/types/globalTypes"; import { storiesOf } from "@storybook/react"; @@ -11,16 +10,9 @@ import { shop as shopFixture } from "../../../home/fixtures"; import Decorator from "../../Decorator"; const shop = shopFixture(placeholderImage); -const channelChoices = channelsList.map(channel => ({ - label: channel.name, - value: channel.slug -})); const homePageProps: Omit = { activities: shop.activities.edges.map(edge => edge.node), - channelChoices, - channelValue: channelChoices[0].value, - onChannelChange: () => undefined, onOrdersToCaptureClick: () => undefined, onOrdersToFulfillClick: () => undefined, onProductClick: () => undefined, diff --git a/src/storybook/stories/orders/OrderDraftListPage.tsx b/src/storybook/stories/orders/OrderDraftListPage.tsx index f44e463ca..ad5531ccc 100644 --- a/src/storybook/stories/orders/OrderDraftListPage.tsx +++ b/src/storybook/stories/orders/OrderDraftListPage.tsx @@ -37,7 +37,6 @@ const props: OrderDraftListPageProps = { } }, onAdd: () => undefined, - onSettingsOpen: () => undefined, orders, sort: { ...sortPageProps.sort, diff --git a/src/storybook/stories/orders/OrderProductAddDialog.tsx b/src/storybook/stories/orders/OrderProductAddDialog.tsx index cf3565fc2..c2459c2be 100644 --- a/src/storybook/stories/orders/OrderProductAddDialog.tsx +++ b/src/storybook/stories/orders/OrderProductAddDialog.tsx @@ -21,7 +21,7 @@ const props: OrderProductAddDialogProps = { onSubmit: () => undefined, open: true, products, - selectedChannel: products[0].variants[0].channelListings[0].channel.id + selectedChannelId: products[0].variants[0].channelListings[0].channel.id }; storiesOf("Orders / OrderProductAddDialog", module) diff --git a/src/storybook/stories/products/ProductListPage.tsx b/src/storybook/stories/products/ProductListPage.tsx index e4ccc3079..dc7112aee 100644 --- a/src/storybook/stories/products/ProductListPage.tsx +++ b/src/storybook/stories/products/ProductListPage.tsx @@ -42,9 +42,8 @@ const props: ProductListPageProps = { filterOpts: productListFilterOpts, gridAttributes: attributes, onExport: () => undefined, - onSettingsOpen: () => undefined, products, - selectedChannel: "123", + selectedChannelId: "123", settings: { ...pageListProps.default.settings, columns: ["availability", "productType", "price"] @@ -69,8 +68,7 @@ storiesOf("Views / Products / Product list", module) ({ ...product, channelListings: [] }))} /> )); diff --git a/src/storybook/stories/products/ProductUpdatePage.tsx b/src/storybook/stories/products/ProductUpdatePage.tsx index 27641ea19..6465ee047 100644 --- a/src/storybook/stories/products/ProductUpdatePage.tsx +++ b/src/storybook/stories/products/ProductUpdatePage.tsx @@ -58,6 +58,7 @@ const props: ProductUpdatePageProps = { placeholderImage, product, saveButtonBarState: "default", + selectedChannelId: "123", taxTypes, variants: product.variants, warehouses: warehouseList diff --git a/src/storybook/stories/shipping/ShippingZoneDetailsPage.tsx b/src/storybook/stories/shipping/ShippingZoneDetailsPage.tsx index a378b39ec..be27e6116 100644 --- a/src/storybook/stories/shipping/ShippingZoneDetailsPage.tsx +++ b/src/storybook/stories/shipping/ShippingZoneDetailsPage.tsx @@ -27,7 +27,7 @@ const props: ShippingZoneDetailsPageProps = { onWeightRateAdd: () => undefined, onWeightRateEdit: () => undefined, saveButtonBarState: "default", - selectedChannel: "12345", + selectedChannelId: "12345", shippingZone, warehouses: warehouseList }; diff --git a/src/storybook/stories/shipping/ShippingZonesListPage.tsx b/src/storybook/stories/shipping/ShippingZonesListPage.tsx index d44cfd478..308fbcc50 100644 --- a/src/storybook/stories/shipping/ShippingZonesListPage.tsx +++ b/src/storybook/stories/shipping/ShippingZonesListPage.tsx @@ -20,9 +20,7 @@ const props: ShippingZonesListPageProps = { onAdd: () => undefined, onBack: () => undefined, onRemove: () => undefined, - onSettingsOpen: () => undefined, onSubmit: () => undefined, - selectedChannel: "123", shippingZones, userPermissions: adminUserPermissions }; diff --git a/src/types.ts b/src/types.ts index b1cf4e3db..4aa53c18d 100644 --- a/src/types.ts +++ b/src/types.ts @@ -117,6 +117,10 @@ export interface TabPageProps { onTabSave: () => void; } +export interface ChannelProps { + selectedChannelId: string; +} + export interface PartialMutationProviderOutput< TData extends {} = {}, TVariables extends {} = {} diff --git a/src/utils/credentialsManagement.ts b/src/utils/credentialsManagement.ts index 7f7998caa..a0c109852 100644 --- a/src/utils/credentialsManagement.ts +++ b/src/utils/credentialsManagement.ts @@ -1,21 +1,32 @@ import { User } from "@saleor/fragments/types/User"; -export const isSupported = - navigator.credentials && navigator.credentials.preventSilentAccess; +export const isSupported = !!( + navigator?.credentials?.preventSilentAccess && PasswordCredential +); -export function login(loginFn: (id: string, password: string) => T): T { - if (isSupported) { - navigator.credentials.get({ password: true }).then(credential => { - if (credential instanceof PasswordCredential) { - return loginFn(credential.id, credential.password); - } - }); +export async function login( + loginFn: (id: string, password: string) => T +): Promise { + let result: T; + + try { + const credential = await navigator.credentials.get({ password: true }); + if (credential instanceof PasswordCredential) { + result = loginFn(credential.id, credential.password); + } + } catch { + result = null; } - return null; + return result; } -export function saveCredentials(user: User, password: string) { +export function saveCredentials( + user: User, + password: string +): Promise { + let result: Promise; + if (isSupported) { const cred = new PasswordCredential({ iconURL: user.avatar ? user.avatar.url : undefined, @@ -23,6 +34,14 @@ export function saveCredentials(user: User, password: string) { name: user.firstName ? `${user.firstName} ${user.lastName}` : undefined, password }); - navigator.credentials.store(cred); + try { + result = navigator.credentials.store(cred); + } catch { + result = null; + } + } else { + result = null; } + + return result; }