From a2c3174f70fd8858eab86e77b2390db8d9bba166 Mon Sep 17 00:00:00 2001 From: Pooria Setayesh Date: Thu, 16 May 2024 19:40:02 +0330 Subject: [PATCH] feat: complete product gallery --- .../assets/images/placeholders/no-image.jpg | Bin 0 -> 5388 bytes src/app/[locale]/(main)/page.tsx | 4 - .../[...id]/components/ProductGallery.tsx | 106 ++++++++++++++++++ .../components/ProductGalleryDialog.tsx | 71 ++++++++++++ .../[...id]/components/ProductImage.tsx | 24 ++++ .../[...id]/components/SizeSelector.tsx | 9 +- .../[locale]/(main)/products/[...id]/page.tsx | 23 ++-- .../[locale]/(main)/products/types/common.ts | 3 + src/app/[locale]/layout.tsx | 4 + src/components/BuyBox/BuyBox.tsx | 6 +- src/components/BuyBox/index.ts | 2 +- .../ColumnFilters/ColumnFilters.tsx | 1 + src/components/Dialog.tsx | 53 +++++++++ src/components/Header/Header.tsx | 2 +- .../Header/components/TopSection.tsx | 2 +- src/components/Header/index.ts | 2 +- .../ProductImages/ProductImages.tsx | 61 ---------- src/components/ProductImages/index.ts | 1 - .../VariableProductItem.tsx | 1 + src/components/common/ButtonWithLoading.tsx | 26 +++++ src/components/common/DialogTransition.tsx | 16 +++ src/components/common/Image.tsx | 19 +++- src/config/theme.ts | 10 -- src/data/i18n/en.json | 3 + src/data/i18n/fa.json | 3 + src/graphql/queries/products.ts | 18 ++- src/graphql/types/gql.ts | 4 +- src/graphql/types/graphql.ts | 4 +- 28 files changed, 364 insertions(+), 114 deletions(-) create mode 100644 public/assets/images/placeholders/no-image.jpg create mode 100644 src/app/[locale]/(main)/products/[...id]/components/ProductGallery.tsx create mode 100644 src/app/[locale]/(main)/products/[...id]/components/ProductGalleryDialog.tsx create mode 100644 src/app/[locale]/(main)/products/[...id]/components/ProductImage.tsx create mode 100644 src/app/[locale]/(main)/products/types/common.ts create mode 100644 src/components/Dialog.tsx delete mode 100644 src/components/ProductImages/ProductImages.tsx delete mode 100644 src/components/ProductImages/index.ts create mode 100644 src/components/common/ButtonWithLoading.tsx create mode 100644 src/components/common/DialogTransition.tsx diff --git a/public/assets/images/placeholders/no-image.jpg b/public/assets/images/placeholders/no-image.jpg new file mode 100644 index 0000000000000000000000000000000000000000..8702aaaa7cfdb3acc61725fa1e3216c08652febb GIT binary patch literal 5388 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 literal 0 HcmV?d00001 diff --git a/src/app/[locale]/(main)/page.tsx b/src/app/[locale]/(main)/page.tsx index b120992..f0ab1df 100644 --- a/src/app/[locale]/(main)/page.tsx +++ b/src/app/[locale]/(main)/page.tsx @@ -15,10 +15,6 @@ import { import { bestSellingSortOption } from '@/static/sortOptions'; import { Container, Grid } from '@mui/material'; -import 'swiper/css'; -import 'swiper/css/navigation'; -import 'swiper/css/pagination'; - const getSliders = async () => { const { data } = await getClient().query({ query: GET_HOMEPAGE_SLIDERS, diff --git a/src/app/[locale]/(main)/products/[...id]/components/ProductGallery.tsx b/src/app/[locale]/(main)/products/[...id]/components/ProductGallery.tsx new file mode 100644 index 0000000..642af13 --- /dev/null +++ b/src/app/[locale]/(main)/products/[...id]/components/ProductGallery.tsx @@ -0,0 +1,106 @@ +'use client'; + +import Image from '@/components/common/Image'; +import { MoreHorizOutlined } from '@mui/icons-material'; +import { Box } from '@mui/material'; +import { FC, useState } from 'react'; +import { Product } from '../../types/common'; +import ProductGalleryDialog from './ProductGalleryDialog'; + +export type ProductImages = Extract< + Product['galleryImages'], + { __typename?: 'ProductToMediaItemConnection' } +>['nodes']; + +export interface ProductGalleryProps { + value?: ProductImages; +} +const ProductGallery: FC = ({ value = [] }) => { + const [openDialog, setOpenDialog] = useState(false); + + if (!value.length) { + return null; + } + + const handleClickOnImage = () => { + setOpenDialog(true); + }; + const handleClickOnClose = () => { + setOpenDialog(false); + }; + + return ( + <> + + + {value?.map((item, index) => { + const isLast = value.length - 1 == index; + return ( + theme.palette.divider, + borderRadius: 1, + width: 72, + height: 72, + position: 'relative', + }} + > + {item.altText} + {isLast && ( + + )} + + ); + })} + + + ); +}; + +export default ProductGallery; diff --git a/src/app/[locale]/(main)/products/[...id]/components/ProductGalleryDialog.tsx b/src/app/[locale]/(main)/products/[...id]/components/ProductGalleryDialog.tsx new file mode 100644 index 0000000..d35ed15 --- /dev/null +++ b/src/app/[locale]/(main)/products/[...id]/components/ProductGalleryDialog.tsx @@ -0,0 +1,71 @@ +import Dialog, { DialogProps } from '@/components/Dialog'; +import Image from '@/components/common/Image'; +import { useTheme } from '@mui/material'; +import { useTranslations } from 'next-intl'; +import { FC } from 'react'; +import { Navigation, Pagination } from 'swiper/modules'; +import { Swiper, SwiperSlide } from 'swiper/react'; +import { ProductImages } from './ProductGallery'; + +export interface ProductGalleryDialogProps extends DialogProps { + value: ProductImages; +} +const ProductGalleryDialog: FC = ({ + value, + ...props +}) => { + const t = useTranslations(); + const theme = useTheme(); + return ( + + + {value?.map((item) => { + return ( + + {item.altText} + + ); + })} + + + ); +}; + +export default ProductGalleryDialog; diff --git a/src/app/[locale]/(main)/products/[...id]/components/ProductImage.tsx b/src/app/[locale]/(main)/products/[...id]/components/ProductImage.tsx new file mode 100644 index 0000000..b7cf9fb --- /dev/null +++ b/src/app/[locale]/(main)/products/[...id]/components/ProductImage.tsx @@ -0,0 +1,24 @@ +import Image from '@/components/common/Image'; +import { FC } from 'react'; +import { Product } from '../../types/common'; + +export interface ProductImageProps { + value?: Product['image']; +} +const ProductImage: FC = ({ value }) => { + return ( + {value?.altText} + ); +}; + +export default ProductImage; diff --git a/src/app/[locale]/(main)/products/[...id]/components/SizeSelector.tsx b/src/app/[locale]/(main)/products/[...id]/components/SizeSelector.tsx index 6f7d773..2eff75e 100644 --- a/src/app/[locale]/(main)/products/[...id]/components/SizeSelector.tsx +++ b/src/app/[locale]/(main)/products/[...id]/components/SizeSelector.tsx @@ -2,15 +2,12 @@ import { VariantSelector } from '@/components/VariantSelector'; import { VariantSelectorProps } from '@/components/VariantSelector/VariantSelector'; -import { GetSingleProductQuery } from '@/graphql/types/graphql'; import { useTranslations } from 'next-intl'; -import React, { FC, useMemo } from 'react'; +import { FC, useMemo } from 'react'; +import { Product } from '../../types/common'; export interface SizeSelectorProps { - items: Extract< - NonNullable, - { __typename?: 'VariableProduct' } - >['variations']; + items: Extract['variations']; } const SizeSelector: FC = ({ items }) => { diff --git a/src/app/[locale]/(main)/products/[...id]/page.tsx b/src/app/[locale]/(main)/products/[...id]/page.tsx index 0b61022..ba251bd 100644 --- a/src/app/[locale]/(main)/products/[...id]/page.tsx +++ b/src/app/[locale]/(main)/products/[...id]/page.tsx @@ -2,7 +2,6 @@ import { FC } from 'react'; import Breadcrumbs from '@/components/Breadcrumbs/Breadcrumbs'; import { BuyBox } from '@/components/BuyBox'; -import { ProductImages } from '@/components/ProductImages'; import { getClient } from '@/graphql/clients/serverSideClient'; import { GET_SINGLE_VARIABLE_PRODUCT_QUERY } from '@/graphql/queries/products'; import { GetSingleProductQuery } from '@/graphql/types/graphql'; @@ -14,9 +13,10 @@ import { Grid, Typography, } from '@mui/material'; -import { grey } from '@mui/material/colors'; import type { Metadata } from 'next'; import SizeSelector from './components/SizeSelector'; +import ProductImage from './components/ProductImage'; +import ProductGallery from './components/ProductGallery'; type PageProps = { params: { id: string }; @@ -65,7 +65,14 @@ const Page: FC = async ({ params: { id } }) => { - + + + + + + + + @@ -77,7 +84,7 @@ const Page: FC = async ({ params: { id } }) => { fontSize: '1rem', }} > - {title} + {product?.title} = async ({ params: { id } }) => { - - + + diff --git a/src/app/[locale]/(main)/products/types/common.ts b/src/app/[locale]/(main)/products/types/common.ts new file mode 100644 index 0000000..aedcf6d --- /dev/null +++ b/src/app/[locale]/(main)/products/types/common.ts @@ -0,0 +1,3 @@ +import { GetSingleProductQuery } from '@/graphql/types/graphql'; + +export type Product = NonNullable; diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx index 2920aa4..c4da912 100644 --- a/src/app/[locale]/layout.tsx +++ b/src/app/[locale]/layout.tsx @@ -18,6 +18,10 @@ import { getClient } from '@/graphql/clients/serverSideClient'; import { GET_GENERAL_SETTINGS } from '@/graphql/queries/general'; import { GetGeneralSettingsQuery } from '@/graphql/types/graphql'; +import 'swiper/css'; +import 'swiper/css/navigation'; +import 'swiper/css/pagination'; + export type LocaleLayoutParams = { params: { locale: Locale } }; export async function generateMetadata(): Promise { diff --git a/src/components/BuyBox/BuyBox.tsx b/src/components/BuyBox/BuyBox.tsx index 18bcd3a..8400f5f 100644 --- a/src/components/BuyBox/BuyBox.tsx +++ b/src/components/BuyBox/BuyBox.tsx @@ -1,5 +1,6 @@ 'use client'; +import { useAppContext } from '@/hooks/useAppContext'; import { AccountBalanceWalletOutlined, LocalShippingOutlined, @@ -9,12 +10,10 @@ import List from '@mui/material/List'; import ListItem from '@mui/material/ListItem'; import ListItemIcon from '@mui/material/ListItemIcon'; import ListItemText from '@mui/material/ListItemText'; -import { grey } from '@mui/material/colors'; +import { useTranslations } from 'next-intl'; import DiscountPercentage from '../common/DiscountPercentage'; import OldPrice from '../common/OldPrice'; import PriceLabel from '../common/PriceLabel'; -import { useAppContext } from '@/hooks/useAppContext'; -import { useTranslations } from 'next-intl'; const listItems = [ { @@ -59,7 +58,6 @@ const BuyBox = () => { theme.typography.caption.fontSize, }} /> diff --git a/src/components/BuyBox/index.ts b/src/components/BuyBox/index.ts index e2c0ccf..46b274a 100644 --- a/src/components/BuyBox/index.ts +++ b/src/components/BuyBox/index.ts @@ -1 +1 @@ -export { default as BuyBox } from "./BuyBox"; +export { default as BuyBox } from './BuyBox'; diff --git a/src/components/ColumnFilters/ColumnFilters.tsx b/src/components/ColumnFilters/ColumnFilters.tsx index fe2df86..107e141 100644 --- a/src/components/ColumnFilters/ColumnFilters.tsx +++ b/src/components/ColumnFilters/ColumnFilters.tsx @@ -48,6 +48,7 @@ const ColumnFilters: FC = () => { return ( = ({ title, buttons = [], ...props }) => { + return ( + + + {title} + { + props.onClose?.({}, 'escapeKeyDown'); + }} + > + + + + + {props.children} + + {buttons?.length > 0 && ( + + {buttons.map((button, index) => { + return ; + })} + + )} + + ); +}; + +export default Dialog; diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index e8adb88..fbf7310 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -17,13 +17,13 @@ const Header: FC = ({ topBanner }) => { theme.palette.divider, position: 'sticky', top: 0, zIndex: 10, - backgroundColor: '#ffffff', }} > {topBanner && } diff --git a/src/components/Header/components/TopSection.tsx b/src/components/Header/components/TopSection.tsx index 5dac7c2..926ea79 100644 --- a/src/components/Header/components/TopSection.tsx +++ b/src/components/Header/components/TopSection.tsx @@ -89,7 +89,7 @@ const TopSection: FC = () => { /> - + {isLoggedIn ? ( + ); +}; + +export default ButtonWithLoading; diff --git a/src/components/common/DialogTransition.tsx b/src/components/common/DialogTransition.tsx new file mode 100644 index 0000000..4134881 --- /dev/null +++ b/src/components/common/DialogTransition.tsx @@ -0,0 +1,16 @@ +import { Slide } from '@mui/material' +import { TransitionProps } from '@mui/material/transitions' +import { forwardRef } from 'react' + +const DialogTransition = forwardRef(function Transition( + props: TransitionProps & { + children: React.ReactElement + }, + ref: React.Ref +) { + return +}) + +DialogTransition.displayName = 'DialogTransition' + +export default DialogTransition diff --git a/src/components/common/Image.tsx b/src/components/common/Image.tsx index faec09c..30a5588 100644 --- a/src/components/common/Image.tsx +++ b/src/components/common/Image.tsx @@ -1,32 +1,43 @@ 'use client'; import Skeleton from '@mui/material/Skeleton'; -import NextImage, { ImageProps } from 'next/image'; +import NextImage, { type ImageProps as NextImageProps } from 'next/image'; import { FC, useState } from 'react'; -const Image: FC = ({ width, height, ...props }) => { +const Image: FC< + Omit & { + alt?: string | null; + src?: NextImageProps['src'] | null; + } +> = ({ width, height, alt, src, ...props }) => { const [loaded, setLoaded] = useState(false); const handleOnLoad = () => { setLoaded(true); }; + const _src = src ?? '/assets/images/placeholders/no-image.jpg'; + const _alt = alt ?? 'No Image'; + return ( <> - {!loaded && ( + {!loaded && src && ( )} ; -export type GetSingleProductQuery = { __typename?: 'RootQuery', product?: { __typename?: 'ExternalProduct', productCategories?: { __typename?: 'ProductToProductCategoryConnection', nodes: Array<{ __typename?: 'ProductCategory', name?: string | null, slug?: string | null, id: number }> } | null } | { __typename?: 'GroupProduct', productCategories?: { __typename?: 'ProductToProductCategoryConnection', nodes: Array<{ __typename?: 'ProductCategory', name?: string | null, slug?: string | null, id: number }> } | null } | { __typename?: 'SimpleProduct', productCategories?: { __typename?: 'ProductToProductCategoryConnection', nodes: Array<{ __typename?: 'ProductCategory', name?: string | null, slug?: string | null, id: number }> } | null } | { __typename?: 'VariableProduct', name?: string | null, description?: string | null, content?: string | null, commentCount?: number | null, title?: string | null, stockStatus?: StockStatusEnum | null, slug?: string | null, averageRating?: number | null, id: number, galleryImages?: { __typename?: 'ProductToMediaItemConnection', nodes: Array<{ __typename?: 'MediaItem', id: string, sourceUrl?: string | null }> } | null, variations?: { __typename?: 'ProductWithVariationsToProductVariationConnection', nodes: Array<{ __typename?: 'SimpleProductVariation', id: string, price?: string | null, salePrice?: string | null, regularPrice?: string | null, attributes?: { __typename?: 'ProductVariationToVariationAttributeConnection', nodes: Array<{ __typename?: 'VariationAttribute', id: string, value?: string | null, name?: string | null }> } | null, image?: { __typename?: 'MediaItem', id: string, sourceUrl?: string | null } | null }> } | null, productCategories?: { __typename?: 'ProductToProductCategoryConnection', nodes: Array<{ __typename?: 'ProductCategory', name?: string | null, slug?: string | null, id: number }> } | null } | null }; +export type GetSingleProductQuery = { __typename?: 'RootQuery', product?: { __typename?: 'ExternalProduct', image?: { __typename?: 'MediaItem', sourceUrl?: string | null, altText?: string | null, id: number } | null, productCategories?: { __typename?: 'ProductToProductCategoryConnection', nodes: Array<{ __typename?: 'ProductCategory', name?: string | null, slug?: string | null, id: number }> } | null, galleryImages?: { __typename?: 'ProductToMediaItemConnection', nodes: Array<{ __typename?: 'MediaItem', id: string, sourceUrl?: string | null, altText?: string | null }> } | null } | { __typename?: 'GroupProduct', image?: { __typename?: 'MediaItem', sourceUrl?: string | null, altText?: string | null, id: number } | null, productCategories?: { __typename?: 'ProductToProductCategoryConnection', nodes: Array<{ __typename?: 'ProductCategory', name?: string | null, slug?: string | null, id: number }> } | null, galleryImages?: { __typename?: 'ProductToMediaItemConnection', nodes: Array<{ __typename?: 'MediaItem', id: string, sourceUrl?: string | null, altText?: string | null }> } | null } | { __typename?: 'SimpleProduct', image?: { __typename?: 'MediaItem', sourceUrl?: string | null, altText?: string | null, id: number } | null, productCategories?: { __typename?: 'ProductToProductCategoryConnection', nodes: Array<{ __typename?: 'ProductCategory', name?: string | null, slug?: string | null, id: number }> } | null, galleryImages?: { __typename?: 'ProductToMediaItemConnection', nodes: Array<{ __typename?: 'MediaItem', id: string, sourceUrl?: string | null, altText?: string | null }> } | null } | { __typename?: 'VariableProduct', name?: string | null, description?: string | null, content?: string | null, commentCount?: number | null, title?: string | null, stockStatus?: StockStatusEnum | null, slug?: string | null, averageRating?: number | null, id: number, variations?: { __typename?: 'ProductWithVariationsToProductVariationConnection', nodes: Array<{ __typename?: 'SimpleProductVariation', id: string, price?: string | null, salePrice?: string | null, regularPrice?: string | null, attributes?: { __typename?: 'ProductVariationToVariationAttributeConnection', nodes: Array<{ __typename?: 'VariationAttribute', id: string, value?: string | null, name?: string | null }> } | null, image?: { __typename?: 'MediaItem', id: string, sourceUrl?: string | null } | null }> } | null, image?: { __typename?: 'MediaItem', sourceUrl?: string | null, altText?: string | null, id: number } | null, productCategories?: { __typename?: 'ProductToProductCategoryConnection', nodes: Array<{ __typename?: 'ProductCategory', name?: string | null, slug?: string | null, id: number }> } | null, galleryImages?: { __typename?: 'ProductToMediaItemConnection', nodes: Array<{ __typename?: 'MediaItem', id: string, sourceUrl?: string | null, altText?: string | null }> } | null } | null }; export type GetHomePageSlidersQueryVariables = Exact<{ [key: string]: never; }>; @@ -26335,6 +26335,6 @@ export const GetGeneralSettingsDocument = {"kind":"Document","definitions":[{"ki export const GetPageDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetPage"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"slug"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"pages"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"name"},"value":{"kind":"Variable","name":{"kind":"Name","value":"slug"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"status"},"value":{"kind":"EnumValue","value":"PUBLISH"}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"edges"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"node"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"content"}}]}}]}}]}}]}}]} as unknown as DocumentNode; export const GetPublishedPagesListDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetPublishedPagesList"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"pages"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"status"},"value":{"kind":"EnumValue","value":"PUBLISH"}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"edges"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"node"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}}]}}]}}]}}]} as unknown as DocumentNode; export const GetAllProductsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetAllProducts"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"stockStatus"}},"type":{"kind":"ListType","type":{"kind":"NamedType","name":{"kind":"Name","value":"StockStatusEnum"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"orderBy"}},"type":{"kind":"ListType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ProductsOrderbyInput"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"categoryIdIn"}},"type":{"kind":"ListType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"q"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"first"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"products"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"first"},"value":{"kind":"Variable","name":{"kind":"Name","value":"first"}}},{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"stockStatus"},"value":{"kind":"Variable","name":{"kind":"Name","value":"stockStatus"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"orderby"},"value":{"kind":"Variable","name":{"kind":"Name","value":"orderBy"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"categoryIdIn"},"value":{"kind":"Variable","name":{"kind":"Name","value":"categoryIdIn"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"search"},"value":{"kind":"Variable","name":{"kind":"Name","value":"q"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"pageInfo"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"total"}},{"kind":"Field","name":{"kind":"Name","value":"hasNextPage"}},{"kind":"Field","name":{"kind":"Name","value":"hasPreviousPage"}}]}},{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"VariableProduct"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"databaseId"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"onSale"}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"averageRating"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"image"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"sourceUrl"}}]}},{"kind":"Field","name":{"kind":"Name","value":"price"}},{"kind":"Field","name":{"kind":"Name","value":"regularPrice"}},{"kind":"Field","name":{"kind":"Name","value":"salePrice"}},{"kind":"Field","name":{"kind":"Name","value":"stockStatus"}}]}}]}}]}}]}}]} as unknown as DocumentNode; -export const GetSingleProductDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetSingleProduct"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"product"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}},{"kind":"Argument","name":{"kind":"Name","value":"idType"},"value":{"kind":"EnumValue","value":"DATABASE_ID"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"productCategories"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"id"},"name":{"kind":"Name","value":"databaseId"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"VariableProduct"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"id"},"name":{"kind":"Name","value":"databaseId"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"content"}},{"kind":"Field","name":{"kind":"Name","value":"commentCount"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"galleryImages"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"sourceUrl"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"stockStatus"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"averageRating"}},{"kind":"Field","name":{"kind":"Name","value":"variations"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"stockStatus"},"value":{"kind":"EnumValue","value":"IN_STOCK"}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"price"}},{"kind":"Field","name":{"kind":"Name","value":"salePrice"}},{"kind":"Field","name":{"kind":"Name","value":"regularPrice"}},{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"value"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"image"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"sourceUrl"}}]}}]}}]}}]}}]}}]}}]} as unknown as DocumentNode; +export const GetSingleProductDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetSingleProduct"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"product"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}},{"kind":"Argument","name":{"kind":"Name","value":"idType"},"value":{"kind":"EnumValue","value":"DATABASE_ID"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"image"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"id"},"name":{"kind":"Name","value":"databaseId"}},{"kind":"Field","name":{"kind":"Name","value":"sourceUrl"}},{"kind":"Field","name":{"kind":"Name","value":"altText"}}]}},{"kind":"Field","name":{"kind":"Name","value":"productCategories"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"id"},"name":{"kind":"Name","value":"databaseId"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"galleryImages"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"sourceUrl"}},{"kind":"Field","name":{"kind":"Name","value":"altText"}}]}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"VariableProduct"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"id"},"name":{"kind":"Name","value":"databaseId"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"content"}},{"kind":"Field","name":{"kind":"Name","value":"commentCount"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"stockStatus"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"averageRating"}},{"kind":"Field","name":{"kind":"Name","value":"variations"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"stockStatus"},"value":{"kind":"EnumValue","value":"IN_STOCK"}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"price"}},{"kind":"Field","name":{"kind":"Name","value":"salePrice"}},{"kind":"Field","name":{"kind":"Name","value":"regularPrice"}},{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"value"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"image"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"sourceUrl"}}]}}]}}]}}]}}]}}]}}]} as unknown as DocumentNode; export const GetHomePageSlidersDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetHomePageSliders"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"sliderCategories"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"slug"},"value":{"kind":"StringValue","value":"MAIN_HOMEPAGE_SLIDERS","block":false}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"sliders"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"edges"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"node"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"id"},"name":{"kind":"Name","value":"databaseId"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"url"}},{"kind":"Field","name":{"kind":"Name","value":"featuredImage"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"node"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"id"},"name":{"kind":"Name","value":"databaseId"}},{"kind":"Field","alias":{"kind":"Name","value":"url"},"name":{"kind":"Name","value":"sourceUrl"}}]}}]}}]}}]}}]}}]}}]}}]}}]} as unknown as DocumentNode; export const GetTopBannerDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetTopBanner"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"sliderCategories"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"slug"},"value":{"kind":"StringValue","value":"TOP_BANNER","block":false}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"sliders"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"edges"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"node"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"id"},"name":{"kind":"Name","value":"databaseId"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"url"}},{"kind":"Field","name":{"kind":"Name","value":"featuredImage"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"node"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"id"},"name":{"kind":"Name","value":"databaseId"}},{"kind":"Field","alias":{"kind":"Name","value":"url"},"name":{"kind":"Name","value":"sourceUrl"}}]}}]}}]}}]}}]}}]}}]}}]}}]} as unknown as DocumentNode; \ No newline at end of file