-
Notifications
You must be signed in to change notification settings - Fork 298
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Product Feed: Add configurable image size and additional photos (#915)
* Add configurable image size and additional photos * CR fixes * CSpell fixes
- Loading branch information
1 parent
0aa1d12
commit 261e9d1
Showing
23 changed files
with
483 additions
and
43 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
"saleor-app-products-feed": minor | ||
--- | ||
|
||
Added additional images attribute to the feed for media uploaded to the product. |
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,6 @@ | ||
--- | ||
"saleor-app-products-feed": patch | ||
--- | ||
|
||
Improved default resolution of the submitted images. Was: 500px, now it's 1024px. | ||
Users can now configure the size in the app configuration. |
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
2 changes: 1 addition & 1 deletion
2
apps/products-feed/graphql/queries/FetchProductDataForFeed.graphql
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
File renamed without changes.
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
98 changes: 98 additions & 0 deletions
98
apps/products-feed/src/modules/app-configuration/image-configuration-form.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,98 @@ | ||
import { ImageSizeInput, imageSizeInputSchema } from "./app-config"; | ||
import { useForm } from "react-hook-form"; | ||
|
||
import { Box, Button, Text } from "@saleor/macaw-ui/next"; | ||
|
||
import React, { useCallback, useMemo } from "react"; | ||
import { Select } from "@saleor/react-hook-form-macaw"; | ||
import { zodResolver } from "@hookform/resolvers/zod"; | ||
import { trpcClient } from "../trpc/trpc-client"; | ||
import { useDashboardNotification } from "@saleor/apps-shared"; | ||
|
||
type Props = { | ||
initialData: ImageSizeInput; | ||
onSubmit(data: ImageSizeInput): Promise<void>; | ||
}; | ||
|
||
const imageSizeOptions = [ | ||
{ value: "256", label: "256px" }, | ||
{ value: "512", label: "512px" }, | ||
{ value: "1024", label: "1024px" }, | ||
{ value: "2048", label: "2048px" }, | ||
{ value: "4096", label: "4096px" }, | ||
]; | ||
|
||
export const ImageConfigurationForm = (props: Props) => { | ||
const { handleSubmit, control, formState } = useForm<ImageSizeInput>({ | ||
defaultValues: props.initialData, | ||
resolver: zodResolver(imageSizeInputSchema), | ||
}); | ||
|
||
return ( | ||
<Box | ||
as={"form"} | ||
display={"flex"} | ||
gap={5} | ||
flexDirection={"column"} | ||
onSubmit={handleSubmit(props.onSubmit)} | ||
> | ||
<Select control={control} name="imageSize" label="Image size" options={imageSizeOptions} /> | ||
{!!formState.errors.imageSize?.message && ( | ||
<Text variant="caption" color={"textCriticalSubdued"}> | ||
{formState.errors.imageSize?.message} | ||
</Text> | ||
)} | ||
<Box display={"flex"} flexDirection={"row"} gap={4} justifyContent={"flex-end"}> | ||
<Button type="submit" variant="primary"> | ||
Save {props.initialData.imageSize} | ||
</Button> | ||
</Box> | ||
</Box> | ||
); | ||
}; | ||
|
||
export const ConnectedImageConfigurationForm = () => { | ||
const { notifyError, notifySuccess } = useDashboardNotification(); | ||
|
||
const { data, isLoading } = trpcClient.appConfiguration.fetch.useQuery(); | ||
|
||
const { mutate } = trpcClient.appConfiguration.setImageSize.useMutation({ | ||
onSuccess() { | ||
notifySuccess("Success", "Updated image size"); | ||
}, | ||
onError() { | ||
notifyError("Error", "Failed to update, please refresh and try again"); | ||
}, | ||
}); | ||
|
||
const handleSubmit = useCallback( | ||
async (data: ImageSizeInput) => { | ||
mutate(data); | ||
}, | ||
[mutate], | ||
); | ||
|
||
const formData: ImageSizeInput = useMemo(() => { | ||
if (data?.imageSize) { | ||
return { | ||
imageSize: data.imageSize, | ||
}; | ||
} | ||
|
||
return imageSizeInputSchema.parse({}); | ||
}, [data]); | ||
|
||
if (isLoading) { | ||
return <Text>Loading...</Text>; | ||
} | ||
|
||
return ( | ||
<> | ||
{!isLoading ? ( | ||
<ImageConfigurationForm onSubmit={handleSubmit} initialData={formData} /> | ||
) : ( | ||
<Box>Loading</Box> | ||
)} | ||
</> | ||
); | ||
}; |
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
Oops, something went wrong.