{"version":3,"sources":["webpack:///./Scripts/Components/ProductPageTabs/ProductPageTab.CarModel.js","webpack:///./Scripts/Components/ProductPageTabs/ProductPageTab.Main.js","webpack:///./Scripts/Components/ProductPageTabs/ProductPageTab.RegNo.js","webpack:///./Scripts/Components/ProductPageTabs/ProductPageTabs.Container.js","webpack:///./Scripts/Components/VariantPicker.Select.js"],"names":["currentVariant","selectLabel","selectedOption","onOptionChanged","active","dispatch","useDispatch","options","setOptions","useState","error","setError","model","isLoading","advancedSearchError","useSelector","state","advancedSearch","carModel","brands","series","models","variants","selectedBrandSystemId","selectedSeries","selectedModelSystemId","selectedVariantSystemId","searchInfo","useEffect","searchCarModel","fetchOptions","setIsLoading","getVariantsByCarModel","value","then","data","updatedOption","flatMap","o","find","catch","err","response","json","finally","onSelectChange","brand","variant","getSelectOptions","obj","Object","keys","map","systemId","label","hasOptions","length","className","translate","onChange","isDisabled","placeholder","s","text","onClick","buttonText","type","onOptionSelected","price","showPriceToggle","onQuantityToggle","carName","setCarName","regNo","setRegNo","carModelVariants","setCarModelVariants","selectedCarModelVariantSystemId","setSelectedCarModelVariantSystemId","carModelVariantSelectRef","useRef","SearchNotFound","setSearchNotFound","onRegNoSearch","current","clearValue","getCarModelVariants","carModelVariantSystemId","setGeneralRowNote","toUpperCase","onEnterKey","autoFocus","disabled","size","color","icon","style","display","marginBottom","opt","name","boltPattern","abe","ref","ProductPageTabsContainer","props","activeTab","setActiveTab","setSelectedOption","setCurrentVariant","userIsAuthenticated","ProductPageTabHeader","tabLabel","getVariantPicker","variantPicker","console","log","quantity","priceDisplayQuantity","articleNumber","canBuy","renderForServer","option","formatGroupLabel","group","dangerouslySetInnerHTML","__html"],"mappings":"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","file":"2756.9381031d7b7a24c4f9e5.js","sourcesContent":["import React, { useCallback, useEffect, useState } from 'react';\nimport { getVariantsByCarModel } from '../../Actions/VariantPicker.action';\nimport VariantPickerSelect from '../VariantPicker.Select';\nimport Notification from '../Notification';\nimport { translate } from '../../Services/translation';\nimport AdvancedSearchSearchInfoBox from '../AdvancedSearch/AdvancedSearch.SearchInfoBox';\nimport { useDispatch, useSelector } from 'react-redux';\nimport {\n  searchCarModel,\n  setIsLoading,\n} from '../../Actions/AdvancedSearch.action';\nimport StyledSelect from '../StyledSelect';\nimport ProductPriceModel from '../ProductPriceModel';\nimport PriceDisplayQuantityToggle from '../PriceDisplayQuantityToggle';\n\nconst ProductPageTabCarModel = ({\n  currentVariant,\n  selectLabel,\n  selectedOption,\n  onOptionChanged,\n  active,\n}) => {\n  const dispatch = useDispatch();\n  const [options, setOptions] = useState();\n  const [error, setError] = useState();\n  const { model, isLoading, error: advancedSearchError } = useSelector(\n    (state) => state.advancedSearch\n  );\n  const { carModel } = model ?? {};\n  const {\n    brands,\n    series,\n    models,\n    variants,\n    selectedBrandSystemId,\n    selectedSeries,\n    selectedModelSystemId,\n    selectedVariantSystemId,\n    searchInfo,\n  } = carModel ?? {};\n\n  useEffect(() => {\n    dispatch(searchCarModel({}, false));\n  }, []);\n\n  useEffect(() => advancedSearchError && setError(advancedSearchError), [\n    advancedSearchError,\n  ]);\n\n  const fetchOptions = () => {\n    setError(null);\n    dispatch(setIsLoading(true));\n    return getVariantsByCarModel(currentVariant.value, selectedVariantSystemId)\n      .then((data) => {\n        setOptions(data.options);\n        if (selectedOption) {\n          const updatedOption = data.options\n            .flatMap((o) => o.options)\n            .find((o) => o.value == selectedOption.value);\n          onOptionChanged(updatedOption);\n        }\n      })\n      .catch((err) => {\n        err.response.json().then((data) => setError(data.error));\n      })\n      .finally(() => dispatch(setIsLoading(false)));\n  };\n\n  useEffect(() => {\n    if (selectedVariantSystemId) {\n      fetchOptions();\n    }\n  }, [selectedVariantSystemId]);\n\n  const onSelectChange = ({ brand, series, model, variant }) => {\n    dispatch(searchCarModel({ brand, series, model, variant }, false));\n  };\n\n  const getSelectOptions = (obj) =>\n    obj\n      ? Object.keys(obj).map((systemId) => ({\n          value: systemId,\n          label: obj[systemId],\n        }))\n      : [];\n\n  const hasOptions = !error && selectedModelSystemId && options?.length > 0;\n\n  return (\n    <div className={`tabs-container__content ${active ? 'active' : ''}`}>\n      {!hasOptions && (\n        <>\n          <div className=\"advanced-search__car-model-input-row-wrapper\">\n            <div className=\"tabs-container__car-model-wrapper\">\n              {/* Brands */}\n              <div className=\"advanced-search__car-model-input-wrapper\">\n                <label>{translate('advanced-search.car-model.brand')}</label>\n                <div className=\"select-wrapper\">\n                  <StyledSelect\n                    onChange={({ value }) => onSelectChange({ brand: value })}\n                    isDisabled={isLoading}\n                    options={getSelectOptions(brands)}\n                    placeholder={translate(\n                      'advanced-search.car-model.choose-brand'\n                    )}\n                  />\n                </div>\n              </div>\n\n              {/* Series */}\n              <div className=\"advanced-search__car-model-input-wrapper\">\n                <label>{translate('advanced-search.car-model.series')}</label>\n                <div className=\"select-wrapper\">\n                  <StyledSelect\n                    isDisabled={isLoading || !series || series.length == 0}\n                    onChange={({ value }) =>\n                      onSelectChange({\n                        brand: selectedBrandSystemId,\n                        series: value,\n                      })\n                    }\n                    options={series?.map((s) => ({\n                      value: s,\n                      label: s,\n                    }))}\n                    placeholder={translate(\n                      'advanced-search.car-model.choose-series'\n                    )}\n                  />\n                </div>\n              </div>\n\n              {/* Models */}\n              <div className=\"advanced-search__car-model-input-wrapper\">\n                <label>{translate('advanced-search.car-model.model')}</label>\n                <div className=\"select-wrapper\">\n                  <StyledSelect\n                    isDisabled={isLoading || !models || models.length == 0}\n                    onChange={({ value }) =>\n                      onSelectChange({\n                        brand: selectedBrandSystemId,\n                        series: selectedSeries,\n                        model: value,\n                      })\n                    }\n                    options={getSelectOptions(models)}\n                    placeholder={translate(\n                      'advanced-search.car-model.choose-model'\n                    )}\n                  />\n                </div>\n              </div>\n            </div>\n          </div>\n          {/* ABE */}\n          {variants && (\n            <div className=\"advanced-search__car-model-input-wrapper advanced-search__car-model-input-wrapper--abe\">\n              <label>{translate('wheel-builder.abe')}</label>\n              <div className=\"select-wrapper\">\n                <StyledSelect\n                  isDisabled={isLoading || !variants || variants.length == 0}\n                  onChange={({ value }) =>\n                    onSelectChange({\n                      brand: selectedBrandSystemId,\n                      series: selectedSeries,\n                      model: selectedModelSystemId,\n                      variant: value,\n                    })\n                  }\n                  options={getSelectOptions(variants)}\n                  placeholder={translate('wheel-builder.select-abe')}\n                />\n              </div>\n            </div>\n          )}\n        </>\n      )}\n      {hasOptions && (\n        <div className=\"tabs-container__car-model-wrapper\">\n          <AdvancedSearchSearchInfoBox\n            text={searchInfo}\n            onClick={() => dispatch(searchCarModel({}, false))}\n            buttonText={translate('advanced-search.car-model.change-model')}\n          >\n            <Notification\n              type=\"info\"\n              text={translate('advanced-search.license-plate-warning')}\n            />\n          </AdvancedSearchSearchInfoBox>\n        </div>\n      )}\n      {selectedModelSystemId && hasOptions && (\n        <VariantPickerSelect\n          options={options}\n          onOptionSelected={onOptionChanged}\n          selectedOption={selectedOption}\n          selectLabel={selectLabel}\n        />\n      )}\n      {error && <Notification type=\"error\" text={error} />}\n      {selectedOption?.price && (\n        <div className=\"product-page__price-quantity-wrapper\">\n          <ProductPriceModel\n            {...selectedOption.price}\n            showPriceToggle={true}\n            onQuantityToggle={fetchOptions}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default ProductPageTabCarModel;\n","import React from 'react';\nimport PriceDisplayQuantityToggle from '../PriceDisplayQuantityToggle';\nimport ProductPriceModel from '../ProductPriceModel';\nimport VariantPickerSelect from '../VariantPicker.Select';\n\nconst ProductPageTabMain = ({\n  selectLabel,\n  options,\n  selectedOption,\n  onOptionChanged,\n  onQuantityToggle,\n  active,\n}) => {\n  return (\n    <div className={`tabs-container__content ${active ? 'active' : ''}`}>\n      <VariantPickerSelect\n        options={options}\n        selectedOption={selectedOption}\n        onOptionSelected={onOptionChanged}\n        selectLabel={selectLabel}\n      />\n      {selectedOption?.price && (\n        <div className=\"product-page__price-quantity-wrapper\">\n          <ProductPriceModel\n            {...selectedOption.price}\n            showPriceToggle={true}\n            onQuantityToggle={onQuantityToggle}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default ProductPageTabMain;\n","import React, { useRef, useState } from 'react';\nimport { getVariantsByCarModel } from '../../Actions/VariantPicker.action';\nimport LicensePlateInput from '../LicensePlateInput';\nimport VariantPickerSelect from '../VariantPicker.Select';\nimport LoadingDots from '../LoadingDots';\nimport Notification from '../Notification';\nimport { translate } from '../../Services/translation';\nimport AdvancedSearchSearchInfoBox from '../AdvancedSearch/AdvancedSearch.SearchInfoBox';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { setGeneralRowNote } from '../../Actions/Cart.action';\nimport ProductPriceModel from '../ProductPriceModel';\nimport PriceDisplayQuantityToggle from '../PriceDisplayQuantityToggle';\nimport { getCarModelVariants } from '../../Actions/AdvancedSearch.action';\nimport StyledSelect from '../StyledSelect';\nimport { Warning } from 'phosphor-react';\n\nconst ProductPageTabRegNo = ({\n  selectLabel,\n  onOptionChanged,\n  selectedOption,\n  active,\n  currentVariant,\n}) => {\n  const dispatch = useDispatch();\n\n  const [carName, setCarName] = useState('');\n  const [regNo, setRegNo] = useState('');\n  const [options, setOptions] = useState();\n  const [isLoading, setIsLoading] = useState(false);\n  const [error, setError] = useState();\n  const [carModelVariants, setCarModelVariants] = useState();\n  const [\n    selectedCarModelVariantSystemId,\n    setSelectedCarModelVariantSystemId,\n  ] = useState();\n  const carModelVariantSelectRef = useRef();\n  const [SearchNotFound, setSearchNotFound] = useState();\n\n  const onRegNoSearch = () => {\n    setIsLoading(true);\n    setError(null);\n    carModelVariantSelectRef?.current?.clearValue();\n    getCarModelVariants(regNo)\n      .then((data) => {\n        setCarName(data.carName);\n        setCarModelVariants(data.variants);\n        if (data.variants?.length == 1) {\n          fetchOptions(data.variants[0].systemId);\n        }\n      })\n      .catch((err) => setSearchNotFound('Error'))\n      .finally(() => setIsLoading(false));\n  };\n\n  const fetchOptions = (carModelVariantSystemId) => {\n    if (!carModelVariantSystemId) return;\n    setSelectedCarModelVariantSystemId(carModelVariantSystemId);\n\n    setIsLoading(true);\n    setError(null);\n    getVariantsByCarModel(currentVariant.value, carModelVariantSystemId)\n      .then((data) => {\n        setOptions(data.options);\n        dispatch(setGeneralRowNote(regNo.toUpperCase()));\n\n        if (selectedOption) {\n          const updatedOption = data.options\n            .flatMap((o) => o.options)\n            .find((o) => o.value == selectedOption.value);\n          onOptionChanged(updatedOption);\n        }\n      })\n      .catch((err) => {\n        err.response.json().then((data) => setError(data.error));\n      })\n      .finally(() => setIsLoading(false));\n  };\n\n  const reset = () => {\n    setRegNo('');\n    setCarName(null);\n    setError(null);\n    setCarModelVariants(null);\n    setOptions(null);\n    onOptionChanged(null);\n    carModelVariantSelectRef?.current?.clearValue();\n  };\n\n  const hasOptions = !error && regNo?.length >= 6 && options?.length > 0;\n\n  return (\n    <div className={`tabs-container__content ${active ? 'active' : ''}`}>\n      {!hasOptions && (\n        <div className=\"tabs-container__regno-wrapper\">\n          <label>{translate('advanced-search.search-license-plate')}</label>\n          <LicensePlateInput\n            value={regNo}\n            onChange={(value) => setRegNo(value)}\n            onEnterKey={onRegNoSearch}\n            autoFocus={true}\n            disabled={isLoading}\n          />\n          <button className=\"btn btn--primary\" onClick={onRegNoSearch}>\n            {!isLoading && translate('general.search')}\n            {isLoading && <LoadingDots size=\"small\" color=\"white\" />}\n          </button>\n        </div>\n      )}\n      {SearchNotFound === 'Error' ? (\n        <div>\n          <Notification\n            icon={<Warning size={24} />}\n            text={translate('advanced-search.car-model.regNo-not-found')}\n            type=\"error\"\n          />\n        </div>\n      ) : null}\n      {carName && (\n        <div className=\"wheel-builder__car-model-name\">{carName}</div>\n      )}\n      {!hasOptions && carModelVariants?.length > 1 && (\n        <div>\n          <label style={{ display: 'block', marginBottom: '12px' }}>\n            {translate('wheel-builder.select-abe')}\n          </label>\n          <StyledSelect\n            onChange={(opt) => opt?.value && fetchOptions(opt.value)}\n            options={carModelVariants.map((model) => ({\n              value: model.systemId,\n              label: `${model.name ? model.name + ' ' : ''}(${\n                model.boltPattern\n              }) ${model.abe}`,\n            }))}\n            ref={carModelVariantSelectRef}\n            isDisabled={isLoading}\n          />\n        </div>\n      )}\n      {hasOptions && (\n        <AdvancedSearchSearchInfoBox\n          text={`${regNo.toUpperCase()} (${carName})`}\n          onClick={reset}\n          buttonText={translate('advanced-search.change-license-plate-no')}\n        >\n          <Notification\n            type=\"info\"\n            text={translate('advanced-search.license-plate-warning')}\n          />\n        </AdvancedSearchSearchInfoBox>\n      )}\n      {error && <Notification type=\"error\" text={error} />}\n      {hasOptions && (\n        <VariantPickerSelect\n          options={options}\n          onOptionSelected={onOptionChanged}\n          selectedOption={selectedOption}\n          selectLabel={selectLabel}\n          className=\"variant-picker--product-page-regno\"\n        />\n      )}\n      {hasOptions && selectedOption?.price && (\n        <div className=\"product-page__price-quantity-wrapper\">\n          <ProductPriceModel\n            {...selectedOption.price}\n            onQuantityToggle={() =>\n              fetchOptions(selectedCarModelVariantSystemId)\n            }\n            showPriceToggle={true}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default ProductPageTabRegNo;\n","import React, { useEffect, useState } from 'react';\nimport renderForServer from '../../render-for-server';\nimport ProductPriceModel from '../ProductPriceModel';\nimport ProductPageTabCarModel from './ProductPageTab.CarModel';\nimport ProductPageTabMain from './ProductPageTab.Main';\nimport ProductPageTabRegNo from './ProductPageTab.RegNo';\nimport BuyButton from '../BuyButton';\nimport { Package } from 'phosphor-react';\nimport colors from 'Exports/colors.scss';\nimport { translate } from '../../Services/translation';\nimport { getVariantPicker } from '../../Actions/VariantPicker.action';\nimport ProductInStockTag from '../ProductInStockTag';\n\nconst ProductPageTabsContainer = (props) => {\n  const [activeTab, setActiveTab] = useState('main');\n  const [selectedOption, setSelectedOption] = useState(props.currentVariant);\n  const [options, setOptions] = useState(props.options);\n  const [currentVariant, setCurrentVariant] = useState(props.currentVariant);\n  const { userIsAuthenticated } = props;\n\n  useEffect(() => {\n    if (activeTab == 'main') {\n      setSelectedOption(currentVariant);\n    } else {\n      setSelectedOption(null);\n    }\n  }, [activeTab]);\n\n  const onQuantityToggle = () => {\n    getVariantPicker(props.currentVariant.value)\n      .then((variantPicker) => {\n        setOptions(variantPicker.options);\n        setCurrentVariant(variantPicker.currentVariant);\n        if (selectedOption) {\n          setSelectedOption(\n            variantPicker.options\n              .flatMap((o) => o.options)\n              .find((o) => o.value == selectedOption.value)\n          );\n        }\n      })\n      .catch((err) =>\n        err.response.json().then((data) => console.log(data.error))\n      );\n  };\n\n  return (\n    <div className=\"tabs-container\">\n      <div className=\"tabs-container__header\">\n        <ProductPageTabHeader\n          label={props.tabLabel}\n          active={activeTab == 'main'}\n          onClick={() => setActiveTab('main')}\n        />\n        <ProductPageTabHeader\n          label=\"Regnr.\"\n          active={activeTab == 'regNo'}\n          onClick={() => setActiveTab('regNo')}\n        />\n        <ProductPageTabHeader\n          label=\"Modell\"\n          active={activeTab == 'model'}\n          onClick={() => setActiveTab('model')}\n        />\n      </div>\n      <div className=\"tabs-container__content-container\">\n        <ProductPageTabMain\n          {...props}\n          options={options}\n          currentVariant={currentVariant}\n          active={activeTab == 'main'}\n          selectedOption={selectedOption}\n          onOptionChanged={setSelectedOption}\n          onQuantityToggle={onQuantityToggle}\n        />\n        <ProductPageTabRegNo\n          {...props}\n          currentVariant={currentVariant}\n          active={activeTab == 'regNo'}\n          selectedOption={selectedOption}\n          onOptionChanged={setSelectedOption}\n        />\n        <ProductPageTabCarModel\n          {...props}\n          currentVariant={currentVariant}\n          active={activeTab == 'model'}\n          selectedOption={selectedOption}\n          onOptionChanged={setSelectedOption}\n        />\n      </div>\n      {selectedOption && (\n        <div className=\"tabs-container__content active buy-section\">\n          <BuyButton\n            quantity={selectedOption.priceDisplayQuantity}\n            articleNumber={selectedOption.value}\n            disabled={!selectedOption.canBuy}\n            label={\n              selectedOption.canBuy\n                ? translate('product.add-to-cart')\n                : userIsAuthenticated\n                ? translate('product.not-available')\n                : translate('product.login-to-proceed')\n            }\n            userIsAuthenticated={userIsAuthenticated}\n          />\n          <ProductInStockTag {...selectedOption} />\n        </div>\n      )}\n    </div>\n  );\n};\n\nconst ProductPageTabHeader = ({ label, active, onClick }) => (\n  <div\n    className={`tabs-container__tab ${active ? 'active' : ''}`}\n    onClick={onClick}\n  >\n    {label}\n  </div>\n);\n\nexport default (props) => renderForServer(ProductPageTabsContainer, props);\n","import React from 'react';\nimport { useSelector } from 'react-redux';\nimport StyledSelect from './StyledSelect';\n\nconst VariantPickerSelect = ({\n  onOptionSelected,\n  selectedOption,\n  selectLabel,\n  options = [],\n  className,\n}) => {\n  const formatGroupLabel = (group) => (\n    <strong dangerouslySetInnerHTML={{ __html: group.label }}></strong>\n  );\n\n  return (\n    <>\n      <div className={`variant-picker ${className ?? ''}`}>\n        <label>{selectLabel}</label>\n        <StyledSelect\n          className=\"variant-picker__select\"\n          options={options}\n          onChange={(option) => onOptionSelected && onOptionSelected(option)}\n          value={selectedOption}\n          formatGroupLabel={formatGroupLabel}\n        />\n      </div>\n    </>\n  );\n};\n\nexport default VariantPickerSelect;\n"],"sourceRoot":""}