{"version":3,"sources":["../src/components/common/XArticle/index.tsx","../src/components/core/dynamic/AddShoppingCartBtn.tsx","../src/components/core/dynamic/AddToWishListBtn.tsx"],"names":["React","CardActionArea","Chip","Rating","Stack","Typography","useSetRecoilState","isEqual","useMount","RemoveShoppingCartOutlined","ShoppingCartOutlined","CircularProgress","Fab","Tooltip","AddShoppingCartBtn","loading","setLoading","cart","setCart","useCart","article","XArticleContext","isActived","content","old","carts","e","error","AddShoppingCartBtn_default","Favorite","FavoriteBorder","AddToWishListBtn","wishlist","setWishlist","useWishlist","AddToWishListBtn_default","compareProps","prevProps","nextProps","XArticle","initData","index","articleData","breakpoint","useBreakpoint","env","imageComponent","Link","useXoraiaValue","xCommon","setXCommon","useXCommon","setSelectedElement","USE_SELECTED_INDEX","devProps","clickHandler","value","valueAtBreakPoint","getValueOnBreakpoint","padding","margin","bgColor","imageHeight","imageRadius","imageTransition","badgePosition","badgeColor","badgeWidth","badgeHeight","badgeTextColor","badgeRadius","badgeFontWeight","badgeFontSize","btnGroupTransition","btnGroupDirection","btnGroupPosition","btnGroupColor","btnGroupGap","btnGroupMargin","btnGroupPadding","btnGroupHoverPosition","btnWidth","btnHeight","btnColor","btnTextColor","btnRadius","btnBorder","btnHoverColor","btnHoverTextColor","btnHoverRadius","btnHoverBorder","contentPadding","contentColor","contentPosition","contentGap","categoryColor","categoryFontFamily","DEFAULT_FONT_FAMILY","categoryFontSize","categoryLetterSpacing","categoryFontWeight","categoryHoverColor","nameColor","nameFontFamily","nameFontSize","nameLetterSpacing","nameFontWeight","nameHoverColor","MAIN_COLOR","priceColor","priceFontFamily","priceFontSize","priceLetterSpacing","priceFontWeight","discountColor","discountFontFamily","discountFontSize","discountLetterSpacing","discountFontWeight","discountTextDecoration","ratingColor","SECONDARY_COLOR","sx","images","_","i","generateSide","img","generateRadius","generateBorder","XArticle_default"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { CardActionArea, Chip, Rating, Stack, Typography } from \"@mui/material\";\nimport { XArticleContext } from \"../../../context/XArticleProvider\";\n\nimport { useBreakpoint } from \"../../../hooks/useBreakpoint\";\nimport { useXoraiaValue } from \"../../../hooks/useXoraia\";\nimport { USE_SELECTED_INDEX } from \"../../../hooks/useSelectedElement\";\nimport { useSetRecoilState } from \"recoil\";\nimport { getValueOnBreakpoint } from \"../../../lib/getValueOnBreakpoint\";\nimport { clickHandler } from \"../../../lib/clickHandler\";\n\nimport { isEqual } from \"lodash\";\n\nimport { generateSide } from \"../../../lib/generateSide\";\nimport {\n  IXArticleProps,\n  XArticleProps,\n} from \"../../../utils/interfaces/common/XArticle.interfaces\";\nimport { useXCommon } from \"../../../hooks/useXCommon\";\nimport { useMount } from \"react-use\";\nimport { generateRadius } from \"../../../lib/generateRadius\";\nimport { generateBorder } from \"../../../lib/generateBorder\";\nimport {\n  MAIN_COLOR,\n  SECONDARY_COLOR,\n} from \"../../../utils/constants/common/utils\";\nimport { DEFAULT_FONT_FAMILY } from \"../../../utils/constants/common/fonts\";\nimport AddShoppingCartBtn from \"../../core/dynamic/AddShoppingCartBtn\";\nimport AddToWishListBtn from \"../../core/dynamic/AddToWishListBtn\";\n\nconst compareProps = (prevProps: any, nextProps: any) => {\n  return isEqual(prevProps, nextProps);\n};\n\nconst XArticle: React.FC<XArticleProps> = React.memo(\n  ({ initData = { all: {} }, index }) => {\n    const articleData = React.useContext(XArticleContext);\n\n    // WE TRACK THE BREAK POINTS CHANGES\n    const breakpoint = useBreakpoint();\n\n    const { env, imageComponent, Link } = useXoraiaValue();\n\n    // WE ARE GETTING THE CURRENT ELEMENT FROM THE ATOM FAMILY\n\n    const { xCommon, setXCommon } = useXCommon(\"ARTICLE\");\n\n    useMount(() => {\n      if (!xCommon) {\n        setXCommon({\n          name: \"XArticle\",\n          childOf: null,\n          elementsIndexes: [],\n          hasChildren: true,\n          hierachy: \"XArticle\",\n          index: \"ARTICLE\",\n          value: initData,\n        });\n      }\n    });\n\n    // GARBING THE INDEX UPDATER FOR GENERAL USAGE\n    const setSelectedElement = useSetRecoilState(USE_SELECTED_INDEX);\n\n    // IF WE DONT HAVE THIS ELEMENT CONFIGS ADDED WE DON'T SHOW IT\n    const devProps = {\n      id: \"ARTICLE\" + index,\n      onClick: (e: any) =>\n        clickHandler(e, setSelectedElement, \"ARTICLE\" + index),\n    };\n\n    if (!xCommon) return null;\n\n    const { value } = xCommon;\n\n    // WE NOW USE THE CURRENT BREAKPOINT VALUE ON THIS ELEMENT\n    const valueAtBreakPoint = getValueOnBreakpoint<IXArticleProps>(\n      value,\n      breakpoint\n    );\n\n    const {\n      padding,\n      margin,\n      bgColor,\n\n      // image\n      imageHeight,\n      imageRadius,\n      imageTransition = \"fade\",\n\n      // badges\n      badgePosition = { Top: \"15px\", Left: \"15px\" },\n      badgeColor = \"#262626\",\n      badgeWidth,\n      badgeHeight = \"21px\",\n      badgeTextColor = \"#FFFFFF\",\n      badgeRadius,\n      badgeFontWeight = 600,\n      badgeFontSize = \"12px\",\n\n      // BTN GROUP\n      btnGroupTransition, // TODO IMPLEMENT USING ANIMATE.CSS ON HOVER\n      btnGroupDirection = \"column\",\n      btnGroupPosition = { Top: \"15px\", Right: \"15px\" },\n      btnGroupColor,\n      btnGroupGap = \"10px\",\n      btnGroupMargin,\n      btnGroupPadding,\n      btnGroupHoverPosition,\n\n      // BTN PROPS\n      btnWidth,\n      btnHeight,\n      btnColor = \"#FFFFFF\",\n      btnTextColor = \"#000000\",\n      btnRadius = {\n        TopLeft: \"50%\",\n        TopRight: \"50%\",\n        BottomLeft: \"50%\",\n        BottomRight: \"50%\",\n      },\n      btnBorder = { width: \"1px\", color: \"#DDDDDD\" },\n      btnHoverColor = \"#000000\",\n      btnHoverTextColor = \"#FFFFFF\",\n      btnHoverRadius,\n      btnHoverBorder = { width: \"1px\", color: \"#000000\" },\n\n      // CONTENT\n      contentPadding = { Top: \"15px\", Bottom: \"15px\" },\n      contentColor,\n      contentPosition = \"center\",\n      contentGap = \"5px\",\n\n      // CATEGORY\n      categoryColor = \"#999999\",\n      categoryFontFamily = DEFAULT_FONT_FAMILY,\n      categoryFontSize = \"12px\",\n      categoryLetterSpacing,\n      categoryFontWeight,\n      categoryHoverColor = \"#000000\",\n\n      // NAME\n      nameColor = \"#666666\",\n      nameFontFamily = DEFAULT_FONT_FAMILY,\n      nameFontSize = \"14px\",\n      nameLetterSpacing,\n      nameFontWeight = 600,\n      nameHoverColor = MAIN_COLOR,\n\n      // PRICE\n      priceColor = \"#000000\",\n      priceFontFamily = DEFAULT_FONT_FAMILY,\n      priceFontSize = \"16px\",\n      priceLetterSpacing,\n      priceFontWeight = 800,\n\n      // DISCOUNT\n      discountColor = \"#999999\",\n      discountFontFamily = DEFAULT_FONT_FAMILY,\n      discountFontSize = \"14px\",\n      discountLetterSpacing,\n      discountFontWeight,\n      discountTextDecoration = \"line-through\",\n\n      //RATING\n      ratingColor = SECONDARY_COLOR,\n      // rest\n      ...sx\n    } = valueAtBreakPoint;\n\n    const images = articleData.images.filter((_, i) =>\n      imageTransition === \"fade\" ? i < 2 : i < 1\n    );\n\n    return (\n      <Stack\n        {...(env === \"dev\" && devProps)}\n        position=\"relative\"\n        boxSizing=\"border-box\"\n        sx={{\n          ...(sx as any),\n          margin: generateSide(\"margin\", margin),\n          padding: generateSide(\"padding\", padding),\n          bgcolor: bgColor,\n          width: \"100%\",\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          overflow: \"hidden\",\n          zIndex: 5,\n\n          \"& a\": { textDecoration: \"none\" },\n\n          \"&[data-x-selected]\": {\n            \"& figure\": {\n              zIndex: -1,\n            },\n          },\n\n          \"& .MuiFab-root\": { opacity: 0 },\n\n          // CUSTOM STYLING\n          \"& figure\": {\n            position: \"relative\",\n            overflow: \"hidden\",\n            width: \"100%\",\n            height: imageHeight ?? \"350px\",\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            m: 0,\n\n            \"& img\": {\n              position: \"absolute\",\n              transition: \"linear all 0.25s\",\n              zIndex: 0,\n              top: 0,\n              left: 0,\n\n              \"&:first-of-type\": {\n                opacity: 1,\n              },\n\n              \"&:last-of-type:not(:first-of-type)\": {\n                opacity: 0,\n                // zIndex: 1,\n              },\n            },\n          },\n\n          //  Hover\n          \"&:hover\": {\n            \"& .FAB_GROUP\": {\n              ...generateSide(\"position\", btnGroupHoverPosition),\n            },\n\n            \"& .MuiFab-root\": { opacity: 1 },\n\n            \"& figure img\": {\n              \"&:first-of-type\": {\n                transform: () =>\n                  imageTransition === \"zoom_out\" ? \"scale(1.2)\" : \"none\",\n              },\n\n              \"&:last-of-type:not(:first-of-type)\": {\n                opacity: 1,\n              },\n            },\n          },\n        }}\n      >\n        <Stack component=\"figure\">\n          <CardActionArea\n            sx={{ height: \"100%\" }}\n            LinkComponent={Link}\n            href={\"/products/\" + articleData.id}\n          >\n            {/* IMAGE VIEW  */}\n            {imageComponent &&\n              images.length > 0 &&\n              images.map((img, i) => {\n                return imageComponent(\n                  {\n                    src: img,\n                    alt: articleData.name,\n                    objectFit: \"cover\",\n                    borderRadius: imageRadius,\n                    height: imageHeight ?? \"350px\",\n                    width: \"100%\",\n                  },\n                  env ?? \"dev\",\n                  {},\n                  i.toString()\n                );\n              })}\n\n            {/* BADGE VIEW  */}\n            {articleData.badge && (\n              <Chip\n                size=\"small\"\n                label={articleData.badge.name}\n                sx={{\n                  position: \"absolute\",\n                  zIndex: 2,\n                  ...generateSide(\"position\", badgePosition),\n                  bgcolor: badgeColor,\n                  width: badgeWidth,\n                  height: badgeHeight,\n                  color: badgeTextColor,\n                  borderRadius: generateRadius(badgeRadius),\n                  fontWeight: badgeFontWeight,\n                  fontSize: badgeFontSize,\n                }}\n              />\n            )}\n          </CardActionArea>\n          {/* BUTTONS GROUP  */}\n          <Stack\n            className=\"FAB_GROUP\"\n            direction={btnGroupDirection}\n            spacing={btnGroupGap}\n            sx={{\n              transition: \"all linear 0.25s\",\n              position: \"absolute\",\n              zIndex: 2,\n              ...generateSide(\"position\", btnGroupPosition),\n              bgcolor: btnGroupColor,\n              marging: generateSide(\"margin\", btnGroupMargin),\n              padding: generateSide(\"padding\", btnGroupPadding),\n\n              \"& .MuiFab-root\": {\n                transition: \"all linear 0.25s\",\n                boxShadow: \"none\",\n                width: btnWidth,\n                height: btnHeight,\n                bgcolor: btnColor,\n                color: btnTextColor,\n                borderRadius: generateRadius(btnRadius),\n                border: generateBorder(btnBorder),\n\n                \"&:hover, &.isActived\": {\n                  bgcolor: btnHoverColor,\n                  color: btnHoverTextColor,\n                  borderRadius: generateRadius(btnHoverRadius, \"50%\"),\n                  border: generateBorder(btnHoverBorder),\n                },\n              },\n            }}\n          >\n            <AddToWishListBtn />\n            <AddShoppingCartBtn />\n          </Stack>\n        </Stack>\n        <Stack\n          spacing={contentGap}\n          sx={{\n            padding: generateSide(\"padding\", contentPadding),\n            bgcolor: contentColor,\n            justifyContent: contentPosition,\n            // textAlign: \"center\",\n            \"& .MuiTypography-body1\": {\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: contentPosition,\n            },\n          }}\n        >\n          {articleData.category && (\n            <Typography\n              component={Link}\n              href={\"/shop?c=\" + articleData.category.id}\n              sx={{\n                color: categoryColor,\n                fontFamily: categoryFontFamily,\n                fontSize: categoryFontSize,\n                letterSpacing: categoryLetterSpacing,\n                fontWeight: categoryFontWeight,\n                lineHeight: \"1em\",\n                width: \"auto\",\n                \"&:hover\": {\n                  color: categoryHoverColor,\n                  cursor: \"pointer\",\n                },\n              }}\n            >\n              {articleData.category.name}\n            </Typography>\n          )}\n\n          {articleData.name && (\n            <Typography\n              component={Link}\n              href={\"/products/\" + articleData.id}\n              sx={{\n                color: nameColor,\n                fontFamily: nameFontFamily,\n                fontSize: nameFontSize,\n                letterSpacing: nameLetterSpacing,\n                fontWeight: nameFontWeight,\n                lineHeight: \"1em\",\n                width: \"auto\",\n                \"&:hover\": {\n                  color: nameHoverColor,\n                  cursor: \"pointer\",\n                },\n              }}\n            >\n              {articleData.name}\n            </Typography>\n          )}\n\n          <Rating\n            value={articleData.initialRate ?? articleData.rate ?? 0}\n            readOnly\n            precision={0.5}\n            size=\"small\"\n            sx={{ color: ratingColor, justifyContent: contentPosition }}\n          />\n\n          {articleData.price && (\n            <Typography\n              sx={{\n                color: priceColor,\n                fontFamily: priceFontFamily,\n                fontSize: priceFontSize,\n                letterSpacing: priceLetterSpacing,\n                fontWeight: priceFontWeight,\n                lineHeight: \"1em\",\n                width: \"auto\",\n              }}\n            >\n              {(articleData.discount\n                ? articleData.price - articleData.discount\n                : articleData.price) + \" F CFA\"}\n              {articleData.discount && (\n                <Typography\n                  component=\"span\"\n                  sx={{\n                    ml: 1,\n                    color: discountColor,\n                    fontFamily: discountFontFamily,\n                    fontSize: discountFontSize,\n                    letterSpacing: discountLetterSpacing,\n                    fontWeight: discountFontWeight,\n                    textDecoration: discountTextDecoration,\n                  }}\n                >\n                  {articleData.price} F CFA\n                </Typography>\n              )}\n            </Typography>\n          )}\n        </Stack>\n      </Stack>\n    );\n  },\n  compareProps\n);\n\nexport default XArticle;\n","import {\n  RemoveShoppingCartOutlined,\n  ShoppingCartOutlined,\n} from \"@mui/icons-material\";\nimport { CircularProgress, Fab, Tooltip } from \"@mui/material\";\nimport * as React from \"react\";\nimport { XArticleContext } from \"../../../context/XArticleProvider\";\nimport { useCart } from \"../../../hooks/useCart\";\nimport { ICartItem } from \"../../../utils/constants/dynamic/article\";\n\nconst AddShoppingCartBtn: React.FC = () => {\n  const [loading, setLoading] = React.useState<boolean>(false);\n  const { cart, setCart } = useCart();\n\n  const article = React.useContext(XArticleContext);\n\n  const isActived = !!cart.carts.find((e) => e.id === article.id);\n\n  const updateCart = async () => {\n    setLoading(true);\n    try {\n      setCart((old) => {\n        const carts: ICartItem[] = isActived\n          ? old.carts.filter((e) => e.id !== article.id)\n          : [...old.carts, { ...article, qty: 1 }];\n\n        return { ...old, carts };\n      });\n    } catch (error) {\n      console.error(\"ERROR/ ADDING TO CART BTN =>\", error);\n    }\n    setLoading(false);\n  };\n\n  const content = (\n    <Fab\n      className={isActived ? \"isActived\" : undefined}\n      size=\"small\"\n      onClick={updateCart}\n      disabled={loading}\n    >\n      {loading && <CircularProgress style={{ width: 30, height: 30 }} />}\n      {!loading &&\n        (!isActived ? (\n          <ShoppingCartOutlined />\n        ) : (\n          <RemoveShoppingCartOutlined />\n        ))}\n    </Fab>\n  );\n\n  if (loading) return content;\n\n  return (\n    <Tooltip\n      title={isActived ? \"Retirer du Panier\" : \"Ajouter au Panier\"}\n      placement=\"left\"\n    >\n      {content}\n    </Tooltip>\n  );\n};\n\nexport default AddShoppingCartBtn;\n","import { Favorite, FavoriteBorder } from \"@mui/icons-material\";\nimport { CircularProgress, Fab, Tooltip } from \"@mui/material\";\nimport * as React from \"react\";\nimport { XArticleContext } from \"../../../context/XArticleProvider\";\nimport { useWishlist } from \"../../../hooks/useWishlist\";\nimport { ICartItem } from \"../../../utils/constants/dynamic/article\";\n\nconst AddToWishListBtn: React.FC = () => {\n  const [loading, setLoading] = React.useState<boolean>(false);\n  const { wishlist, setWishlist } = useWishlist();\n\n  const article = React.useContext(XArticleContext);\n\n  const isActived = !!wishlist.carts.find((e) => e.id === article.id);\n\n  const addToWishList = async () => {\n    setLoading(true);\n    try {\n      setWishlist((old) => {\n        const carts: ICartItem[] = isActived\n          ? old.carts.filter((e) => e.id !== article.id)\n          : [...old.carts, { ...article, qty: 1 }];\n\n        return { ...old, carts };\n      });\n    } catch (error) {\n      console.error(\"ERROR/ ADDING TO CART BTN =>\", error);\n    }\n    setLoading(false);\n  };\n\n  const content = (\n    <Fab\n      className={isActived ? \"isActived\" : undefined}\n      size=\"small\"\n      onClick={addToWishList}\n      disabled={loading}\n    >\n      {loading && <CircularProgress style={{ width: 30, height: 30 }} />}\n      {!loading && (!isActived ? <FavoriteBorder /> : <Favorite />)}\n    </Fab>\n  );\n\n  if (loading) return content;\n\n  return (\n    <Tooltip\n      title={isActived ? \"Retirer des Favoris\" : \"Ajouter au Favoris\"}\n      placement=\"left\"\n    >\n      {content}\n    </Tooltip>\n  );\n};\n\nexport default AddToWishListBtn;\n"]}