-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Finalize out of the stock variants statistic
- Loading branch information
1 parent
3d44bbf
commit af9fc15
Showing
9 changed files
with
254 additions
and
61 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
44 changes: 44 additions & 0 deletions
44
src/ui-components/products/out_of_the_stock_variants/helpers.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| export type AdminOutOfTheStockVariantsStatisticsQuery = {} | ||
|
|
||
| export type OutOfTheStockVariantsCount = { | ||
| productId: string, | ||
| variantId: string, | ||
| productTitle: string, | ||
| variantTitle: string, | ||
| thumbnail: string, | ||
| } | ||
|
|
||
| export type OutOfTheStockVariantsCountResult = { | ||
| dateRangeFrom?: number | ||
| dateRangeTo?: number, | ||
| dateRangeFromCompareTo?: number, | ||
| dateRangeToCompareTo?: number, | ||
| current: OutOfTheStockVariantsCount[], | ||
| } | ||
|
|
||
| export type OutOfTheStockVariantsCountResponse = { | ||
| analytics: OutOfTheStockVariantsCountResult | ||
| } | ||
| export type OutOfTheStockVariantsTableRow = { | ||
| variantId: string, | ||
| productId: string, | ||
| productTitle: string, | ||
| variantTitle: string, | ||
| thumbnail: string, | ||
| } | ||
|
|
||
| export function transformToVariantTopTable(result: OutOfTheStockVariantsCountResult): OutOfTheStockVariantsTableRow[] { | ||
| const currentMap = new Map<string, OutOfTheStockVariantsTableRow>(); | ||
|
|
||
| result.current.forEach(currentItem => { | ||
| currentMap.set(currentItem.variantId, { | ||
| variantId: currentItem.variantId, | ||
| productId: currentItem.productId, | ||
| productTitle: currentItem.productTitle, | ||
| variantTitle: currentItem.variantTitle, | ||
| thumbnail: currentItem.thumbnail, | ||
| }); | ||
| }); | ||
|
|
||
| return Array.from(currentMap.values()); | ||
| } |
177 changes: 177 additions & 0 deletions
177
src/ui-components/products/out_of_the_stock_variants/out-of-the-stock-variants-all.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,177 @@ | ||
| /* | ||
| * Copyright 2024 RSC-Labs, https://rsoftcon.com/ | ||
| * | ||
| * MIT License | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software | ||
| * distributed under the License is distributed on an "AS IS" BASIS, | ||
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| * See the License for the specific language governing permissions and | ||
| * limitations under the License. | ||
| */ | ||
|
|
||
| import { Heading, Text, FocusModal, Button, Alert } from "@medusajs/ui" | ||
| import { CircularProgress, Grid, Box } from "@mui/material"; | ||
| import { useAdminCustomQuery } from "medusa-react" | ||
| import { useState } from "react"; | ||
| import { Link } from "react-router-dom" | ||
|
|
||
| import { Table } from "@medusajs/ui" | ||
| import { useMemo } from "react" | ||
| import { AdminOutOfTheStockVariantsStatisticsQuery, OutOfTheStockVariantsCountResponse, OutOfTheStockVariantsTableRow, transformToVariantTopTable } from "./helpers"; | ||
|
|
||
| function TablePaginated({variants} : {variants: OutOfTheStockVariantsTableRow[]}) { | ||
| const [currentPage, setCurrentPage] = useState(0) | ||
| const pageSize = 5; | ||
| const pageCount = Math.ceil(variants.length / pageSize) | ||
| const canNextPage = useMemo( | ||
| () => currentPage < pageCount - 1, | ||
| [currentPage, pageCount] | ||
| ) | ||
| const canPreviousPage = useMemo(() => currentPage - 1 >= 0, [currentPage]) | ||
|
|
||
| const nextPage = () => { | ||
| if (canNextPage) { | ||
| setCurrentPage(currentPage + 1) | ||
| } | ||
| } | ||
|
|
||
| const previousPage = () => { | ||
| if (canPreviousPage) { | ||
| setCurrentPage(currentPage - 1) | ||
| } | ||
| } | ||
|
|
||
| const currentVariants = useMemo(() => { | ||
| const offset = currentPage * pageSize | ||
| const limit = Math.min(offset + pageSize, variants.length) | ||
|
|
||
| return variants.slice(offset, limit) | ||
| }, [currentPage, pageSize, variants]) | ||
|
|
||
| return ( | ||
| <div className="flex gap-1 flex-col"> | ||
| <Table> | ||
| <Table.Header> | ||
| <Table.Row> | ||
| <Table.HeaderCell>Variant</Table.HeaderCell> | ||
| </Table.Row> | ||
| </Table.Header> | ||
| <Table.Body> | ||
| {currentVariants.map((variant) => { | ||
| return ( | ||
| <Table.Row | ||
| key={variant.variantId} | ||
| className="[&_td:last-child]:w-[1%] [&_td:last-child]:whitespace-nowrap" | ||
| > | ||
| <Table.Cell> | ||
| <Grid container justifyContent={'space-between'}> | ||
| <Grid item> | ||
| <Link to={`../products/${variant.productId}`}> | ||
| <Grid container alignItems={'center'} spacing={2}> | ||
| {variant.thumbnail && <Grid item> | ||
| <Box | ||
| sx={{ | ||
| width: 30, | ||
| height: 40 | ||
| }} | ||
| component="img" | ||
| alt={`Thumbnail for ${variant.productTitle}`} | ||
| src={variant.thumbnail} | ||
| /> | ||
| </Grid>} | ||
| <Grid item> | ||
| {variant.productTitle} - {variant.variantTitle} | ||
| </Grid> | ||
| </Grid> | ||
| </Link> | ||
| </Grid> | ||
| </Grid> | ||
| </Table.Cell> | ||
| </Table.Row> | ||
| ) | ||
| })} | ||
| </Table.Body> | ||
| </Table> | ||
| <Table.Pagination | ||
| count={variants.length} | ||
| pageSize={pageSize} | ||
| pageIndex={currentPage} | ||
| pageCount={variants.length} | ||
| canPreviousPage={canPreviousPage} | ||
| canNextPage={canNextPage} | ||
| previousPage={previousPage} | ||
| nextPage={nextPage} | ||
| /> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| const OutOfTheStockVariantsModalContent = () => { | ||
|
|
||
| const { data, isError, isLoading, error } = useAdminCustomQuery< | ||
| AdminOutOfTheStockVariantsStatisticsQuery, | ||
| OutOfTheStockVariantsCountResponse | ||
| >( | ||
| `/products-analytics/out-of-the-stock-variants`, | ||
| [], | ||
| { | ||
| limit: 0 | ||
| } | ||
| ) | ||
|
|
||
| if (isLoading) { | ||
| return ( | ||
| <FocusModal.Body> | ||
| <CircularProgress/> | ||
| </FocusModal.Body> | ||
| ) | ||
| } | ||
|
|
||
| if (isError) { | ||
| const trueError = error as any; | ||
| const errorText = `Error when loading data. It shouldn't have happened - please raise an issue. For developer: ${trueError?.response?.data?.message}` | ||
| return ( | ||
| <FocusModal.Body> | ||
| <Alert variant="error">{errorText}</Alert> | ||
| </FocusModal.Body> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <FocusModal.Body> | ||
| <Grid container direction={'column'} alignContent={'center'} paddingTop={8}> | ||
| <Grid item> | ||
| <Heading>All out of the stock variants</Heading> | ||
| </Grid> | ||
| <Grid item> | ||
| <Text> | ||
| You can click on the row to go to the product. | ||
| </Text> | ||
| </Grid> | ||
| <Grid item paddingTop={5}> | ||
| <TablePaginated variants={transformToVariantTopTable(data.analytics)}/> | ||
| </Grid> | ||
| </Grid> | ||
| </FocusModal.Body> | ||
| ) | ||
| } | ||
|
|
||
| export const OutOfTheStockVariantsModal = () => { | ||
| const [open, setOpen] = useState(false) | ||
|
|
||
| return ( | ||
| <FocusModal | ||
| open={open} | ||
| onOpenChange={setOpen} | ||
| > | ||
| <FocusModal.Trigger asChild> | ||
| <Button size="small" variant="secondary">See all</Button> | ||
| </FocusModal.Trigger> | ||
| <FocusModal.Content> | ||
| <FocusModal.Header/> | ||
| <OutOfTheStockVariantsModalContent/> | ||
| </FocusModal.Content> | ||
| </FocusModal> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
21 changes: 0 additions & 21 deletions
21
src/ui-components/products/out_of_the_stock_variants/types.ts
This file was deleted.
Oops, something went wrong.