{"version":3,"file":"static/chunks/pages/passes-ae8374675bc83fef.js","mappings":"AAGA","sources":["webpack://_N_E/./node_modules/antd/es/_util/hooks/useFlexGapSupport.js","webpack://_N_E/./node_modules/antd/es/_util/responsiveObserve.js","webpack://_N_E/./node_modules/antd/es/grid/row.js","webpack://_N_E/./node_modules/antd/es/row/index.js","webpack://_N_E/?a7b8","webpack://_N_E/./src/components/Package/PassRegister/index.tsx","webpack://_N_E/./src/components/Package/SubscribeToPass/SubscribeNotice.tsx","webpack://_N_E/./src/components/Package/index.tsx","webpack://_N_E/./src/hooks/useDialog.ts","webpack://_N_E/./src/components/Package/AnnualCard.tsx","webpack://_N_E/./src/components/Package/AnnualPassSwiper.tsx","webpack://_N_E/./src/components/Package/hooks/useRenderPassInfoText.ts","webpack://_N_E/./src/components/Package/PassItem.tsx","webpack://_N_E/./src/components/Package/PassList.tsx","webpack://_N_E/./src/components/Package/hooks/usePassTab.ts","webpack://_N_E/./src/components/modal/LoginDialogWithStore.tsx","webpack://_N_E/./src/pages/passes/index.tsx","webpack://_N_E/./node_modules/swiper/modules/pagination/pagination.min.css","webpack://_N_E/./node_modules/swiper/swiper-bundle.css","webpack://_N_E/<anon>"],"sourcesContent":["import _slicedToArray from \"@babel/runtime/helpers/esm/slicedToArray\";\nimport * as React from 'react';\nimport { detectFlexGapSupported } from '../styleChecker';\nexport default (function () {\n  var _React$useState = React.useState(false),\n    _React$useState2 = _slicedToArray(_React$useState, 2),\n    flexible = _React$useState2[0],\n    setFlexible = _React$useState2[1];\n  React.useEffect(function () {\n    setFlexible(detectFlexGapSupported());\n  }, []);\n  return flexible;\n});","import _defineProperty from \"@babel/runtime/helpers/esm/defineProperty\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nexport var responsiveArray = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];\nexport var responsiveMap = {\n  xs: '(max-width: 575px)',\n  sm: '(min-width: 576px)',\n  md: '(min-width: 768px)',\n  lg: '(min-width: 992px)',\n  xl: '(min-width: 1200px)',\n  xxl: '(min-width: 1600px)'\n};\nvar subscribers = new Map();\nvar subUid = -1;\nvar screens = {};\nvar responsiveObserve = {\n  matchHandlers: {},\n  dispatch: function dispatch(pointMap) {\n    screens = pointMap;\n    subscribers.forEach(function (func) {\n      return func(screens);\n    });\n    return subscribers.size >= 1;\n  },\n  subscribe: function subscribe(func) {\n    if (!subscribers.size) this.register();\n    subUid += 1;\n    subscribers.set(subUid, func);\n    func(screens);\n    return subUid;\n  },\n  unsubscribe: function unsubscribe(token) {\n    subscribers[\"delete\"](token);\n    if (!subscribers.size) this.unregister();\n  },\n  unregister: function unregister() {\n    var _this = this;\n    Object.keys(responsiveMap).forEach(function (screen) {\n      var matchMediaQuery = responsiveMap[screen];\n      var handler = _this.matchHandlers[matchMediaQuery];\n      handler === null || handler === void 0 ? void 0 : handler.mql.removeListener(handler === null || handler === void 0 ? void 0 : handler.listener);\n    });\n    subscribers.clear();\n  },\n  register: function register() {\n    var _this2 = this;\n    Object.keys(responsiveMap).forEach(function (screen) {\n      var matchMediaQuery = responsiveMap[screen];\n      var listener = function listener(_ref) {\n        var matches = _ref.matches;\n        _this2.dispatch(_extends(_extends({}, screens), _defineProperty({}, screen, matches)));\n      };\n      var mql = window.matchMedia(matchMediaQuery);\n      mql.addListener(listener);\n      _this2.matchHandlers[matchMediaQuery] = {\n        mql: mql,\n        listener: listener\n      };\n      listener(mql);\n    });\n  }\n};\nexport default responsiveObserve;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _defineProperty from \"@babel/runtime/helpers/esm/defineProperty\";\nimport _typeof from \"@babel/runtime/helpers/esm/typeof\";\nimport _slicedToArray from \"@babel/runtime/helpers/esm/slicedToArray\";\nvar __rest = this && this.__rest || function (s, e) {\n  var t = {};\n  for (var p in s) {\n    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];\n  }\n  if (s != null && typeof Object.getOwnPropertySymbols === \"function\") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];\n  }\n  return t;\n};\nimport classNames from 'classnames';\nimport * as React from 'react';\nimport { ConfigContext } from '../config-provider';\nimport useFlexGapSupport from '../_util/hooks/useFlexGapSupport';\nimport ResponsiveObserve, { responsiveArray } from '../_util/responsiveObserve';\nimport { tuple } from '../_util/type';\nimport RowContext from './RowContext';\nimport { useRowStyle } from './style';\nvar RowAligns = tuple('top', 'middle', 'bottom', 'stretch');\nvar RowJustify = tuple('start', 'end', 'center', 'space-around', 'space-between', 'space-evenly');\nfunction useMergePropByScreen(oriProp, screen) {\n  var _React$useState = React.useState(typeof oriProp === 'string' ? oriProp : ''),\n    _React$useState2 = _slicedToArray(_React$useState, 2),\n    prop = _React$useState2[0],\n    setProp = _React$useState2[1];\n  var clacMergeAlignOrJustify = function clacMergeAlignOrJustify() {\n    if (_typeof(oriProp) !== 'object') {\n      return;\n    }\n    for (var i = 0; i < responsiveArray.length; i++) {\n      var breakpoint = responsiveArray[i];\n      // if do not match, do nothing\n      if (!screen[breakpoint]) continue;\n      var curVal = oriProp[breakpoint];\n      if (curVal !== undefined) {\n        setProp(curVal);\n        return;\n      }\n    }\n  };\n  React.useEffect(function () {\n    clacMergeAlignOrJustify();\n  }, [JSON.stringify(oriProp), screen]);\n  return prop;\n}\nvar Row = /*#__PURE__*/React.forwardRef(function (props, ref) {\n  var _classNames;\n  var customizePrefixCls = props.prefixCls,\n    justify = props.justify,\n    align = props.align,\n    className = props.className,\n    style = props.style,\n    children = props.children,\n    _props$gutter = props.gutter,\n    gutter = _props$gutter === void 0 ? 0 : _props$gutter,\n    wrap = props.wrap,\n    others = __rest(props, [\"prefixCls\", \"justify\", \"align\", \"className\", \"style\", \"children\", \"gutter\", \"wrap\"]);\n  var _React$useContext = React.useContext(ConfigContext),\n    getPrefixCls = _React$useContext.getPrefixCls,\n    direction = _React$useContext.direction;\n  var _React$useState3 = React.useState({\n      xs: true,\n      sm: true,\n      md: true,\n      lg: true,\n      xl: true,\n      xxl: true\n    }),\n    _React$useState4 = _slicedToArray(_React$useState3, 2),\n    screens = _React$useState4[0],\n    setScreens = _React$useState4[1];\n  // to save screens info when responsiveObserve callback had been call\n  var _React$useState5 = React.useState({\n      xs: false,\n      sm: false,\n      md: false,\n      lg: false,\n      xl: false,\n      xxl: false\n    }),\n    _React$useState6 = _slicedToArray(_React$useState5, 2),\n    curScreens = _React$useState6[0],\n    setCurScreens = _React$useState6[1];\n  // ================================== calc reponsive data ==================================\n  var mergeAlign = useMergePropByScreen(align, curScreens);\n  var mergeJustify = useMergePropByScreen(justify, curScreens);\n  var supportFlexGap = useFlexGapSupport();\n  var gutterRef = React.useRef(gutter);\n  // ================================== Effect ==================================\n  React.useEffect(function () {\n    var token = ResponsiveObserve.subscribe(function (screen) {\n      setCurScreens(screen);\n      var currentGutter = gutterRef.current || 0;\n      if (!Array.isArray(currentGutter) && _typeof(currentGutter) === 'object' || Array.isArray(currentGutter) && (_typeof(currentGutter[0]) === 'object' || _typeof(currentGutter[1]) === 'object')) {\n        setScreens(screen);\n      }\n    });\n    return function () {\n      return ResponsiveObserve.unsubscribe(token);\n    };\n  }, []);\n  // ================================== Render ==================================\n  var getGutter = function getGutter() {\n    var results = [undefined, undefined];\n    var normalizedGutter = Array.isArray(gutter) ? gutter : [gutter, undefined];\n    normalizedGutter.forEach(function (g, index) {\n      if (_typeof(g) === 'object') {\n        for (var i = 0; i < responsiveArray.length; i++) {\n          var breakpoint = responsiveArray[i];\n          if (screens[breakpoint] && g[breakpoint] !== undefined) {\n            results[index] = g[breakpoint];\n            break;\n          }\n        }\n      } else {\n        results[index] = g;\n      }\n    });\n    return results;\n  };\n  var prefixCls = getPrefixCls('row', customizePrefixCls);\n  var _useRowStyle = useRowStyle(prefixCls),\n    _useRowStyle2 = _slicedToArray(_useRowStyle, 2),\n    wrapSSR = _useRowStyle2[0],\n    hashId = _useRowStyle2[1];\n  var gutters = getGutter();\n  var classes = classNames(prefixCls, (_classNames = {}, _defineProperty(_classNames, prefixCls + \"-no-wrap\", wrap === false), _defineProperty(_classNames, prefixCls + \"-\" + mergeJustify, mergeJustify), _defineProperty(_classNames, prefixCls + \"-\" + mergeAlign, mergeAlign), _defineProperty(_classNames, prefixCls + \"-rtl\", direction === 'rtl'), _classNames), className, hashId);\n  // Add gutter related style\n  var rowStyle = {};\n  var horizontalGutter = gutters[0] != null && gutters[0] > 0 ? gutters[0] / -2 : undefined;\n  var verticalGutter = gutters[1] != null && gutters[1] > 0 ? gutters[1] / -2 : undefined;\n  if (horizontalGutter) {\n    rowStyle.marginLeft = horizontalGutter;\n    rowStyle.marginRight = horizontalGutter;\n  }\n  if (supportFlexGap) {\n    // Set gap direct if flex gap support\n    var _gutters = _slicedToArray(gutters, 2);\n    rowStyle.rowGap = _gutters[1];\n  } else if (verticalGutter) {\n    rowStyle.marginTop = verticalGutter;\n    rowStyle.marginBottom = verticalGutter;\n  }\n  // \"gutters\" is a new array in each rendering phase, it'll make 'React.useMemo' effectless.\n  // So we deconstruct \"gutters\" variable here.\n  var _gutters2 = _slicedToArray(gutters, 2),\n    gutterH = _gutters2[0],\n    gutterV = _gutters2[1];\n  var rowContext = React.useMemo(function () {\n    return {\n      gutter: [gutterH, gutterV],\n      wrap: wrap,\n      supportFlexGap: supportFlexGap\n    };\n  }, [gutterH, gutterV, wrap, supportFlexGap]);\n  return wrapSSR( /*#__PURE__*/React.createElement(RowContext.Provider, {\n    value: rowContext\n  }, /*#__PURE__*/React.createElement(\"div\", _extends({}, others, {\n    className: classes,\n    style: _extends(_extends({}, rowStyle), style),\n    ref: ref\n  }), children)));\n});\nif (process.env.NODE_ENV !== 'production') {\n  Row.displayName = 'Row';\n}\nexport default Row;","import { Row } from '../grid';\nexport default Row;","\n    (window.__NEXT_P = window.__NEXT_P || []).push([\n      \"/passes\",\n      function () {\n        return require(\"private-next-pages/passes/index.tsx\");\n      }\n    ]);\n    if(module.hot) {\n      module.hot.dispose(function () {\n        window.__NEXT_P.push([\"/passes\"])\n      });\n    }\n  ","import { _ as _tagged_template_literal } from \"@swc/helpers/_/_tagged_template_literal\";\nfunction _templateObject() {\n    const data = _tagged_template_literal([\n        \"\\n  flex-grow: 1;\\n  background-color: \",\n        \";\\n\"\n    ]);\n    _templateObject = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject1() {\n    const data = _tagged_template_literal([\n        \"\\n  max-width: 600px;\\n  margin: 0 auto;\\n  padding: 40px 0;\\n\\n  @media (max-width: 1200px) {\\n  }\\n  @media (max-width: 430px) {\\n    width: 100%;\\n    margin: 40px 0;\\n    padding: 0 16px;\\n  }\\n\"\n    ]);\n    _templateObject1 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject2() {\n    const data = _tagged_template_literal([\n        \"\\n  display: flex;\\n  flex-direction: column;\\n  gap: 8px;\\n  margin-bottom: 24px;\\n  font-size: 24px;\\n  font-weight: 600;\\n  line-height: 32px;\\n  color: \",\n        \";\\n\"\n    ]);\n    _templateObject2 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject3() {\n    const data = _tagged_template_literal([\n        \"\\n  font-size: 16px;\\n  font-weight: 400;\\n  line-height: 1.5;\\n  letter-spacing: -0.16px;\\n  color: \",\n        \";\\n\"\n    ]);\n    _templateObject3 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject4() {\n    const data = _tagged_template_literal([\n        \"\\n  margin: 40px 0;\\n  display: flex;\\n  gap: 8px;\\n  flex-direction: column;\\n  p {\\n    font-size: 14px;\\n    font-style: normal;\\n    font-weight: 600;\\n    line-height: 22px; /* 157.143% */\\n    letter-spacing: -0.14px;\\n\\n    color: \",\n        \";\\n    font-weight: 600;\\n  }\\n\"\n    ]);\n    _templateObject4 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject5() {\n    const data = _tagged_template_literal([\n        \"\\n  font-size: 14px;\\n\\n  li {\\n    font-weight: 400;\\n    color: \",\n        \";\\n\\n    line-height: 22px;\\n    list-style: initial;\\n    margin-inline-start: 24px;\\n  }\\n  @media (max-width: 768px) {\\n    li {\\n      font-size: 14px;\\n    }\\n  }\\n\"\n    ]);\n    _templateObject5 = function() {\n        return data;\n    };\n    return data;\n}\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport styled from \"styled-components\";\nexport const ContentsWrapper = styled.div.withConfig({\n    componentId: \"sc-c644f458-0\"\n})(_templateObject(), (props)=>props.theme.new.colors.sol_gray_0);\nexport const ContentsContainer = styled.div.withConfig({\n    componentId: \"sc-c644f458-1\"\n})(_templateObject1());\nexport const ContentsStyledTitle = styled.h2.withConfig({\n    componentId: \"sc-c644f458-2\"\n})(_templateObject2(), (props)=>props.theme.new.colors.sol_gray_900);\nexport const Subtitle = styled.p.withConfig({\n    componentId: \"sc-c644f458-3\"\n})(_templateObject3(), (props)=>props.theme.new.colors.sol_gray_500);\nexport const ContentsTitle = (param)=>{\n    let { primary , secondary  } = param;\n    return /*#__PURE__*/ _jsx(_Fragment, {\n        children: /*#__PURE__*/ _jsxs(ContentsStyledTitle, {\n            children: [\n                primary,\n                !!secondary && /*#__PURE__*/ _jsx(Subtitle, {\n                    children: secondary\n                })\n            ]\n        })\n    });\n};\nexport const NoticeContainer = styled.div.withConfig({\n    componentId: \"sc-c644f458-4\"\n})(_templateObject4(), (props)=>props.theme.new.colors.sol_gray_500);\n// page/packages/index 스타일 동일한 부분...충돌 방지로 가져와 사용중, 나중에 정리해야\nexport const NoticeList = styled.ul.withConfig({\n    componentId: \"sc-c644f458-5\"\n})(_templateObject5(), (props)=>props.theme.new.colors.sol_gray_500);\n","import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { styled, Typography } from \"@mui/material\";\nimport { useTheme } from \"styled-components\";\nimport { NoticeList } from \"../PassRegister\";\nconst Notice = (param)=>{\n    let { title , caution , layoutStyle  } = param;\n    const theme = useTheme();\n    const isArray = Array.isArray(caution);\n    return /*#__PURE__*/ _jsxs(NoticeStack, {\n        sx: layoutStyle,\n        children: [\n            /*#__PURE__*/ _jsx(Typography, {\n                variant: \"semibold14\",\n                sx: {\n                    color: \"\".concat(theme.new.colors.sol_gray_500)\n                },\n                children: title\n            }),\n            /*#__PURE__*/ _jsx(NoticeList, {\n                children: isArray ? caution.map((item, index)=>/*#__PURE__*/ _jsx(\"li\", {\n                        children: /*#__PURE__*/ _jsx(Typography, {\n                            variant: \"regular14\",\n                            children: item\n                        })\n                    }, index)) : /*#__PURE__*/ _jsx(Typography, {\n                    variant: \"regular12\",\n                    color: (theme)=>theme.palette.text.secondary,\n                    sx: {\n                        whiteSpace: \"pre-wrap\"\n                    },\n                    children: caution\n                })\n            })\n        ]\n    });\n};\nconst NoticeStack = styled(\"div\")((param)=>{\n    let { theme  } = param;\n    return {\n        position: \"relative\",\n        overflow: \"auto\",\n        backgroundColor: theme.palette.grey[\"0\"],\n        borderRadius: \"6px\",\n        maxHeight: \"90px\",\n        \"&::-webkit-scrollbar\": {\n            width: \"4px\"\n        },\n        \"&::-webkit-scrollbar-thumb\": {\n            borderRadius: \"2px\",\n            background: \"#bbbbbf\"\n        }\n    };\n});\nexport default Notice;\n","import { _ as _tagged_template_literal } from \"@swc/helpers/_/_tagged_template_literal\";\nfunction _templateObject() {\n    const data = _tagged_template_literal([\n        \"\\n  li {\\n    color: \",\n        \";\\n    line-height: 22px;\\n    list-style: initial;\\n    margin-inline-start: 24px;\\n  }\\n\\n  @media (max-width: 768px) {\\n    li {\\n      font-size: 14px;\\n    }\\n  }\\n\"\n    ]);\n    _templateObject = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject1() {\n    const data = _tagged_template_literal([\n        \"\\n  .priceInfo {\\n    display: flex;\\n    align-items: center;\\n    @media (max-width: 768px) {\\n      display: flex;\\n      align-items: flex-start;\\n    }\\n  }\\n\"\n    ]);\n    _templateObject1 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject2() {\n    const data = _tagged_template_literal([\n        \"\\n  position: relative;\\n  padding: 24px;\\n  border-radius: 6px;\\n  background-color: \",\n        \";\\n  border: 1px solid \",\n        \";\\n\\n  :hover {\\n    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.08), 0px 1px 4px 0px rgba(0, 0, 0, 0.04);\\n    transition: box-shadow 0.3s ease-in-out;\\n  }\\n\\n  .ant-row {\\n    width: 100%;\\n    justify-content: space-between;\\n    flex-wrap: nowrap;\\n    gap: 40px;\\n    align-items: center;\\n  }\\n\\n  .ant-col {\\n    align-items: center;\\n\\n    &.clickArea {\\n      cursor: pointer;\\n      flex: 1;\\n    }\\n\\n    &.priceInfo {\\n      text-align: right;\\n      display: flex;\\n      flex-direction: row;\\n      justify-content: space-between;\\n      height: 52px;\\n\\n      .left {\\n        height: 100%;\\n        justify-content: center;\\n        display: flex;\\n        flex-direction: column;\\n        margin-right: 24px;\\n      }\\n\\n      .right {\\n        display: flex;\\n        flex-direction: column;\\n      }\\n    }\\n  }\\n\\n  @media (max-width: 768px) {\\n    padding: 20px;\\n    .ant-row {\\n      flex-direction: column;\\n      align-items: stretch;\\n    }\\n\\n    .ant-col.priceInfo {\\n      align-items: flex-end;\\n    }\\n\\n    .ant-col {\\n      &.priceInfo {\\n        .left {\\n          justify-content: flex-end;\\n        }\\n      }\\n    }\\n  }\\n\"\n    ]);\n    _templateObject2 = function() {\n        return data;\n    };\n    return data;\n}\nfunction _templateObject3() {\n    const data = _tagged_template_literal([\n        \"\\n  width: 100%;\\n  display: flex;\\n  gap: 8px;\\n  padding: 20px 28px;\\n\"\n    ]);\n    _templateObject3 = function() {\n        return data;\n    };\n    return data;\n}\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { BOOKS_LANDING, EBOOKS_LANDING, PASSES_LANDING } from \"@/settings/constant\";\nimport { Button } from \"@bookips/solvook-ui-library\";\nimport { styled as muiStyled } from \"@mui/material\";\nimport { useRouter } from \"next/router\";\nimport { useMemo } from \"react\";\nimport styled from \"styled-components\";\nimport FilledButton from \"../common/Button/FilledButton\";\nexport const getIsPasses = (pathname)=>pathname.startsWith(PASSES_LANDING);\nexport const usePasses = ()=>{\n    const { pathname  } = useRouter();\n    const { isPasses  } = useMemo(()=>{\n        return {\n            isPasses: getIsPasses(pathname)\n        };\n    }, [\n        pathname\n    ]);\n    return {\n        isPackages: isPasses\n    };\n};\nexport const useProductType = ()=>{\n    const { pathname  } = useRouter();\n    // Todo 로직 수정 필요\n    const { productType  } = useMemo(()=>{\n        let productType;\n        switch(pathname.split(\"/\")[1]){\n            case EBOOKS_LANDING:\n                productType = \"ebooks\";\n                break;\n            case PASSES_LANDING:\n                productType = \"package\";\n                break;\n            case BOOKS_LANDING:\n                productType = \"aladinbooks\";\n                break;\n        }\n        return {\n            productType\n        };\n    }, [\n        pathname\n    ]);\n    return {\n        productType\n    };\n};\nexport const Title = muiStyled(\"h5\")((param)=>{\n    let { theme  } = param;\n    return {\n        color: theme.palette.grey[900],\n        marginBottom: \"24px\",\n        ...theme.typography.h4,\n        \"& em\": {\n            color: theme.palette.indigo[500],\n            textDecoration: \"none\"\n        },\n        [theme.breakpoints.down(820)]: {\n            marginBottom: \"20px\"\n        }\n    };\n});\nexport const SubTitle = muiStyled(\"h5\")((param)=>{\n    let { theme  } = param;\n    return {\n        color: theme.palette.text[\"title\"],\n        marginBottom: \"20px\",\n        ...theme.typography.h6,\n        \"& span\": {\n            color: theme.palette.text[\"secondary\"],\n            marginInlineStart: \"4px\",\n            ...theme.typography.body2\n        },\n        [theme.breakpoints.down(\"sm\")]: {\n            \"& span\": {}\n        }\n    };\n});\nexport const Container = muiStyled(\"div\")((param)=>{\n    let { theme  } = param;\n    return {\n        maxWidth: \"1200px\",\n        margin: \"0 auto\",\n        width: \"100%\",\n        // marginBottom: '40px',\n        \".notice-title\": {\n            color: theme.palette.grey[500],\n            fontWeight: \"600\",\n            marginBottom: \"8px\"\n        },\n        [theme.breakpoints.down(\"sm\")]: {\n            gap: \"40px\"\n        }\n    };\n});\nexport const NoticeList = styled.ul.withConfig({\n    componentId: \"sc-f80b46ae-0\"\n})(_templateObject(), (props)=>props.theme.new.colors.sol_gray_500);\nexport const OriginalPrice = muiStyled(\"s\")((param)=>{\n    let { theme  } = param;\n    return {\n        color: theme.palette.text[\"disabled\"],\n        ...theme.typography.body2,\n        [theme.breakpoints.down(\"sm\")]: {\n            textAlign: \"left\"\n        }\n    };\n});\nexport const DiscountRate = muiStyled(\"em\")((param)=>{\n    let { theme  } = param;\n    return {\n        color: theme.palette.red[400],\n        marginInlineEnd: \"4px\",\n        ...theme.typography.h6,\n        [theme.breakpoints.down(\"sm\")]: {}\n    };\n});\nexport const Price = muiStyled(\"p\")((param)=>{\n    let { theme  } = param;\n    return {\n        color: theme.palette.text[\"primary\"],\n        textAlign: \"right\",\n        whiteSpace: \"nowrap\",\n        ...theme.typography.h6,\n        [theme.breakpoints.down(\"sm\")]: {\n            textAlign: \"left\"\n        }\n    };\n});\nexport const PassTitle = muiStyled(\"h5\")((param)=>{\n    let { theme  } = param;\n    return {\n        color: theme.palette.text[\"primary\"],\n        marginBottom: \"4px\",\n        maxWidth: \"380px\",\n        textOverflow: \"ellipsis\",\n        overflow: \"hidden\",\n        display: \"-webkit-box\",\n        WebkitLineClamp: 2,\n        \"-webkit-box-orient\": \"vertical\",\n        wordBreak: \"break-all\",\n        ...theme.typography.h6,\n        [theme.breakpoints.down(\"sm\")]: {\n            display: \"flex\",\n            flexDirection: \"column-reverse\",\n            alignItems: \"flex-start\"\n        }\n    };\n});\nexport const PassPrice = styled.div.withConfig({\n    componentId: \"sc-f80b46ae-1\"\n})(_templateObject1());\nexport const PassItemContainer = styled.li.withConfig({\n    componentId: \"sc-f80b46ae-2\"\n})(_templateObject2(), (pass)=>pass.theme.new.colors.white, (pass)=>pass.theme.new.colors.sol_gray_100);\nexport const SubDescription = muiStyled(\"span\")((param)=>{\n    let { theme  } = param;\n    return {\n        color: theme.palette.text[\"secondary\"],\n        display: \"flex\",\n        alignItems: \"center\",\n        ...theme.typography.body1\n    };\n});\nexport const OrderFilledButton = muiStyled(FilledButton)((param)=>{\n    let { theme  } = param;\n    return {\n        padding: \"10px 16px\",\n        ...theme.typography.subtitle2\n    };\n});\nexport const PurchaseButton = (param)=>{\n    let { onClick , children  } = param;\n    return /*#__PURE__*/ _jsx(OrderFilledButton, {\n        type: \"text\",\n        variant: \"outlined\",\n        className: \"cart-btn\",\n        onClick: onClick,\n        children: children\n    });\n};\nexport const SubscribeButton = (param)=>{\n    let { onClick , children  } = param;\n    return /*#__PURE__*/ _jsx(OrderFilledButton, {\n        type: \"text\",\n        variant: \"solid\",\n        className: \"cart-btn\",\n        onClick: onClick,\n        children: children\n    });\n};\nexport const PassDialogButtonContainer = styled.div.withConfig({\n    componentId: \"sc-f80b46ae-3\"\n})(_templateObject3());\nexport const PassDialogButton = muiStyled(Button)((param)=>{\n    let { theme  } = param;\n    return {\n        width: \"100%\",\n        padding: \"12px 20px\",\n        ...theme.typography.semibold16\n    };\n});\n","import { useCallback, useEffect, useState } from \"react\";\nconst useDialog = (defaultValues)=>{\n    const [isOpen, setIsOpen] = useState(false);\n    const DEFAULT_DIALOG_PROPS = {\n        onClose: ()=>setIsOpen(false),\n        open: isOpen\n    };\n    const [dialogProps, setDialogProps] = useState({\n        ...DEFAULT_DIALOG_PROPS,\n        ...defaultValues\n    });\n    useEffect(()=>{\n        setDialogProps((prev)=>({\n                ...prev,\n                open: isOpen\n            }));\n    }, [\n        isOpen\n    ]);\n    const close = ()=>{\n        setIsOpen(false);\n    };\n    const onOk = async ()=>{\n        try {\n            var _dialogProps_onOk;\n            await ((_dialogProps_onOk = dialogProps.onOk) === null || _dialogProps_onOk === void 0 ? void 0 : _dialogProps_onOk.call(dialogProps));\n        } catch (error) {\n            ;\n        } finally{\n            close();\n        }\n    };\n    const onCancel = async ()=>{\n        try {\n            var _dialogProps_onCancel;\n            await ((_dialogProps_onCancel = dialogProps.onCancel) === null || _dialogProps_onCancel === void 0 ? void 0 : _dialogProps_onCancel.call(dialogProps));\n        } catch (error) {\n            ;\n        } finally{\n            close();\n        }\n    };\n    const modifyDialog = useCallback((modifyProps)=>{\n        setDialogProps({\n            ...DEFAULT_DIALOG_PROPS,\n            ...modifyProps\n        });\n    }, []);\n    const open = useCallback((updateData)=>{\n        updateData && modifyDialog(updateData);\n        setIsOpen(true);\n    }, [\n        modifyDialog\n    ]);\n    return {\n        open,\n        close,\n        modifyDialog,\n        isOpen,\n        dialogProps: {\n            ...dialogProps,\n            onOk,\n            onCancel\n        }\n    };\n};\nexport default useDialog;\n","import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { mixpanelEvent } from \"@/lib/mixpanels/mixpanel\";\nimport { priceFormatter } from \"@/lib/utils\";\nimport { Button } from \"@bookips/solvook-ui-library\";\nimport { Badge, Box, Divider, Typography, styled, useTheme } from \"@mui/material\";\nimport { useRouter } from \"next/router\";\nimport Icon from \"../icon/Icon\";\nimport { ArrowRight, Dot, Sizes, Success_fill } from \"../icon/IconList\";\nconst SPLIT_STRING = \"$\";\nconst AnnualPassCard = (props)=>{\n    const router = useRouter();\n    const theme = useTheme();\n    const { badgeTitle , title , noticeInfo , discountRate , price , originPrice , ctaUrl  } = props;\n    const mainInfo = props.mainInfo.split(SPLIT_STRING);\n    const subInfo = props.subInfo.split(SPLIT_STRING);\n    return /*#__PURE__*/ _jsxs(CardBox, {\n        children: [\n            badgeTitle && /*#__PURE__*/ _jsx(CustomBadge, {\n                children: /*#__PURE__*/ _jsx(Typography, {\n                    variant: \"label\",\n                    children: badgeTitle\n                })\n            }),\n            /*#__PURE__*/ _jsx(CardTitle, {\n                sx: {\n                    backgroundColor: props.badgeTitle ? \"indigo.50\" : \"grey.50\",\n                    borderBottom: \"1px solid \".concat(theme.palette.grey[100]),\n                    borderRadius: \"12px 12px 0 0\"\n                },\n                children: /*#__PURE__*/ _jsx(Typography, {\n                    variant: \"h6\",\n                    children: title\n                })\n            }),\n            /*#__PURE__*/ _jsxs(CardBody, {\n                children: [\n                    /*#__PURE__*/ _jsxs(Box, {\n                        children: [\n                            /*#__PURE__*/ _jsx(TextFlex, {\n                                component: \"ul\",\n                                children: mainInfo.map((info, index)=>/*#__PURE__*/ _jsxs(Box, {\n                                        component: \"li\",\n                                        sx: {\n                                            display: \"flex\",\n                                            gap: \"6px\",\n                                            i: {\n                                                paddingTop: \"4px\"\n                                            }\n                                        },\n                                        children: [\n                                            /*#__PURE__*/ _jsx(Icon, {\n                                                icon: Success_fill,\n                                                size: Sizes.small,\n                                                color: theme.palette.secondary.main\n                                            }),\n                                            /*#__PURE__*/ _jsx(Typography, {\n                                                variant: \"subtitle2\",\n                                                children: info\n                                            })\n                                        ]\n                                    }, info))\n                            }),\n                            /*#__PURE__*/ _jsx(Divider, {\n                                sx: {\n                                    margin: \"12px 0\"\n                                }\n                            }),\n                            /*#__PURE__*/ _jsxs(TextFlex, {\n                                component: \"ul\",\n                                children: [\n                                    subInfo.map((info, index)=>/*#__PURE__*/ _jsxs(Box, {\n                                            component: \"li\",\n                                            sx: {\n                                                display: \"flex\",\n                                                gap: \"6px\",\n                                                i: {\n                                                    margin: \"4px 0\"\n                                                }\n                                            },\n                                            children: [\n                                                /*#__PURE__*/ _jsx(Icon, {\n                                                    icon: Dot,\n                                                    size: Sizes.xsmall,\n                                                    color: theme.palette.text.secondary\n                                                }),\n                                                /*#__PURE__*/ _jsx(Typography, {\n                                                    variant: \"body2\",\n                                                    color: theme.palette.text.secondary,\n                                                    children: info\n                                                })\n                                            ]\n                                        }, info)),\n                                    noticeInfo && /*#__PURE__*/ _jsxs(Box, {\n                                        component: \"li\",\n                                        role: \"button\",\n                                        onClick: ()=>{\n                                            if (props.handleClick) {\n                                                props.handleClick(noticeInfo);\n                                            }\n                                            //mx-02 유의사항 보기 클릭\n                                            mixpanelEvent(\"Product Detail Button Clicked\", {\n                                                \"Product Categories\": \"main product\",\n                                                \"Button UI\": \"text\"\n                                            });\n                                        },\n                                        sx: {\n                                            display: \"flex\",\n                                            alignItems: \"center\",\n                                            gap: \"6px\",\n                                            color: \"grey.500\",\n                                            cursor: \"pointer\",\n                                            \":hover\": {\n                                                textDecoration: \"underline\"\n                                            }\n                                        },\n                                        children: [\n                                            /*#__PURE__*/ _jsx(Icon, {\n                                                icon: Dot,\n                                                size: Sizes.xsmall,\n                                                color: theme.palette.text.secondary\n                                            }),\n                                            /*#__PURE__*/ _jsx(Typography, {\n                                                variant: \"body2\",\n                                                color: theme.palette.text.secondary,\n                                                children: \"유의사항 보기\"\n                                            }),\n                                            /*#__PURE__*/ _jsx(Icon, {\n                                                icon: ArrowRight,\n                                                size: Sizes.xsmall,\n                                                color: theme.palette.grey[500]\n                                            })\n                                        ]\n                                    })\n                                ]\n                            })\n                        ]\n                    }),\n                    /*#__PURE__*/ _jsxs(CardContent, {\n                        children: [\n                            /*#__PURE__*/ _jsxs(Box, {\n                                children: [\n                                    /*#__PURE__*/ _jsx(Typography, {\n                                        variant: \"body2\",\n                                        color: theme.palette.text.disabled,\n                                        sx: {\n                                            textDecoration: \"line-through\",\n                                            textAlign: \"right\"\n                                        },\n                                        children: \"\".concat(originPrice !== price ? originPrice.toLocaleString() + \"원\" : \"\")\n                                    }),\n                                    /*#__PURE__*/ _jsxs(Typography, {\n                                        variant: \"h6\",\n                                        color: theme.palette.red[400],\n                                        sx: {\n                                            textAlign: \"right\"\n                                        },\n                                        children: [\n                                            \"\".concat(discountRate ? discountRate + \"%\" : \"\", \" \"),\n                                            /*#__PURE__*/ _jsx(Typography, {\n                                                component: \"span\",\n                                                variant: \"h6\",\n                                                color: theme.palette.text.primary,\n                                                children: \"\".concat(priceFormatter(price), \"원\")\n                                            })\n                                        ]\n                                    })\n                                ]\n                            }),\n                            /*#__PURE__*/ _jsx(Button, {\n                                variant: badgeTitle ? \"solid\" : \"soft\",\n                                label: \"구매하기\",\n                                size: \"large\",\n                                sx: {\n                                    width: \"100%\"\n                                },\n                                onClick: ()=>{\n                                    //mx-207 구매하기 버튼 클릭 시\n                                    mixpanelEvent(\"Main Product Purchase Button Clicked\", {\n                                        Subject: props.subject,\n                                        \"Product Title\": title,\n                                        url: ctaUrl\n                                    });\n                                    router.push(ctaUrl);\n                                }\n                            })\n                        ]\n                    })\n                ]\n            })\n        ]\n    });\n};\nconst CardBox = styled(Box)((param)=>{\n    let { theme  } = param;\n    return {\n        position: \"relative\",\n        flexGrow: 1,\n        flexBasis: 0,\n        flexShrink: 0,\n        border: \"1px solid \".concat(theme.palette.grey[100]),\n        borderRadius: \"12px\",\n        backgroundColor: theme.palette.common.white\n    };\n});\nconst CardTitle = styled(Box)((param)=>{\n    let { theme  } = param;\n    return {\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        height: \"96px\",\n        padding: \"20px\",\n        h6: {\n            textAlign: \"center\",\n            maxWidth: \"270px\",\n            overflow: \"hidden\",\n            textOverflow: \"ellipsis\",\n            display: \"-webkit-box\",\n            wordBreak: \"keep-all\",\n            whiteSpace: \"break-spaces\",\n            WebkitLineClamp: 2,\n            WebkitBoxOrient: \"vertical\"\n        }\n    };\n});\nexport const CardBody = styled(Box)((param)=>{\n    let { theme  } = param;\n    return {\n        display: \"flex\",\n        flexDirection: \"column\",\n        justifyContent: \"space-between\",\n        height: \"calc(100% - 96px)\",\n        gap: \"20px\",\n        padding: \"20px\"\n    };\n});\nexport const CardContent = styled(Box)((param)=>{\n    let { theme  } = param;\n    return {\n        display: \"flex\",\n        flexDirection: \"column\",\n        gap: \"12px\"\n    };\n});\nexport const TextFlex = styled(Box)((param)=>{\n    let { theme  } = param;\n    return {\n        display: \"flex\",\n        flexDirection: \"column\",\n        gap: \"8px\"\n    };\n});\nexport const CustomBadge = styled(Badge)((param)=>{\n    let { theme  } = param;\n    return {\n        position: \"absolute\",\n        top: \"-10px\",\n        left: \"12px\",\n        borderRadius: \"10px\",\n        backgroundColor: theme.palette.red[400],\n        padding: \"0 4px\",\n        color: theme.palette.common.white\n    };\n});\nexport default AnnualPassCard;\n","import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { Swiper, SwiperSlide } from \"swiper/react\";\nimport \"swiper/css/pagination\";\nimport \"swiper/swiper-bundle.css\";\nimport { mixpanelEvent } from \"@/lib/mixpanels/mixpanel\";\nimport { priceFormatter } from \"@/lib/utils\";\nimport { Button } from \"@bookips/solvook-ui-library\";\nimport { Box, Divider, Typography, styled, useTheme } from \"@mui/material\";\nimport { useRouter } from \"next/router\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport SwiperCore, { A11y, Autoplay, EffectCoverflow, Grid, Navigation, Pagination, Scrollbar } from \"swiper\";\nimport Icon from \"../icon/Icon\";\nimport { ArrowRight, Dot, Sizes, Success_fill } from \"../icon/IconList\";\nimport { CardBody, CardContent, CustomBadge, TextFlex } from \"./AnnualCard\";\nconst SPLIT_STRING = \"$\";\nconst AnnualPassSwiper = (param)=>{\n    let { passItems , handleClick  } = param;\n    SwiperCore.use([\n        Navigation,\n        Pagination,\n        Scrollbar,\n        Autoplay,\n        A11y,\n        Grid,\n        EffectCoverflow\n    ]);\n    const router = useRouter();\n    const theme = useTheme();\n    const swiperRef = useRef(null);\n    const [currentIndex, setCurrentIndex] = useState(null);\n    const handleSlideChange = useCallback((index)=>{\n        if (swiperRef.current && swiperRef.current.slideTo) {\n            swiperRef.current.slideTo(index);\n            setCurrentIndex(index);\n        }\n    }, []);\n    const splitString = useCallback((text)=>{\n        return text.split(SPLIT_STRING);\n    }, []);\n    const initialSlide = useMemo(()=>{\n        if (!passItems) return null;\n        return passItems.findIndex((item)=>item.badgeTitle);\n    }, [\n        passItems\n    ]);\n    useEffect(()=>{\n        if (typeof initialSlide === \"number\") {\n            setCurrentIndex(passItems.findIndex((item)=>item.badgeTitle));\n        }\n    }, [\n        initialSlide,\n        passItems\n    ]);\n    return /*#__PURE__*/ _jsxs(CustomContainer, {\n        children: [\n            /*#__PURE__*/ _jsx(CustomPagination, {\n                children: /*#__PURE__*/ _jsx(Box, {\n                    component: \"ul\",\n                    sx: {\n                        width: \"100%\",\n                        display: \"flex\",\n                        gap: \"8px\",\n                        padding: \"0 20px\"\n                    },\n                    children: passItems.map((param, index)=>/*#__PURE__*/ {\n                        let { title , price , badgeTitle  } = param;\n                        return _jsxs(PagiButton, {\n                            component: \"li\",\n                            role: \"button\",\n                            onClick: ()=>{\n                                handleSlideChange(index);\n                            },\n                            sx: {\n                                border: currentIndex === index ? \"1px solid \".concat(theme.palette.grey[700]) : \"1px solid \".concat(theme.palette.grey[100]),\n                                backgroundColor: currentIndex === index ? theme.palette.blackAndWhite.white : \"\"\n                            },\n                            children: [\n                                badgeTitle && /*#__PURE__*/ _jsx(CustomBadge, {\n                                    sx: {\n                                        left: \"50%\",\n                                        transform: \"translate(-50%, 0)\",\n                                        whiteSpace: \"nowrap\"\n                                    },\n                                    children: /*#__PURE__*/ _jsx(Typography, {\n                                        variant: \"label\",\n                                        children: badgeTitle\n                                    })\n                                }),\n                                /*#__PURE__*/ _jsx(Typography, {\n                                    variant: \"subtitle2\",\n                                    sx: {\n                                        color: currentIndex === index ? theme.palette.text.primary : theme.palette.text.secondary\n                                    },\n                                    children: title\n                                }),\n                                /*#__PURE__*/ _jsx(Typography, {\n                                    variant: \"subtitle1\",\n                                    sx: {\n                                        color: currentIndex === index ? theme.palette.primary.main : theme.palette.text.secondary\n                                    },\n                                    children: \"\".concat(priceFormatter(price), \"원\")\n                                })\n                            ]\n                        }, index);\n                    })\n                })\n            }),\n            currentIndex !== null && /*#__PURE__*/ _jsx(Swiper, {\n                onSwiper: (swiper)=>swiperRef.current = swiper,\n                initialSlide: currentIndex,\n                height: 300,\n                slidesPerView: 1.1,\n                centeredSlides: true,\n                spaceBetween: 8,\n                modules: [\n                    Pagination\n                ],\n                className: \"mySwiper\",\n                onSlideChange: (swiper)=>{\n                    handleSlideChange(swiper.activeIndex);\n                },\n                children: passItems.map((item, index)=>/*#__PURE__*/ _jsx(SwiperSlide, {\n                        children: /*#__PURE__*/ _jsxs(CardBox, {\n                            children: [\n                                /*#__PURE__*/ _jsxs(Box, {\n                                    children: [\n                                        /*#__PURE__*/ _jsx(TextFlex, {\n                                            component: \"ul\",\n                                            children: splitString(item.mainInfo).map((info, index)=>/*#__PURE__*/ _jsxs(Box, {\n                                                    component: \"li\",\n                                                    sx: {\n                                                        display: \"flex\",\n                                                        gap: \"6px\",\n                                                        i: {\n                                                            paddingTop: \"3px\"\n                                                        }\n                                                    },\n                                                    children: [\n                                                        /*#__PURE__*/ _jsx(Icon, {\n                                                            icon: Success_fill,\n                                                            size: Sizes.small,\n                                                            color: theme.palette.secondary.main\n                                                        }),\n                                                        /*#__PURE__*/ _jsx(Typography, {\n                                                            variant: \"subtitle2\",\n                                                            children: info\n                                                        })\n                                                    ]\n                                                }, index))\n                                        }),\n                                        /*#__PURE__*/ _jsx(Divider, {\n                                            sx: {\n                                                margin: \"12px 0\"\n                                            }\n                                        }),\n                                        /*#__PURE__*/ _jsxs(TextFlex, {\n                                            component: \"ul\",\n                                            children: [\n                                                splitString(item.subInfo).map((info, index)=>/*#__PURE__*/ _jsxs(Box, {\n                                                        component: \"li\",\n                                                        sx: {\n                                                            display: \"flex\",\n                                                            alignItems: \"center\",\n                                                            gap: \"6px\"\n                                                        },\n                                                        children: [\n                                                            /*#__PURE__*/ _jsx(Icon, {\n                                                                icon: Dot,\n                                                                size: Sizes.small,\n                                                                color: theme.palette.text.secondary\n                                                            }),\n                                                            /*#__PURE__*/ _jsx(Typography, {\n                                                                variant: \"body2\",\n                                                                color: theme.palette.text.secondary,\n                                                                children: info\n                                                            })\n                                                        ]\n                                                    }, index)),\n                                                item.noticeInfo && /*#__PURE__*/ _jsxs(Box, {\n                                                    component: \"li\",\n                                                    role: \"button\",\n                                                    onClick: ()=>{\n                                                        if (handleClick) {\n                                                            handleClick(item.noticeInfo);\n                                                        }\n                                                        //mx-02 유의사항 보기 클릭\n                                                        mixpanelEvent(\"Product Detail Button Clicked\", {\n                                                            \"Product Categories\": \"main product\",\n                                                            \"Button UI\": \"text\"\n                                                        });\n                                                    },\n                                                    sx: {\n                                                        display: \"flex\",\n                                                        alignItems: \"center\",\n                                                        gap: \"6px\",\n                                                        color: theme.palette.text.secondary,\n                                                        cursor: \"pointer\"\n                                                    },\n                                                    children: [\n                                                        /*#__PURE__*/ _jsx(Icon, {\n                                                            icon: Dot,\n                                                            size: Sizes.small,\n                                                            color: theme.palette.text.secondary\n                                                        }),\n                                                        /*#__PURE__*/ _jsx(Typography, {\n                                                            variant: \"body2\",\n                                                            color: theme.palette.text.secondary,\n                                                            children: \"유의사항 보기\"\n                                                        }),\n                                                        /*#__PURE__*/ _jsx(Icon, {\n                                                            icon: ArrowRight,\n                                                            size: Sizes.xsmall,\n                                                            color: theme.palette.text.secondary\n                                                        })\n                                                    ]\n                                                })\n                                            ]\n                                        })\n                                    ]\n                                }),\n                                /*#__PURE__*/ _jsxs(CardContent, {\n                                    children: [\n                                        /*#__PURE__*/ _jsxs(Box, {\n                                            children: [\n                                                /*#__PURE__*/ _jsx(Typography, {\n                                                    variant: \"body2\",\n                                                    color: theme.palette.text.disabled,\n                                                    sx: {\n                                                        textDecoration: \"line-through\",\n                                                        textAlign: \"right\"\n                                                    },\n                                                    children: item.originPrice !== item.price && \"\".concat(item.originPrice.toLocaleString(), \"원\")\n                                                }),\n                                                /*#__PURE__*/ _jsxs(Typography, {\n                                                    variant: \"h6\",\n                                                    color: theme.palette.red[400],\n                                                    sx: {\n                                                        textAlign: \"right\",\n                                                        display: \"flex\",\n                                                        alignItems: \"center\",\n                                                        justifyContent: \"end\",\n                                                        gap: \"4px\"\n                                                    },\n                                                    children: [\n                                                        \"\".concat(item.discountRate ? Math.trunc(item.discountRate) + \"%\" : \"\", \" \"),\n                                                        /*#__PURE__*/ _jsx(Typography, {\n                                                            component: \"p\",\n                                                            variant: \"h6\",\n                                                            color: theme.palette.text.primary,\n                                                            children: \"\".concat(priceFormatter(item.price), \"원\")\n                                                        })\n                                                    ]\n                                                })\n                                            ]\n                                        }),\n                                        /*#__PURE__*/ _jsx(Button, {\n                                            variant: item.badgeTitle ? \"solid\" : \"soft\",\n                                            label: \"구매하기\",\n                                            size: \"large\",\n                                            sx: {\n                                                width: \"100%\"\n                                            },\n                                            onClick: ()=>router.push(item.ctaUrl)\n                                        })\n                                    ]\n                                })\n                            ]\n                        })\n                    }, index))\n            })\n        ]\n    });\n};\nexport default AnnualPassSwiper;\nconst CustomContainer = styled(\"div\")((param)=>{\n    let { theme  } = param;\n    return {\n        \".swiper-slide\": {\n            display: \"flex\",\n            height: \"auto\",\n            justifyContent: \"center\",\n            // opacity: '0.5',\n            transform: \"scale(0.9)\",\n            transition: \"all 0.3s\"\n        },\n        \".swiper-slide-active\": {\n            opacity: 1,\n            transform: \"scale(1)\"\n        }\n    };\n});\nconst CustomPagination = styled(Box)((param)=>{\n    let { theme  } = param;\n    return {\n        marginBottom: \"8px\"\n    };\n});\nconst PagiButton = styled(Box)((param)=>{\n    let { theme  } = param;\n    return {\n        position: \"relative\",\n        display: \"flex\",\n        flexDirection: \"column\",\n        justifyContent: \"space-between\",\n        alignItems: \"center\",\n        gap: \"4px\",\n        textAlign: \"center\",\n        flexGrow: 1,\n        flexShrink: 0,\n        flexBasis: 0,\n        borderRadius: \"12px\",\n        border: \"1px solid \".concat(theme.palette.grey[100]),\n        padding: \"12px\"\n    };\n});\nconst CardBox = styled(CardBody)((param)=>{\n    let { theme  } = param;\n    return {\n        width: \"100%\",\n        height: \"auto\",\n        backgroundColor: theme.palette.blackAndWhite.white,\n        border: \"1px solid \".concat(theme.palette.grey[100]),\n        borderRadius: \"12px\"\n    };\n});\n","import { useMemo } from \"react\";\nexport const useRenderPassInfoText = (param)=>{\n    let { pass  } = param;\n    const UNLIMITED_PRICE = 999999;\n    const isUnlimitedMaxPrice = useMemo(()=>pass.availableMaxPrice && pass.availableMaxPrice === UNLIMITED_PRICE, [\n        pass\n    ]);\n    const isAvailableMaxPrice = useMemo(()=>!isUnlimitedMaxPrice && pass.availableMaxPrice !== 0, [\n        pass\n    ]);\n    const isNoDiscount = useMemo(()=>{\n        return pass.discountRate === 0;\n    }, [\n        pass\n    ]);\n    return {\n        isUnlimitedMaxPrice,\n        isAvailableMaxPrice,\n        isNoDiscount\n    };\n};\n","import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport { useRenderPassInfoText } from \"@/components/Package/hooks/useRenderPassInfoText\";\nimport { useAuthStore } from \"@/lib/auth/AuthStore\";\nimport { mixpanelEvent } from \"@/lib/mixpanels/mixpanel\";\nimport { numberFormatter, priceFormatter } from \"@/lib/utils\";\nimport { SUBSCRIBE_PAYMENTS } from \"@/settings/constant\";\nimport { Button } from \"@bookips/solvook-ui-library\";\nimport { useMutation, useQuery } from \"@tanstack/react-query\";\nimport { Col, Row } from \"antd\";\nimport { useRouter } from \"next/router\";\nimport React, { useCallback, useEffect, useState } from \"react\";\nimport usePassStore from \"src/store/pass\";\nimport { DiscountRate, OriginalPrice, PassDialogButton, PassDialogButtonContainer, PassItemContainer, PassPrice, PassTitle, Price, PurchaseButton, SubDescription } from \".\";\nimport { getMemberships, PassCategory } from \"../../api/membership\";\nimport { getUserMeta } from \"../../api/users\";\nimport LoginDialog from \"../../store/loginDialog\";\nimport { SubscribeDialog } from \"./SubscribeToPass/SubscribeDialog\";\n//TODO : 남은과업 : 추상화, 관심사 분리\nexport const PassItem = (param)=>{\n    let { pass , handleSubscribeWarningDialog , existSolvook  } = param;\n    const [isOpenSubscribeInfoModal, setIsOpenSubscribeInfoModal] = useState(false);\n    const openPassInfoModal = usePassStore((state)=>state.openPassInfoModal);\n    const { setPurchasePass  } = usePassStore((state)=>({\n            setPurchasePass: state.setPurchasePass\n        }));\n    const { isUnlimitedMaxPrice , isAvailableMaxPrice , isNoDiscount  } = useRenderPassInfoText({\n        pass\n    });\n    const onOrder = useCallback((e)=>{\n        e.stopPropagation();\n        //mx-2\n        mixpanelEvent(\"Product Detail Button Clicked\", {\n            \"Product Categories\": pass.category,\n            \"Product ID\": pass.id,\n            \"Product Title\": pass.title,\n            \"Product Price\": pass.price,\n            \"Button UI\": \"Button\"\n        });\n        //experts-subscribe와 solvook-subscribe의 구매 버튼 클릭시 구독정보 모달 오픈\n        if (pass.category.includes(\"subscribe\")) {\n            setIsOpenSubscribeInfoModal(true);\n            return;\n        }\n        setPurchasePass(pass);\n        openPassInfoModal({\n            passInfo: pass\n        });\n    }, [\n        pass\n    ]);\n    const commonProps = {\n        onOrder,\n        isUnlimitedMaxPrice,\n        isAvailableMaxPrice,\n        availableMaxPrice: pass.availableMaxPrice,\n        title: pass.title,\n        price: pass.price,\n        originPrice: pass.originPrice,\n        discountRate: pass.discountRate,\n        isNoDiscount,\n        existSolvook,\n        period: pass.period,\n        ticketType: pass.deductionMethod,\n        availableCount: pass.availableCount,\n        availableAmount: pass.availableAmount,\n        category: pass.category\n    };\n    useEffect(()=>{\n        if (isOpenSubscribeInfoModal) {\n            mixpanelEvent(\"Product Detail Popup Viewed\", {\n                \"Product Categories\": pass.category,\n                \"Product ID\": pass.id,\n                \"Product Title\": pass.title,\n                \"Product Price\": pass.price\n            });\n        }\n    }, [\n        isOpenSubscribeInfoModal\n    ]);\n    return /*#__PURE__*/ _jsx(_Fragment, {\n        children: (()=>{\n            switch(pass.category){\n                case PassCategory.ExpertSubscription:\n                    return /*#__PURE__*/ _jsx(ExpertSubscriptionPassItem, {\n                        ...commonProps,\n                        pass: pass,\n                        setIsOpenSubscribeInfoModal: setIsOpenSubscribeInfoModal,\n                        isOpenSubscribeInfoModal: isOpenSubscribeInfoModal,\n                        handleSubscribeWarningDialog: handleSubscribeWarningDialog\n                    });\n                case PassCategory.Subscription:\n                    return /*#__PURE__*/ _jsx(SubscriptionPassItem, {\n                        ...commonProps,\n                        pass: pass,\n                        setIsOpenSubscribeInfoModal: setIsOpenSubscribeInfoModal,\n                        isOpenSubscribeInfoModal: isOpenSubscribeInfoModal,\n                        handleSubscribeWarningDialog: handleSubscribeWarningDialog\n                    });\n                case PassCategory.Expert:\n                    return /*#__PURE__*/ _jsx(ExpertPassItem, {\n                        ...commonProps,\n                        pass: pass\n                    });\n                case PassCategory.Solvookplus:\n                case PassCategory.FreePass:\n                case PassCategory.Ticket:\n                    return /*#__PURE__*/ _jsx(TicketPassItem, {\n                        ...commonProps\n                    });\n                default:\n                    return /*#__PURE__*/ _jsx(TicketPassItem, {\n                        ...commonProps\n                    });\n            }\n        })()\n    });\n};\n// 아마도 쏠북 플러스 구독\nconst SubscriptionPassItem = (param)=>{\n    let { onOrder , isUnlimitedMaxPrice , title , price , originPrice , discountRate , isNoDiscount , pass , isOpenSubscribeInfoModal , setIsOpenSubscribeInfoModal , handleSubscribeWarningDialog  } = param;\n    const { push  } = useRouter();\n    const { isLoggedIn  } = useAuthStore();\n    const { openLoginDialog  } = LoginDialog();\n    //구독여부 확인\n    const userMetaMutate = useMutation(getUserMeta);\n    const checkSubscription = useCallback(async ()=>{\n        if (!isLoggedIn) {\n            setIsOpenSubscribeInfoModal(false);\n            openLoginDialog();\n            return;\n        }\n        try {\n            const metaRes = await userMetaMutate.mutateAsync();\n            if (metaRes && (metaRes === null || metaRes === void 0 ? void 0 : metaRes.solvookpluses.find((item)=>item.productInfo.id === pass.id && !item.expiredReason))) {\n                setIsOpenSubscribeInfoModal(false);\n                handleSubscribeWarningDialog();\n                return;\n            }\n        } catch (e) {}\n        setIsOpenSubscribeInfoModal(false);\n        push(\"\".concat(SUBSCRIBE_PAYMENTS, \"?id=\").concat(pass.id));\n    }, [\n        pass\n    ]);\n    return /*#__PURE__*/ _jsxs(_Fragment, {\n        children: [\n            /*#__PURE__*/ _jsx(PassItemLayout, {\n                title: title,\n                description: /*#__PURE__*/ _jsx(_Fragment, {\n                    children: isUnlimitedMaxPrice && /*#__PURE__*/ _jsx(SubDescription, {\n                        children: \"사용범위 내 무제한 / 월 정기결제\"\n                    })\n                }),\n                priceInfo: /*#__PURE__*/ _jsxs(_Fragment, {\n                    children: [\n                        !isNoDiscount && /*#__PURE__*/ _jsxs(OriginalPrice, {\n                            children: [\n                                \"월 \",\n                                numberFormatter(originPrice),\n                                \"원\"\n                            ]\n                        }),\n                        /*#__PURE__*/ _jsxs(\"div\", {\n                            className: \"priceInfo\",\n                            children: [\n                                !isNoDiscount && /*#__PURE__*/ _jsxs(DiscountRate, {\n                                    className: \"ticket\",\n                                    children: [\n                                        discountRate,\n                                        \"%\"\n                                    ]\n                                }),\n                                /*#__PURE__*/ _jsxs(Price, {\n                                    children: [\n                                        \"월 \",\n                                        numberFormatter(price),\n                                        \"원\"\n                                    ]\n                                })\n                            ]\n                        })\n                    ]\n                }),\n                purchaseCTA: /*#__PURE__*/ _jsx(Button, {\n                    variant: \"strokePrimary\",\n                    onClick: (e)=>onOrder(e),\n                    children: \"구독 시작하기\"\n                }),\n                onClick: onOrder\n            }),\n            /*#__PURE__*/ _jsx(SubscribeDialog, {\n                open: isOpenSubscribeInfoModal,\n                onClose: ()=>setIsOpenSubscribeInfoModal(false),\n                contentInfo: pass,\n                footer: /*#__PURE__*/ _jsxs(PassDialogButtonContainer, {\n                    children: [\n                        /*#__PURE__*/ _jsx(PassDialogButton, {\n                            variant: \"strokeSecondary\",\n                            onClick: ()=>{\n                                window.open(\"https://solvookguide.oopy.io/78b924d5-140f-4475-bd9b-d13d99bedb2b\", \"_blank\");\n                            },\n                            children: \"이용방법 보기\"\n                        }),\n                        /*#__PURE__*/ _jsx(PassDialogButton, {\n                            variant: \"solid\",\n                            onClick: ()=>checkSubscription(),\n                            children: \"구독 시작하기\"\n                        })\n                    ]\n                })\n            })\n        ]\n    });\n};\n//  이용권\nconst TicketPassItem = (param)=>{\n    let { onOrder , isUnlimitedMaxPrice , isAvailableMaxPrice , availableMaxPrice , title , price , originPrice , discountRate , isNoDiscount , ...props } = param;\n    const description = props.category === PassCategory.FreePass || props.category === PassCategory.Solvookplus ? \"사용범위 내 무제한\" : props.ticketType === \"amount\" ? \"\".concat(priceFormatter(props.availableAmount), \"원\") : \"\".concat(props.availableCount, \"회 (\").concat(priceFormatter(availableMaxPrice), \"원 이하 자료)\");\n    return /*#__PURE__*/ _jsx(_Fragment, {\n        children: /*#__PURE__*/ _jsx(PassItemLayout, {\n            title: title,\n            description: /*#__PURE__*/ _jsx(_Fragment, {\n                children: /*#__PURE__*/ _jsx(SubDescription, {\n                    children: \"\".concat(description, \" / \").concat(props.period, \"일 사용\")\n                })\n            }),\n            priceInfo: /*#__PURE__*/ _jsxs(_Fragment, {\n                children: [\n                    !isNoDiscount && /*#__PURE__*/ _jsxs(OriginalPrice, {\n                        children: [\n                            numberFormatter(originPrice),\n                            \"원\"\n                        ]\n                    }),\n                    /*#__PURE__*/ _jsxs(\"div\", {\n                        className: \"priceInfo\",\n                        children: [\n                            !isNoDiscount && /*#__PURE__*/ _jsxs(DiscountRate, {\n                                className: \"ticket\",\n                                children: [\n                                    discountRate,\n                                    \"%\"\n                                ]\n                            }),\n                            /*#__PURE__*/ _jsxs(Price, {\n                                children: [\n                                    numberFormatter(price),\n                                    \"원\"\n                                ]\n                            })\n                        ]\n                    })\n                ]\n            }),\n            purchaseCTA: /*#__PURE__*/ _jsx(PurchaseButton, {\n                onClick: onOrder,\n                children: \"구매하기\"\n            }),\n            onClick: onOrder\n        })\n    });\n};\n// 엑스퍼트 구독\nconst ExpertSubscriptionPassItem = (param)=>{\n    let { onOrder , title , price , originPrice , discountRate , isNoDiscount , pass , ...props } = param;\n    const { push  } = useRouter();\n    const { isLoggedIn  } = useAuthStore();\n    const { openLoginDialog  } = LoginDialog();\n    //구독여부 확인\n    const { data: userMembershipResponse  } = useQuery([\n        \"userMembership\"\n    ], ()=>getMemberships({}), {\n        onError: (error)=>{\n            ;\n        },\n        enabled: isLoggedIn\n    });\n    const checkSubscription = useCallback(async ()=>{\n        if (!isLoggedIn) {\n            props.setIsOpenSubscribeInfoModal(false);\n            openLoginDialog();\n            return;\n        }\n        try {\n            const isExistExpertSubscribe = userMembershipResponse === null || userMembershipResponse === void 0 ? void 0 : userMembershipResponse.unexpired.filter((item)=>{\n                if (item.productInfo.category.includes(\"expert-subscribe\")) {\n                    return item;\n                }\n            });\n            const isExistSolvookPass = userMembershipResponse === null || userMembershipResponse === void 0 ? void 0 : userMembershipResponse.unexpired.filter((item)=>{\n                if (item.productInfo.category.includes(\"solvookplus\") || item.productInfo.categoryTitle === \"쏠북 플러스\" && item.productInfo.category.includes(\"ticket\")) {\n                    return item;\n                }\n            });\n            if (isExistSolvookPass.length) {\n                props.setIsOpenSubscribeInfoModal(false);\n                props.existSolvook();\n                return;\n            }\n            if (isExistExpertSubscribe.length) {\n                props.setIsOpenSubscribeInfoModal(false);\n                props.handleSubscribeWarningDialog();\n                return;\n            }\n        } catch (e) {\n            ;\n        }\n        props.setIsOpenSubscribeInfoModal(false);\n        push(\"\".concat(SUBSCRIBE_PAYMENTS, \"?id=\").concat(pass.id));\n    }, [\n        pass,\n        userMembershipResponse\n    ]);\n    return /*#__PURE__*/ _jsxs(_Fragment, {\n        children: [\n            /*#__PURE__*/ _jsx(PassItemLayout, {\n                title: title,\n                description: /*#__PURE__*/ _jsx(SubDescription, {\n                    children: pass.isUnlimited ? \"엑스퍼트 무제한 / 월 정기결제\" : \"\".concat(props.availableCount, \"문제 / 월 정기결제\")\n                }),\n                priceInfo: /*#__PURE__*/ _jsxs(_Fragment, {\n                    children: [\n                        !isNoDiscount && /*#__PURE__*/ _jsxs(OriginalPrice, {\n                            children: [\n                                \"월 \",\n                                numberFormatter(originPrice),\n                                \"원\"\n                            ]\n                        }),\n                        /*#__PURE__*/ _jsxs(\"div\", {\n                            className: \"priceInfo\",\n                            children: [\n                                !isNoDiscount && /*#__PURE__*/ _jsxs(DiscountRate, {\n                                    className: \"ticket\",\n                                    children: [\n                                        discountRate,\n                                        \"%\"\n                                    ]\n                                }),\n                                /*#__PURE__*/ _jsxs(Price, {\n                                    children: [\n                                        \"월 \",\n                                        numberFormatter(price),\n                                        \"원\"\n                                    ]\n                                })\n                            ]\n                        })\n                    ]\n                }),\n                purchaseCTA: /*#__PURE__*/ _jsx(Button, {\n                    variant: \"strokePrimary\",\n                    onClick: (e)=>onOrder(e),\n                    children: \"구독 시작하기\"\n                }),\n                onClick: (e)=>onOrder(e)\n            }),\n            /*#__PURE__*/ _jsx(SubscribeDialog, {\n                open: props.isOpenSubscribeInfoModal,\n                onClose: ()=>{\n                    props.setIsOpenSubscribeInfoModal(false);\n                },\n                contentInfo: pass,\n                footer: /*#__PURE__*/ _jsxs(PassDialogButtonContainer, {\n                    children: [\n                        /*#__PURE__*/ _jsx(PassDialogButton, {\n                            variant: \"strokeSecondary\",\n                            onClick: ()=>{\n                                // mx-6\n                                mixpanelEvent(\"Guide Button Clicked\", {\n                                    \"Guide Categories\": \"Product Detail\",\n                                    \"Product ID\": pass.id,\n                                    \"Product Title\": pass.title,\n                                    \"Guide URL\": \"https://solvookguide.oopy.io/expert\"\n                                });\n                                window.open(\"https://solvookguide.oopy.io/expert\", \"_blank\");\n                            },\n                            children: \"이용방법 보기\"\n                        }),\n                        /*#__PURE__*/ _jsx(PassDialogButton, {\n                            variant: \"solid\",\n                            onClick: ()=>{\n                                checkSubscription();\n                                //mx-3\n                                mixpanelEvent(\"Purchase Button Clicked\", {\n                                    \"Product Categories\": pass.category,\n                                    \"Product ID\": pass.id,\n                                    \"Product Title\": pass.title,\n                                    \"Product Price\": pass.price\n                                });\n                            },\n                            children: \"구독 시작하기\"\n                        })\n                    ]\n                })\n            })\n        ]\n    });\n};\n// 엑스퍼트 이용권\nconst ExpertPassItem = (props)=>{\n    return /*#__PURE__*/ _jsx(_Fragment, {\n        children: /*#__PURE__*/ _jsx(PassItemLayout, {\n            title: props.title,\n            description: /*#__PURE__*/ _jsx(SubDescription, {\n                children: props.pass.isUnlimited ? \"엑스퍼트 무제한 / \".concat(props.period, \"일 사용\") : \"\".concat(props.availableCount, \"문제 / \").concat(props.period, \"일 사용\")\n            }),\n            priceInfo: /*#__PURE__*/ _jsxs(_Fragment, {\n                children: [\n                    !props.isNoDiscount && /*#__PURE__*/ _jsxs(OriginalPrice, {\n                        children: [\n                            numberFormatter(props.originPrice),\n                            \"원\"\n                        ]\n                    }),\n                    /*#__PURE__*/ _jsxs(\"div\", {\n                        className: \"priceInfo\",\n                        children: [\n                            !props.isNoDiscount && /*#__PURE__*/ _jsxs(DiscountRate, {\n                                className: \"ticket\",\n                                children: [\n                                    props.discountRate,\n                                    \"%\"\n                                ]\n                            }),\n                            /*#__PURE__*/ _jsxs(Price, {\n                                children: [\n                                    numberFormatter(props.price),\n                                    \"원\"\n                                ]\n                            })\n                        ]\n                    })\n                ]\n            }),\n            purchaseCTA: /*#__PURE__*/ _jsx(Button, {\n                variant: \"strokePrimary\",\n                onClick: (e)=>{\n                    props.onOrder(e);\n                },\n                children: \"구매하기\"\n            }),\n            onClick: (e)=>{\n                props.onOrder(e);\n            }\n        })\n    });\n};\n// 아이템 Row 레이아웃\nconst PassItemLayout = (param)=>{\n    let { priceInfo , onClick , purchaseCTA , description , title  } = param;\n    return /*#__PURE__*/ _jsx(PassItemContainer, {\n        style: {\n            cursor: \"pointer\"\n        },\n        role: \"button\",\n        onClick: onClick,\n        children: /*#__PURE__*/ _jsxs(Row, {\n            children: [\n                /*#__PURE__*/ _jsxs(Col, {\n                    className: \"clickArea\",\n                    children: [\n                        /*#__PURE__*/ _jsx(PassTitle, {\n                            children: title\n                        }),\n                        description\n                    ]\n                }),\n                /*#__PURE__*/ _jsxs(Col, {\n                    className: \"priceInfo\",\n                    children: [\n                        /*#__PURE__*/ _jsx(PassPrice, {\n                            className: \"left\",\n                            children: priceInfo\n                        }),\n                        /*#__PURE__*/ _jsx(\"div\", {\n                            className: \"right\",\n                            children: purchaseCTA\n                        })\n                    ]\n                })\n            ]\n        })\n    });\n};\n","import { _ as _tagged_template_literal } from \"@swc/helpers/_/_tagged_template_literal\";\nfunction _templateObject() {\n    const data = _tagged_template_literal([\n        \"\\n  display: flex;\\n  flex-direction: column;\\n  gap: 12px;\\n\\n  /* margin-bottom: 40px; */\\n\"\n    ]);\n    _templateObject = function() {\n        return data;\n    };\n    return data;\n}\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport { useAuthStore } from \"@/lib/auth/AuthStore\";\nimport { mixpanelEvent } from \"@/lib/mixpanels/mixpanel\";\nimport { PASSES_ORDER, SOLVOOK_WRITE_STUDIO } from \"@/settings/constant\";\nimport { ConfirmDialog } from \"@bookips/solvook-ui-library\";\nimport { Divider, styled, Typography, useTheme } from \"@mui/material\";\nimport { useQuery } from \"@tanstack/react-query\";\nimport { useRouter } from \"next/router\";\nimport React, { Fragment, useCallback, useState } from \"react\";\nimport { getMemberships, PassCategory } from \"src/api/membership\";\nimport LoginDialog from \"src/store/loginDialog\";\nimport usePassStore from \"src/store/pass\";\nimport { Container, SubTitle } from \".\";\nimport Icon from \"../icon/Icon\";\nimport { ArrowRight2px, Check_Thin, Sizes } from \"../icon/IconList\";\nimport { PassInfoModal } from \"./PassInfoModal\";\nimport { PassItem } from \"./PassItem\";\n//이용권 구매 리스트\nexport const PassList = (param)=>{\n    let { data , handleSubscribeWarningDialog  } = param;\n    const theme = useTheme();\n    const { push  } = useRouter();\n    const { selectPassItem , closePassInfoModal  } = usePassStore((state)=>({\n            selectPassItem: state.selectedPass,\n            closePassInfoModal: state.closePassInfoModal\n        }));\n    const { isLoggedIn  } = useAuthStore();\n    const { openLoginDialog  } = LoginDialog();\n    const [existSolvook, setExistSolvook] = useState(false) //이미 쏠북을 이용중이에요.\n    ;\n    const { data: userMembershipResponse  } = useQuery([\n        \"userMembership\"\n    ], ()=>getMemberships({}), {\n        onError: (error)=>{\n            ;\n        },\n        enabled: isLoggedIn,\n        retry: 3\n    });\n    //엑스퍼트 이용권 구매시 사용자의 이용권 확인, 쏠플, 쏠구독권인 사람은 기간권을 구매할 수 없다.\n    const checkPassCondition = useCallback(async ()=>{\n        if (!selectPassItem) return;\n        if (selectPassItem.category !== PassCategory.Expert) return;\n        if (!isLoggedIn) {\n            openLoginDialog();\n            closePassInfoModal();\n            return;\n        }\n        try {\n            // unexpired에서 확인을 하기 때문에, 만료된 이용권은 확인하지 않는다.\n            const isExistSolvookPass = userMembershipResponse === null || userMembershipResponse === void 0 ? void 0 : userMembershipResponse.unexpired.filter((item)=>{\n                if (item.productInfo.category.includes(\"solvookplus\") || item.productInfo.category.includes(\"solvookplus-subscribe\") || item.productInfo.categoryTitle === \"쏠북 플러스\" && item.productInfo.category.includes(\"ticket\")) {\n                    return item;\n                }\n            });\n            if (isExistSolvookPass.length) {\n                closePassInfoModal();\n                setExistSolvook(true);\n                return;\n            }\n        } catch (e) {\n            ;\n        }\n        push(\"\".concat(PASSES_ORDER, \"?id=\").concat(selectPassItem.id));\n        closePassInfoModal();\n    }, [\n        selectPassItem,\n        userMembershipResponse\n    ]);\n    if (data.subject === \"\") return /*#__PURE__*/ _jsx(_Fragment, {});\n    return /*#__PURE__*/ _jsxs(_Fragment, {\n        children: [\n            data.products.map((group, index)=>{\n                const { categoryTitle , categoryTitleDescription , categoryTitleDescriptionUrl , items  } = group;\n                return /*#__PURE__*/ _jsxs(Fragment, {\n                    children: [\n                        /*#__PURE__*/ _jsxs(Container, {\n                            children: [\n                                /*#__PURE__*/ _jsx(SubTitle, {\n                                    children: categoryTitle\n                                }),\n                                categoryTitleDescription && categoryTitleDescriptionUrl && /*#__PURE__*/ _jsxs(MoreInfoButtonBox, {\n                                    href: categoryTitleDescriptionUrl,\n                                    onClick: ()=>{\n                                        // mx-154 이용권 카테고리 설명 모듈 클릭 시\n                                        mixpanelEvent(\"Pass Category Description Clicked\", {\n                                            \"Pass Categories\": categoryTitle,\n                                            Url: categoryTitleDescriptionUrl\n                                        });\n                                    },\n                                    children: [\n                                        /*#__PURE__*/ _jsx(Icon, {\n                                            icon: Check_Thin,\n                                            color: theme.palette.secondary.main,\n                                            size: Sizes.xmedium\n                                        }),\n                                        /*#__PURE__*/ _jsxs(\"div\", {\n                                            children: [\n                                                /*#__PURE__*/ _jsx(Typography, {\n                                                    children: categoryTitleDescription\n                                                }),\n                                                /*#__PURE__*/ _jsx(Icon, {\n                                                    icon: ArrowRight2px,\n                                                    size: Sizes.small,\n                                                    color: theme.palette.grey[500]\n                                                })\n                                            ]\n                                        })\n                                    ]\n                                }),\n                                /*#__PURE__*/ _jsx(PackageList, {\n                                    children: items === null || items === void 0 ? void 0 : items.map((pass, index)=>/*#__PURE__*/ _jsx(PassItem, {\n                                            pass: pass,\n                                            handleSubscribeWarningDialog: handleSubscribeWarningDialog,\n                                            existSolvook: ()=>setExistSolvook((prev)=>!prev)\n                                        }, index))\n                                })\n                            ]\n                        }, index),\n                        index + 1 < data.products.length && /*#__PURE__*/ _jsx(Divider, {})\n                    ]\n                }, index);\n            }),\n            /*#__PURE__*/ _jsx(PassInfoModal, {\n                ctaAction: selectPassItem && selectPassItem.category === PassCategory.Expert ? ()=>{\n                    checkPassCondition();\n                    //mx-3 구매하기 버튼 클릭시\n                    mixpanelEvent(\"Purchase Button Clicked\", {\n                        \"Product Categories\": selectPassItem.category,\n                        \"Product ID\": selectPassItem.id,\n                        \"Product Title\": selectPassItem.title,\n                        \"Product Price\": selectPassItem.price\n                    });\n                } : null\n            }),\n            /*#__PURE__*/ _jsx(ConfirmDialog, {\n                open: existSolvook,\n                onClose: ()=>setExistSolvook(false),\n                title: \"이미 쏠북 플러스를 이용 중이에요.\",\n                content: \"쏠북 플러스 기간동안 엑스퍼트는 추가 결제없이 사용할 수 있어요.\",\n                onOk: ()=>{\n                    // mx-9\n                    mixpanelEvent(\"Popup Button Clicked\", {\n                        \"Popup Type\": \"Already Subscribed\",\n                        \"Popup Title\": \"이미 쏠북 플러스를 이용 중이에요\",\n                        \"Button Name\": \"엑스퍼트 사용하기\",\n                        \"Button URL\": SOLVOOK_WRITE_STUDIO\n                    });\n                    // handleSubscribeWarningDialog()\n                    push(SOLVOOK_WRITE_STUDIO);\n                },\n                onCancel: ()=>{\n                    // mx-9\n                    mixpanelEvent(\"Popup Button Clicked\", {\n                        \"Popup Type\": \"Already Subscribed\",\n                        \"Popup Title\": \"이미 쏠북 플러스를 이용 중이에요\",\n                        \"Button Name\": \"확인\",\n                        \"Button URL\": null\n                    });\n                    setExistSolvook(false);\n                },\n                cancelText: \"확인\",\n                okText: \"엑스퍼트 사용하기\",\n                sx: {\n                    button: {\n                        width: \"100%\"\n                    }\n                }\n            })\n        ]\n    });\n};\nconst PackageList = styled(\"ul\")(_templateObject());\nconst MoreInfoButtonBox = styled(\"a\")((param)=>{\n    let { theme  } = param;\n    return {\n        display: \"flex\",\n        backgroundColor: theme.palette.blue[50],\n        gap: \"8px\",\n        padding: \"12px\",\n        borderRadius: \"6px\",\n        marginBottom: \"12px\",\n        div: {\n            width: \"100%\",\n            display: \"flex\",\n            gap: \"12px\",\n            alignItems: \"center\",\n            justifyContent: \"space-between\"\n        },\n        \"&:hover\": {\n            backgroundColor: theme.palette.blue[100]\n        }\n    };\n});\n","import { mixpanelEvent } from \"@/lib/mixpanels/mixpanel\";\nimport { PASSES_LANDING } from \"@/settings/constant\";\nimport { useQuery } from \"@tanstack/react-query\";\nimport { useRouter } from \"next/router\";\nimport { useCallback, useMemo } from \"react\";\nimport { getPassMainProducts, getPassProducts } from \"src/api/membership\";\nimport { Subjects, SubjectsWithString } from \"src/api/product\";\nexport const usePassTab = ()=>{\n    const router = useRouter();\n    const { subject  } = router.query;\n    const DEFAULT_CATEGORY = Subjects.EN;\n    const passCategory = subject ? subject : DEFAULT_CATEGORY;\n    const { data: passResponse , isSuccess: isPassProductsSuccess  } = useQuery([\n        \"getPassProducts\",\n        passCategory\n    ], ()=>getPassProducts({\n            subjectCode: passCategory\n        }), {\n        retry: 1\n    });\n    const { data: passMainItemResponse , isSuccess: isAnnualPassProductsSuccess  } = useQuery([\n        \"getPassMainProducts\",\n        passCategory\n    ], ()=>getPassMainProducts({\n            subjectCode: passCategory\n        }), {\n        retry: 1\n    });\n    const handlePassTab = useCallback((subject)=>{\n        router.push({\n            pathname: PASSES_LANDING,\n            query: {\n                subject\n            }\n        });\n        // mx-108 이용권 과목 탭 클릭시\n        mixpanelEvent(\"Tab UI Clicked\", {\n            \"Tab Type\": \"Pass Product\",\n            \"Tab Name\": SubjectsWithString[subject]\n        });\n    }, [\n        router\n    ]);\n    //엑스퍼트 이용권을 먼저 보여주기 위한 order sorting\n    const groupBySubjectData = useMemo(()=>{\n        if (!passResponse) return null;\n        const filterSubject = passResponse.data.filter((group)=>group.subject === SubjectsWithString[passCategory])[0];\n        if (!filterSubject) return null;\n        // 상위 하위 아이템들 order값으로 order sorting\n        const productsOrdering = [\n            ...filterSubject.products\n        ].sort((a, b)=>a.categoryOrder - b.categoryOrder).map((product, idx)=>{\n            product.items = [\n                ...product.items\n            ].sort((a, b)=>a.order - b.order);\n            return product;\n        });\n        return {\n            ...filterSubject,\n            products: productsOrdering\n        };\n    }, [\n        passResponse\n    ]);\n    var _passMainItemResponse_data;\n    return {\n        handlePassTab,\n        passCategory,\n        groupBySubjectData,\n        isPassProductsSuccess: isPassProductsSuccess,\n        isAnnualPassProductsSuccess: isAnnualPassProductsSuccess,\n        annualPass: (_passMainItemResponse_data = passMainItemResponse === null || passMainItemResponse === void 0 ? void 0 : passMainItemResponse.data) !== null && _passMainItemResponse_data !== void 0 ? _passMainItemResponse_data : []\n    };\n};\n","import { jsx as _jsx } from \"react/jsx-runtime\";\nimport React from \"react\";\nimport CheckLoginDialog from \"./CheckLoginDialog\";\nimport LoginDialog from \"../../store/loginDialog\";\nexport const LoginDialogWithStore = (param)=>{\n    let {} = param;\n    const { isOpenLoginDialog , closeLoginDialog  } = LoginDialog();\n    return /*#__PURE__*/ _jsx(CheckLoginDialog, {\n        onClose: closeLoginDialog,\n        open: isOpenLoginDialog\n    });\n};\n","import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { AdBanner } from \"@/components/Banner/AdBanner/AdBanner\";\nimport AnnualPassCard from \"@/components/Package/AnnualCard\";\nimport AnnualPassSwiper from \"@/components/Package/AnnualPassSwiper\";\nimport { PassList } from \"@/components/Package/PassList\";\nimport Notice from \"@/components/Package/SubscribeToPass/SubscribeNotice\";\nimport { usePassTab } from \"@/components/Package/hooks/usePassTab\";\nimport { LoginDialogWithStore } from \"@/components/modal/LoginDialogWithStore\";\nimport useDialog from \"@/hooks/useDialog\";\nimport { REDIRECT_QUERY } from \"@/hooks/useRedirect\";\nimport useSearchParams from \"@/hooks/useSearchParams\";\nimport { useAuthStore } from \"@/lib/auth/AuthStore\";\nimport { mixpanelEvent } from \"@/lib/mixpanels/mixpanel\";\nimport useWindowDimensions from \"@/lib/web-ui/useWindowDimensions\";\nimport { MYPAGE_PASSES } from \"@/settings/constant\";\nimport { ConfirmDialog, Tabs } from \"@bookips/solvook-ui-library\";\nimport { Box, Typography, styled } from \"@mui/material\";\nimport { useRouter } from \"next/router\";\nimport { useCallback, useEffect } from \"react\";\nimport { Subjects } from \"src/api/product\";\nimport usePassStore from \"src/store/pass\";\nconst passNoticeList = [\n    \"이용권 상품의 이용 기한, 이용 범위, 이용 방법 등은 이용권마다 상이할 수 있습니다. 이용권 상품을 클릭하고 <이용권 상세정보>를 확인해주세요.\",\n    \"이용권 상품의 환불은 쏠북 서비스 페이지 우측 하단 고객 센터 문의 버튼 혹은 메인 페이지 하단의 채널톡 문의를 통해 접수할 수 있습니다. \",\n    \"환불 정책은 이용권 상품별로 상이하오니 이용권 상품을 클릭하고 <이용권 상세정보>를 확인하거나, 서비스 약관 내 환불 정책을 확인해주세요.\"\n];\n// tab value는 number 타입이므로\nconst SubjectIndex = {\n    EN: 0,\n    KO: 1,\n    MA: 2,\n    SC: 3,\n    SO: 4,\n    ALL: 5\n};\nconst DEFAULT_TAB = SubjectIndex.EN;\nconst MembershipPage = ()=>{\n    var _annualPass_;\n    const { push , query  } = useRouter();\n    const { user , isLoggedIn  } = useAuthStore();\n    const { isMobile  } = useWindowDimensions();\n    const searchParam = useSearchParams();\n    const { open , dialogProps  } = useDialog();\n    const { groupBySubjectData , handlePassTab , passCategory , isPassProductsSuccess , annualPass , isAnnualPassProductsSuccess  } = usePassTab();\n    const { tabsProps , changeTab  } = Tabs.useTabs(passCategory ? SubjectIndex[passCategory.toString()] : DEFAULT_TAB);\n    const { setRedirectPath  } = usePassStore((state)=>({\n            setRedirectPath: state.setRedirectPath\n        }));\n    const handleSubscribeWarningDialog = ()=>{\n        open({\n            ...dialogMessages.alreadySubscribed\n        });\n    };\n    const dialogMessages = {\n        preparing: {\n            title: \"상품을 준비중이에요.\",\n            okText: \"확인\",\n            onOk: ()=>{\n                handleClickTab(undefined, DEFAULT_TAB);\n            },\n            onClose: ()=>{\n                handleClickTab(undefined, DEFAULT_TAB);\n            }\n        },\n        alreadySubscribed: {\n            title: \"이미 구독중인 상품이에요.\",\n            okText: \"확인\",\n            cancelText: \"이용권 관리 가기\",\n            content: \"상품의 구독정보를 보고 싶으시다면 '이용권 관리 가기'를 눌러주세요.\",\n            onCancel: ()=>{\n                // mx-9\n                mixpanelEvent(\"Popup Button Clicked\", {\n                    \"Popup Type\": \"Already Subscribed\",\n                    \"Popup Title\": \"이미 구독중인 상품이에요\",\n                    \"Button Name\": \"이용권 관리 가기\",\n                    \"Button URL\": MYPAGE_PASSES\n                });\n                push(MYPAGE_PASSES);\n            },\n            onOk: ()=>{\n                // mx-9\n                mixpanelEvent(\"Popup Button Clicked\", {\n                    \"Popup Type\": \"Already Subscribed\",\n                    \"Popup Title\": \"이미 구독중인 상품이에요\",\n                    \"Button Name\": \"확인\",\n                    \"Button URL\": null\n                });\n            }\n        }\n    };\n    const handleClickTab = useCallback((_, key)=>{\n        changeTab(_, key);\n        const findKey = Object.keys(SubjectIndex).find((subject)=>SubjectIndex[subject] === key);\n        handlePassTab(findKey);\n    }, [\n        handlePassTab\n    ]);\n    const getPropsDialog = useCallback((info)=>{\n        open({\n            scroll: \"paper\",\n            title: \"유의사항\",\n            content: info,\n            okText: \"확인\"\n        });\n    }, [\n        open\n    ]);\n    // 엑스퍼트에서 넘어온 경우를 위해 redirect 저장을 합니다.\n    useEffect(()=>{\n        if (searchParam.get(REDIRECT_QUERY)) {\n            setRedirectPath(searchParam.get(REDIRECT_QUERY));\n        }\n    }, [\n        searchParam\n    ]);\n    // 연간권과 이용권 리스트 모두 없다면 준비중 다이얼로그를 띄웁니다.\n    useEffect(()=>{\n        if (!isPassProductsSuccess || !isAnnualPassProductsSuccess) return;\n        if (!!!annualPass.length && !groupBySubjectData) {\n            open({\n                ...dialogMessages.preparing\n            });\n        }\n    }, [\n        isPassProductsSuccess,\n        isAnnualPassProductsSuccess,\n        annualPass.length,\n        groupBySubjectData\n    ]);\n    // 1.17.0 이용권 페이지 진입시, 유저 타입에 따라 초기 탭 상태값이 달라진다.\n    // 유저 타입이 학생이나 학부모라면, 초기 탭 상태값은 전과목으로 설정한다.\n    // 유저 타입이 선생님이나 원장이라면, 초기 탭 상태값은 유저의 주 과목으로 설정한다.\n    useEffect(()=>{\n        if (!isLoggedIn) return;\n        if (query.subject) return;\n        if (user.job === \"parent\" || user.job === \"student\") {\n            handleClickTab(undefined, SubjectIndex.ALL);\n        }\n        if (user.job === \"teacher\" || user.job === \"principal\") {\n            handleClickTab(undefined, SubjectIndex[user.mainSubject || Subjects.EN]);\n        }\n    }, [\n        isLoggedIn,\n        user,\n        query\n    ]);\n    return /*#__PURE__*/ _jsxs(MembershipPageLayout, {\n        children: [\n            /*#__PURE__*/ _jsx(MaxWidthContainer, {\n                children: /*#__PURE__*/ _jsxs(Box, {\n                    sx: {\n                        display: \"flex\",\n                        flexDirection: \"column\",\n                        gap: \"20px\"\n                    },\n                    children: [\n                        /*#__PURE__*/ _jsx(Typography, {\n                            variant: \"h4\",\n                            sx: {},\n                            children: \"이용권 구매\"\n                        }),\n                        /*#__PURE__*/ _jsxs(Tabs, {\n                            ...tabsProps,\n                            onChange: handleClickTab,\n                            size: isMobile ? \"sm\" : \"md\",\n                            children: [\n                                /*#__PURE__*/ _jsx(Tabs.Tab, {\n                                    label: \"영어\",\n                                    value: SubjectIndex.EN\n                                }),\n                                /*#__PURE__*/ _jsx(Tabs.Tab, {\n                                    label: \"국어\",\n                                    value: SubjectIndex.KO\n                                }),\n                                /*#__PURE__*/ _jsx(Tabs.Tab, {\n                                    label: \"수학\",\n                                    value: SubjectIndex.MA\n                                }),\n                                /*#__PURE__*/ _jsx(Tabs.Tab, {\n                                    label: \"과학\",\n                                    value: SubjectIndex.SC\n                                }),\n                                /*#__PURE__*/ _jsx(Tabs.Tab, {\n                                    label: \"사회\",\n                                    value: SubjectIndex.SO\n                                }),\n                                /*#__PURE__*/ _jsx(Tabs.Tab, {\n                                    label: \"전과목\",\n                                    value: SubjectIndex.ALL\n                                })\n                            ]\n                        })\n                    ]\n                })\n            }),\n            /*#__PURE__*/ _jsxs(PassListContainer, {\n                children: [\n                    /*#__PURE__*/ _jsx(MaxWidthContainer, {\n                        children: /*#__PURE__*/ _jsx(AdBanner, {\n                            position: \"passes\",\n                            subject: passCategory,\n                            mixpanelPosition: \"passes\"\n                        })\n                    }),\n                    annualPass.length ? /*#__PURE__*/ _jsxs(Box, {\n                        children: [\n                            /*#__PURE__*/ _jsx(MaxWidthContainer, {\n                                children: /*#__PURE__*/ _jsx(Typography, {\n                                    variant: \"h5\",\n                                    sx: {\n                                        marginBottom: \"20px\"\n                                    },\n                                    children: (_annualPass_ = annualPass[0]) === null || _annualPass_ === void 0 ? void 0 : _annualPass_.groupTitle\n                                })\n                            }),\n                            annualPass && isMobile ? /*#__PURE__*/ _jsx(AnnualPassSwiper, {\n                                passItems: annualPass,\n                                handleClick: (info)=>{\n                                    getPropsDialog(info);\n                                }\n                            }) : /*#__PURE__*/ _jsx(MaxWidthContainer, {\n                                children: /*#__PURE__*/ _jsx(CardBox, {\n                                    children: annualPass.map((pass)=>/*#__PURE__*/ _jsx(AnnualPassCard, {\n                                            ...pass,\n                                            handleClick: (info)=>{\n                                                getPropsDialog(info);\n                                            }\n                                        }, pass.seq))\n                                })\n                            })\n                        ]\n                    }) : \"\",\n                    /*#__PURE__*/ _jsxs(MaxWidthContainer, {\n                        children: [\n                            groupBySubjectData && /*#__PURE__*/ _jsx(PassList, {\n                                data: groupBySubjectData,\n                                handleSubscribeWarningDialog: handleSubscribeWarningDialog\n                            }),\n                            /*#__PURE__*/ _jsx(Notice, {\n                                title: \"유의사항\",\n                                caution: passNoticeList,\n                                layoutStyle: {\n                                    maxHeight: \"unset\"\n                                }\n                            })\n                        ]\n                    })\n                ]\n            }),\n            /*#__PURE__*/ _jsx(LoginDialogWithStore, {}),\n            /*#__PURE__*/ _jsx(ConfirmDialog, {\n                ...dialogProps,\n                sx: {\n                    maxHeight: \"calc(100vh - 96px)\",\n                    margin: \"48px 0\",\n                    whiteSpace: \"break-spaces\"\n                }\n            })\n        ]\n    });\n};\nexport default MembershipPage;\nconst MembershipPageLayout = styled(\"div\")((param)=>{\n    let { theme  } = param;\n    return {\n        width: \"100%\",\n        height: \"100%\",\n        minHeight: \"calc(100vh - 75px)\",\n        marginTop: \"40px\",\n        [theme.breakpoints.down(\"sm\")]: {\n            height: \"100%\",\n            gap: \"40px\"\n        }\n    };\n});\nconst MaxWidthContainer = styled(\"div\")((param)=>{\n    let { theme  } = param;\n    return {\n        width: \"100%\",\n        maxWidth: \"840px\",\n        display: \"flex\",\n        flexDirection: \"column\",\n        gap: \"48px\",\n        margin: \"0 auto\",\n        [theme.breakpoints.down(\"lg\")]: {\n            padding: \"0 32px\"\n        },\n        [theme.breakpoints.down(\"sm\")]: {\n            height: \"100%\",\n            padding: \"0 20px\",\n            gap: \"40px\"\n        }\n    };\n});\nconst PassListContainer = styled(\"div\")((param)=>{\n    let { theme  } = param;\n    return {\n        width: \"100%\",\n        minHeight: \"100vh\",\n        backgroundColor: theme.palette.grey[0],\n        borderTop: \"1px solid \".concat(theme.palette.grey[100]),\n        display: \"flex\",\n        flexDirection: \"column\",\n        gap: \"48px\",\n        padding: \"40px 0\",\n        [theme.breakpoints.down(\"lg\")]: {\n            padding: \"48px 0\"\n        },\n        [theme.breakpoints.down(\"sm\")]: {\n            padding: \"40px 0\",\n            gap: \"40px\"\n        }\n    };\n});\nconst CardBox = styled(Box)((param)=>{\n    let { theme  } = param;\n    return {\n        width: \"100%\",\n        maxWidth: \"840px\",\n        margin: \"0 auto\",\n        display: \"flex\",\n        gap: \"12px\"\n    };\n});\n","// extracted by mini-css-extract-plugin","// extracted by mini-css-extract-plugin"],"names":[],"sourceRoot":""}