{"version":3,"sources":["../src/components/common/XHeader/core.tsx","../src/components/core/dynamic/ViewShoppingCartBtn.tsx","../src/hooks/useActionDrawer.ts","../src/components/core/dynamic/ViewWishListBtn.tsx","../src/utils/constants/core/MENU_LINKS.ts","../src/components/core/XSearch.tsx"],"names":["AppBar","Box","Button","Container","IconButton","Stack","Toolbar","Typography","React","isEqual","MenuIcon","ShoppingBagOutlined","Badge","Tooltip","useSetRecoilState","atom","USE_ACTION_DRAWER","ViewShoppingCartBtn","cart","useCartValue","setDrawer","ViewShoppingCartBtn_default","FavoriteBorder","ViewWishListBtn","wishlist","useWishlistValue","ViewWishListBtn_default","MENU_LINKS","HighlightOffRounded","SearchOutlined","Dialog","DialogContent","DialogTitle","List","ListItemAvatar","ListItemButton","ListItemText","TextField","useDebouncedCallback","XSearch","open","setOpen","search","setSearch","articles","useArticles","imageComponent","Link","env","useXoraiaValue","debounced","value","e","id","images","name","category","XSearch_default","compareProps","prevProps","nextProps","XHeaderCore","props","devProps","xPath","useXPathValue","breakpoint","useBreakpoint","headerMode","position","boxShadow","bgColor","MAIN_COLOR","blur","collapseAt","menuPosition","height","backgroundMode","containerMode","logo","logoHeight","LogoText","logoTextColor","logoTextFontSize","logoTextFontFamily","logoTextFontWeight","contentColor","contentFontSize","contentFontWeight","contentHoverColor","contentLetterSpacing","contentTextTransform","iconColor","iconBgColor","iconBorder","iconRadius","iconHoverColor","iconHoverBgColor","iconHoverBorder","badgeColor","SECONDARY_COLOR","badgeTextColor","collapse","hasCollapsed","content","page","isActived","generateRadius","generateBorder","Centerer","children","Wrapper","generateSide","core_default"],"mappings":"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","sourcesContent":["import {\n  AppBar,\n  Box,\n  Button,\n  Container,\n  IconButton,\n  Stack,\n  Toolbar,\n  Typography,\n} from \"@mui/material\";\nimport * as React from \"react\";\n\nimport { useBreakpoint } from \"../../../hooks/useBreakpoint\";\nimport { useXoraiaValue } from \"../../../hooks/useXoraia\";\n\nimport { isEqual } from \"lodash\";\n\nimport { generateSide } from \"../../../lib/generateSide\";\nimport { IXHeaderProps } from \"../../../utils/interfaces/common/XHeader.interfaces\";\nimport { Menu as MenuIcon } from \"@mui/icons-material\";\nimport {\n  MAIN_COLOR,\n  SECONDARY_COLOR,\n} from \"../../../utils/constants/common/utils\";\nimport { generateRadius } from \"../../../lib/generateRadius\";\nimport { generateBorder } from \"../../../lib/generateBorder\";\nimport { TCoreXElement } from \"../../../utils/types/core/CoreXelement\";\nimport ViewShoppingCartBtn from \"../../core/dynamic/ViewShoppingCartBtn\";\nimport { useXPathValue } from \"../../../hooks/useXPath\";\nimport ViewWishListBtn from \"../../core/dynamic/ViewWishListBtn\";\nimport { useSetRecoilState } from \"recoil\";\nimport { USE_ACTION_DRAWER } from \"../../../hooks/useActionDrawer\";\nimport { MENU_LINKS } from \"../../../utils/constants/core/MENU_LINKS\";\nimport XSearch from \"../../core/XSearch\";\n\nconst compareProps = (prevProps: any, nextProps: any) => {\n  return isEqual(prevProps, nextProps);\n};\n\nconst XHeaderCore: TCoreXElement<IXHeaderProps> = React.memo(\n  ({ props, devProps }) => {\n    const setDrawer = useSetRecoilState(USE_ACTION_DRAWER);\n\n    const xPath = useXPathValue();\n\n    // WE TRACK THE BREAK POINTS CHANGES\n    const breakpoint = useBreakpoint();\n\n    const { env, Link } = useXoraiaValue();\n\n    const {\n      // GENERAL\n      headerMode = \"static\",\n      position,\n      boxShadow,\n      bgColor = MAIN_COLOR,\n      blur = 0,\n      collapseAt = \"md\",\n      menuPosition = \"flex-start\",\n      height = \"64px\",\n      backgroundMode = \"FILL\",\n      containerMode = \"CENTER\",\n\n      // logo\n      // TODO ADD XORAIA LOGO HERE\n      logo = \"https://dev.xoraia.com/_next/image?url=%2Fimages%2FLOGO_XORAIA_WHITE.png&w=96&q=75\",\n      logoHeight = \"44px\",\n      LogoText,\n      logoTextColor,\n      logoTextFontSize,\n      logoTextFontFamily,\n      logoTextFontWeight,\n\n      // content\n      contentColor = \"#FFFFFF90\",\n      contentFontSize = \"16px\",\n      contentFontWeight = 500,\n      contentHoverColor = \"#FFFFFF\",\n      contentLetterSpacing = \"0px\",\n      contentTextTransform = \"capitalize\",\n\n      // icons\n      iconColor = \"#FFFFFF\",\n      iconBgColor,\n      iconBorder,\n      iconRadius,\n      iconHoverColor = \"#000000\",\n      iconHoverBgColor = \"#FFFFFF\",\n      iconHoverBorder,\n\n      // BADGE\n      badgeColor = SECONDARY_COLOR,\n      badgeTextColor = \"#FFFFFF\",\n\n      // AVATAR\n      // avatarBgColor = \"#000000\",\n      // avatarTextColor = \"#FFFFFF\",\n    } = props;\n\n    const collapse = (value: any) => {\n      if (env !== \"dev\") {\n        return { [collapseAt]: value };\n      }\n\n      if (\n        collapseAt === \"md\" &&\n        (breakpoint === \"mobile\" || breakpoint === \"tablet\")\n      ) {\n        return { xs: value };\n      }\n\n      if (collapseAt === \"sm\" && breakpoint === \"mobile\") {\n        return { xs: value };\n      }\n\n      return { [collapseAt]: value };\n    };\n\n    const hasCollapsed =\n      (collapseAt === \"sm\" && breakpoint === \"mobile\") ||\n      (collapseAt === \"md\" &&\n        (breakpoint === \"tablet\" || breakpoint === \"mobile\"));\n\n    console.log(\"HAS_COLLAPSED =>\", hasCollapsed);\n\n    const content = (\n      <Toolbar\n        disableGutters\n        sx={{\n          height,\n          minHeight: \"auto !important\",\n          \"& img\": {\n            mr: 1,\n            height: logoHeight,\n            \"&.defaultImg\": {\n              display: () => ({\n                ...collapse(\"flex\"),\n                xs: \"none\",\n              }),\n            },\n            \"&.smImg\": {\n              display: () => ({\n                ...collapse(\"none\"),\n                xs: \"flex\",\n              }),\n            },\n          },\n        }}\n      >\n        {!!logo && (\n          <Link href={env !== \"dev\" ? \"/\" : undefined}>\n            <img\n              src={logo}\n              alt={LogoText ?? \"Logo\"}\n              loading=\"lazy\"\n              className=\"defaultImg\"\n            />\n          </Link>\n        )}\n\n        {!!LogoText && (\n          <Typography\n            className=\"LOGO_TEXT_1\"\n            variant=\"h4\"\n            noWrap\n            component={Link}\n            href={env !== \"dev\" ? \"/\" : undefined}\n            sx={{\n              mr: 2,\n              display: () => ({ ...collapse(\"flex\"), xs: \"none\" }),\n              fontFamily: logoTextFontFamily ?? \"inherit\",\n              fontWeight: logoTextFontWeight,\n              color: logoTextColor ?? \"inherit\",\n              fontSize: logoTextFontSize ?? 24,\n              textDecoration: \"none\",\n            }}\n          >\n            {LogoText}\n          </Typography>\n        )}\n\n        <Box\n          sx={{\n            display: () => ({ ...collapse(\"none\"), xs: \"flex\" }),\n            position: \"relative\",\n          }}\n        >\n          <IconButton\n            size=\"large\"\n            aria-label=\"account of current user\"\n            aria-controls=\"menu-appbar\"\n            aria-haspopup=\"true\"\n            onClick={() => {\n              setDrawer(\"MENU\");\n            }}\n            color=\"inherit\"\n          >\n            <MenuIcon\n              sx={{\n                color: contentColor,\n                \"&:hover\": { color: contentHoverColor },\n              }}\n            />\n          </IconButton>\n        </Box>\n        <Stack\n          direction=\"row\"\n          alignItems=\"center\"\n          className=\"LOGO_TEXT_2\"\n          flex={hasCollapsed ? 1 : 0}\n        >\n          {!!logo && (\n            <Link href={env !== \"dev\" ? \"/\" : undefined}>\n              <img\n                src={logo}\n                alt={LogoText ?? \"Logo\"}\n                loading=\"lazy\"\n                className=\"smImg\"\n              />\n            </Link>\n          )}\n          {!!LogoText && (\n            <Typography\n              variant=\"h5\"\n              noWrap\n              component={Link}\n              href={env !== \"dev\" ? \"/\" : undefined}\n              sx={{\n                mr: 2,\n                display: () => ({ ...collapse(\"none\"), xs: \"flex\" }),\n                fontFamily: logoTextFontFamily ?? \"inherit\",\n                fontWeight: logoTextFontWeight,\n                color: logoTextColor ?? \"inherit\",\n                fontSize: logoTextFontSize ?? 24,\n                textDecoration: \"none\",\n              }}\n            >\n              {LogoText}\n            </Typography>\n          )}\n        </Stack>\n        <Stack\n          direction=\"row\"\n          justifyContent={menuPosition}\n          sx={{\n            flexGrow: 1,\n            display: () => ({ ...collapse(\"flex\"), xs: \"none\" }),\n          }}\n        >\n          {MENU_LINKS.map((page) => {\n            const isActived = xPath === page.path;\n\n            return (\n              <Button\n                disableRipple\n                LinkComponent={Link}\n                href={env !== \"dev\" ? page.path : undefined}\n                key={page.path}\n                sx={{\n                  my: 2,\n                  display: \"block\",\n                  textTransform: contentTextTransform,\n                  letterSpacing: contentLetterSpacing,\n                  color: isActived\n                    ? contentHoverColor ?? contentColor\n                    : contentColor,\n                  fontSize: contentFontSize,\n                  fontWeight: contentFontWeight,\n\n                  \"&:hover\": {\n                    color: contentHoverColor,\n                  },\n                }}\n              >\n                {page.label}\n              </Button>\n            );\n          })}\n        </Stack>\n\n        <Stack\n          direction=\"row\"\n          spacing={0.75}\n          color=\"white\"\n          position={\"relative\"}\n          sx={{\n            \"& .MuiBadge-badge\": {\n              bgcolor: badgeColor,\n              color: badgeTextColor,\n            },\n            \"& .MuiIconButton-root\": {\n              color: iconColor,\n              bgcolor: iconBgColor,\n              transition: \"all linear 0.2s\",\n              borderRadius: generateRadius(iconRadius, \"50%\"),\n              border: generateBorder(iconBorder),\n\n              \"&:hover\": {\n                color: iconHoverColor,\n                bgcolor: iconHoverBgColor,\n                border: generateBorder(iconHoverBorder),\n              },\n            },\n          }}\n        >\n          <XSearch />\n          <ViewShoppingCartBtn />\n          <ViewWishListBtn />\n\n          {/* // todo implement account later */}\n          {/* <Tooltip title=\"Mon Compte\">\n            <IconButton\n              onClick={() => {\n                setDrawer(\"ACCOUNT\");\n              }}\n              sx={{ p: 0 }}\n            >\n              <Avatar\n                sx={{\n                  bgcolor: avatarBgColor,\n                  color: avatarTextColor,\n                  fontSize: 14,\n                  fontWeight: 800,\n                }}\n              >\n                <AccountCircleOutlined />\n              </Avatar>\n            </IconButton>\n          </Tooltip> */}\n        </Stack>\n      </Toolbar>\n    );\n\n    const Centerer: React.FC<{ children: React.ReactNode }> = ({\n      children,\n    }) => {\n      if (containerMode === \"NONE\") {\n        return <React.Fragment>{children}</React.Fragment>;\n      }\n\n      return (\n        <Container maxWidth={containerMode === \"CENTER\" ? \"lg\" : false}>\n          {children}\n        </Container>\n      );\n    };\n\n    const Wrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n      return (\n        <AppBar\n          position={\n            headerMode === \"fixed\" && env === \"dev\" ? \"sticky\" : headerMode\n          }\n          {...(env === \"dev\" && devProps)}\n          sx={{\n            bgcolor: bgColor,\n            ...generateSide(\"position\", position),\n            backdropFilter: blur > 0 ? `blur(${blur}px)` : undefined,\n            boxShadow: boxShadow ?? \"none\",\n          }}\n        >\n          {children}\n        </AppBar>\n      );\n    };\n\n    if (backgroundMode === \"CONTAINED\") {\n      return (\n        <Centerer>\n          <Wrapper>\n            <Container maxWidth={false} sx={{ px: \"10px !important\" }}>\n              {content}\n            </Container>\n          </Wrapper>\n        </Centerer>\n      );\n    }\n\n    return (\n      <Wrapper>\n        <Centerer>{content}</Centerer>\n      </Wrapper>\n    );\n  },\n  compareProps\n);\n\nexport default XHeaderCore;\n","import { ShoppingBagOutlined } from \"@mui/icons-material\";\nimport { Badge, IconButton, Tooltip } from \"@mui/material\";\nimport * as React from \"react\";\nimport { useSetRecoilState } from \"recoil\";\nimport { USE_ACTION_DRAWER } from \"../../../hooks/useActionDrawer\";\nimport { useCartValue } from \"../../../hooks/useCart\";\n\nconst ViewShoppingCartBtn: React.FC = () => {\n  const cart = useCartValue();\n  const setDrawer = useSetRecoilState(USE_ACTION_DRAWER);\n\n  return (\n    <Tooltip title=\"Voir Mon Panier\">\n      <IconButton color=\"inherit\" onClick={() => setDrawer(\"CART\")}>\n        <Badge\n          variant=\"standard\"\n          badgeContent={cart.carts.length}\n          color=\"secondary\"\n        >\n          <ShoppingBagOutlined />\n        </Badge>\n      </IconButton>\n    </Tooltip>\n  );\n};\n\nexport default ViewShoppingCartBtn;\n","import { atom } from \"recoil\";\n\nexport type TActionDrawer = \"CART\" | \"WISHLIST\" | \"ACCOUNT\" | \"MENU\" | null;\n\nexport const USE_ACTION_DRAWER = atom<TActionDrawer>({\n  key: \"USE_ACTION_DRAWER\",\n  default: null,\n});\n","import { FavoriteBorder } from \"@mui/icons-material\";\nimport { Badge, IconButton, Tooltip } from \"@mui/material\";\nimport * as React from \"react\";\nimport { useSetRecoilState } from \"recoil\";\nimport { USE_ACTION_DRAWER } from \"../../../hooks/useActionDrawer\";\nimport { useWishlistValue } from \"../../../hooks/useWishlist\";\n\nconst ViewWishListBtn: React.FC = () => {\n  const wishlist = useWishlistValue();\n  const setDrawer = useSetRecoilState(USE_ACTION_DRAWER);\n\n  return (\n    <Tooltip title=\"Voir Mes Favoris\">\n      <IconButton color=\"inherit\" onClick={() => setDrawer(\"WISHLIST\")}>\n        <Badge\n          variant=\"standard\"\n          badgeContent={wishlist.carts.length}\n          color=\"secondary\"\n        >\n          <FavoriteBorder />\n        </Badge>\n      </IconButton>\n    </Tooltip>\n  );\n};\n\nexport default ViewWishListBtn;\n","export const MENU_LINKS: { label: string; path: string }[] = [\n  { path: \"/\", label: \"Accueil\" },\n  { path: \"/shop\", label: \"Boutique\" },\n  { path: \"/about-us\", label: \"A Propos de Nous\" },\n  { path: \"/contact-us\", label: \"Contactez-Nous\" },\n];\n","// TODO MAKE THIS A COMPONENT IN THE FUTURE\nimport { HighlightOffRounded, SearchOutlined } from \"@mui/icons-material\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogTitle,\n  IconButton,\n  List,\n  ListItemAvatar,\n  ListItemButton,\n  ListItemText,\n  TextField,\n  Tooltip,\n  Typography,\n} from \"@mui/material\";\nimport * as React from \"react\";\nimport { useDebouncedCallback } from \"use-debounce\";\nimport { useArticles } from \"../../hooks/useArticles\";\nimport { useXoraiaValue } from \"../../hooks/useXoraia\";\n\nconst XSearch = () => {\n  const [open, setOpen] = React.useState<boolean>(false);\n  const [search, setSearch] = React.useState<string>(\"\");\n  const { articles } = useArticles({ limit: 8, articleName: search.trim() });\n  const { imageComponent, Link, env } = useXoraiaValue();\n\n  const debounced = useDebouncedCallback(\n    // function\n    (value: string) => {\n      setSearch(value);\n    },\n    // delay in ms\n    300\n  );\n\n  return (\n    <React.Fragment>\n      <Tooltip title=\"Recherche\">\n        <IconButton color=\"inherit\" onClick={() => setOpen(true)}>\n          <SearchOutlined sx={{ fontSize: \"inherit\" }} />\n        </IconButton>\n      </Tooltip>\n\n      <Dialog\n        onClose={() => setOpen(false)}\n        open={open}\n        fullWidth\n        maxWidth=\"xl\"\n        PaperProps={{\n          sx: {\n            borderRadius: 3,\n            height: \"70vh\",\n          },\n        }}\n      >\n        <DialogTitle\n          sx={{\n            justifyContent: \"space-between\",\n            alignItems: \"center\",\n            display: \"flex\",\n          }}\n        >\n          <span>Recherche</span>\n          <IconButton\n            size=\"large\"\n            color=\"inherit\"\n            onClick={() => setOpen(false)}\n          >\n            <HighlightOffRounded sx={{ fontSize: \"inherit\" }} />\n          </IconButton>\n        </DialogTitle>\n        <DialogContent>\n          <TextField\n            fullWidth\n            hiddenLabel\n            variant=\"outlined\"\n            placeholder=\"Que Recherchez vous?\"\n            InputProps={{ endAdornment: <SearchOutlined /> }}\n            autoFocus\n            onChange={(e) => debounced(e.target.value)}\n          />\n          {articles.length === 0 && (\n            <Typography sx={{ fontSize: 40, textAlign: \"center\", p: 3 }}>\n              Aucun Résultat\n            </Typography>\n          )}\n          <List\n            disablePadding\n            sx={{\n              flex: 1,\n              mt: 2,\n              height: \"calc(100% - 60px)\",\n              overflowY: \"scroll\",\n              fontFamily: \"inherit\",\n              \"& .MuiListItem-container:not(:last-of-type)\": {\n                borderBottom: 1,\n                borderBottomColor: \"rgba(0, 0, 0, 0.12)\",\n              },\n            }}\n          >\n            {articles.map(({ id, images, name, category }) => {\n              return (\n                <ListItemButton\n                  disableGutters\n                  LinkComponent={Link}\n                  href={`/products/${id}`}\n                  key={id}\n                  alignItems=\"flex-start\"\n                >\n                  {imageComponent && (\n                    <ListItemAvatar\n                      sx={{\n                        width: \"60px\",\n                        height: \"70px\",\n                        position: \"relative\",\n                      }}\n                    >\n                      {imageComponent(\n                        {\n                          src: images[0],\n                          alt: name,\n                          width: \"60px\",\n                          height: \"70px\",\n                        },\n                        env ?? \"prod\",\n                        {},\n                        \"article id\"\n                      )}\n                    </ListItemAvatar>\n                  )}\n                  <ListItemText\n                    sx={{ mx: 1 }}\n                    primary={name}\n                    primaryTypographyProps={{\n                      sx: {\n                        fontFamily: \"inherit\",\n                        mb: 2,\n                        lineHeight: \"1em\",\n                        fontWeight: 600,\n                      },\n                    }}\n                    secondary={category.name}\n                  />\n                </ListItemButton>\n              );\n            })}\n          </List>\n        </DialogContent>\n      </Dialog>\n    </React.Fragment>\n  );\n};\n\nexport default XSearch;\n"]}