var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __read = (this && this.__read) || function (o, n) {
    var m = typeof Symbol === "function" && o[Symbol.iterator];
    if (!m) return o;
    var i = m.call(o), r, ar = [], e;
    try {
        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
    }
    catch (error) { e = { error: error }; }
    finally {
        try {
            if (r && !r.done && (m = i["return"])) m.call(i);
        }
        finally { if (e) throw e.error; }
    }
    return ar;
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
        if (ar || !(i in from)) {
            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
            ar[i] = from[i];
        }
    }
    return to.concat(ar || Array.prototype.slice.call(from));
};
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState, useMemo } from 'react';
import Radio from 'src/components/Radio';
import CheckBox from 'src/components/CheckBox2/CheckBox';
import { useAppSelector, useAppDispatch } from 'src/app/redux/store';
import { setAlertModal } from 'src/app/redux/slices/common';
import { getSortType, getFiltersFromUrl } from 'src/lib/common/helpers';
import Button from 'src/components/Button';
import Select from 'src/components/Select';
import { PatientType, SortTypes, } from 'src/lib/types/types';
import Modal from 'src/components/Modal/ModalModule';
import css from '../FilterBar.module.scss';
import { _cx } from 'src/utility/class';
import { defaultFilters } from 'src/lib/constants';
var cx = _cx(css);
var FilterAndSort = function (_a) {
    var _b;
    var filters = _a.filters, t = _a.t, onFilterApply = _a.onFilterApply, defaultSort = _a.defaultSort, closeModal = _a.closeModal, _c = _a.showPediatric, showPediatric = _c === void 0 ? false : _c, radiusOptions = _a.radiusOptions, tierPins = _a.tierPins;
    var patientType = filters.patientType, isOrthoDoc = filters.isOrthoDoc, isGeneralDoc = filters.isGeneralDoc, isPediatric = filters.isPediatric, radius = filters.radius, tier = filters.tier, _d = filters.vivera, vivera = _d === void 0 ? false : _d, sortType = filters.sortType, fpinsurance = filters.fpinsurance, flan = filters.flan, fehours = filters.fehours, treatments = filters.treatments, fservice = filters.fservice;
    var _e = __read(useState(sortType || SortTypes.teen), 2), sort = _e[0], setSort = _e[1];
    var _f = __read(useState(patientType || 'adult'), 2), age = _f[0], setAge = _f[1];
    var _g = __read(useState(isOrthoDoc || false), 2), orthoDoc = _g[0], setOrthoDoc = _g[1];
    var _h = __read(useState(isGeneralDoc || false), 2), generalDoc = _h[0], setGeneralDoc = _h[1];
    var _j = __read(useState(isPediatric || false), 2), pediatric = _j[0], setPediatric = _j[1];
    var _k = __read(useState(radius), 2), rd = _k[0], setRd = _k[1];
    var _l = __read(useState(tier || ''), 2), tierLevel = _l[0], setTierLevel = _l[1];
    var _m = __read(useState("".concat(vivera)), 2), viv = _m[0], setViv = _m[1];
    var _o = __read(useState(false), 2), showModal = _o[0], setShowModal = _o[1];
    var dispatch = useAppDispatch();
    var _p = useAppSelector(function (state) { return state.config.config; }), useDocLoc3O = _p.useDocLoc3O, showIteroSort = _p.showIteroSort, sortOptions = _p.sortOptions, modalsData = _p.modalsData, showTierLevelFilter = _p.showTierLevelFilter, lanuagesFilterOptions = _p.lanuagesFilterOptions, insurancesFilterOptions = _p.insurancesFilterOptions, servicesOfferedFilterData = _p.servicesOfferedFilterData, hideFilters = _p.hideFilters, selectOtherPatientFinancing = _p.selectOtherPatientFinancing;
    var _q = __read(useState(), 2), modalData = _q[0], setModalData = _q[1];
    var v = useMemo(function () { return getFiltersFromUrl(); }, []).vivera;
    var sortTypeOptions = useMemo(function () {
        var nonDisabledSortOpts = sortOptions.filter(function (s) { return !!!s.disabled; });
        return showIteroSort
            ? nonDisabledSortOpts
            : nonDisabledSortOpts.filter(function (sort) { return sort.value !== SortTypes.itero; });
    }, [showIteroSort, sortOptions]);
    var updateModalInfo = function (modal_id) {
        var modaldata = modalsData.find(function (item) { return item.id === modal_id; });
        setModalData(modaldata);
    };
    var services_keys = servicesOfferedFilterData === null || servicesOfferedFilterData === void 0 ? void 0 : servicesOfferedFilterData.flatMap(function (item) {
        return fservice === null || fservice === void 0 ? void 0 : fservice.map(function (item2) {
            if (item.value === item2 || item.key === item2) {
                return item.key;
            }
        }).filter(Boolean);
    });
    var getServicesOfferedValues = function () {
        var data = servicesOfferedFilterData === null || servicesOfferedFilterData === void 0 ? void 0 : servicesOfferedFilterData.map(function (item) {
            if (servicesOfferedState[item.key]) {
                return item.value;
            }
        });
        return data;
    };
    var _r = __read(useState({
        patient_financing: (services_keys === null || services_keys === void 0 ? void 0 : services_keys.includes('patient_financing')) || false,
        financing_no_down_payment: (services_keys === null || services_keys === void 0 ? void 0 : services_keys.includes('financing_no_down_payment')) || false,
        complimentary_consultation: (services_keys === null || services_keys === void 0 ? void 0 : services_keys.includes('complimentary_consultation')) || false,
        hfd_financing: (services_keys === null || services_keys === void 0 ? void 0 : services_keys.includes('hfd_financing')) || false,
        invisalign_pay: (services_keys === null || services_keys === void 0 ? void 0 : services_keys.includes('invisalign_pay')) || false,
        ols: (services_keys === null || services_keys === void 0 ? void 0 : services_keys.includes('ols')) || false,
        extended_hours: (fehours === null || fehours === void 0 ? void 0 : fehours.toString()) === 'true' || fehours === 'true' ? true : false,
    }), 2), servicesOfferedState = _r[0], setServicesOfferedState = _r[1];
    var _s = __read(useState({
        vivera_retainers: (treatments === null || treatments === void 0 ? void 0 : treatments.vivera_retainers) || false,
        whitening: (treatments === null || treatments === void 0 ? void 0 : treatments.whitening) || false,
        ipe: (treatments === null || treatments === void 0 ? void 0 : treatments.ipe) || false,
        itero: (treatments === null || treatments === void 0 ? void 0 : treatments.itero) || false,
        invisalign_first: (treatments === null || treatments === void 0 ? void 0 : treatments.invisalign_first) || false,
    }), 2), treatmentsOfferedState = _s[0], setTreatmentsOfferedState = _s[1];
    var applyFilter = function () {
        var _a;
        if (!orthoDoc && !generalDoc && !pediatric) {
            dispatch(setAlertModal({
                show: true,
                title: t.alertHeading,
                description: t.select_at_least_one,
                imgUrl: '',
            }));
            return;
        }
        var defSortType = (_a = getSortType(defaultSort)) !== null && _a !== void 0 ? _a : filters.sortType;
        var val = age === PatientType.TEEN ? SortTypes.teen : defSortType;
        onFilterApply('patientType', age, [
            { key: 'sortType', value: sort ? sort : val },
            { key: 'isOrthoDoc', value: orthoDoc },
            { key: 'isGeneralDoc', value: generalDoc },
            { key: 'isPediatric', value: pediatric },
            { key: 'radius', value: rd },
            { key: 'tier', value: tierLevel },
            { key: 'flan', value: selectedLangsForFilter },
            { key: 'fpinsurance', value: selectedInsurancesForFilter },
            {
                key: 'fservice',
                value: getServicesOfferedValues(),
            },
            { key: 'fehours', value: servicesOfferedState.extended_hours ? true : false },
            { key: 'treatments', value: treatmentsOfferedState },
        ]);
        closeModal();
    };
    var handleDistanceChange = function (e) {
        setRd(e.target.value);
    };
    var clearFilters = function () {
        var _a;
        setOrthoDoc(defaultFilters.isOrthoDoc);
        setGeneralDoc(defaultFilters.isGeneralDoc);
        setPediatric(defaultFilters.isPediatric);
        setTierLevel(defaultFilters.tier);
        setRd(defaultFilters.radius);
        setTreatmentsOfferedState({
            vivera_retainers: false,
            whitening: false,
            ipe: false,
            itero: false,
            invisalign_first: false,
        });
        setServicesOfferedState({
            patient_financing: false,
            financing_no_down_payment: false,
            complimentary_consultation: false,
            hfd_financing: false,
            invisalign_pay: false,
            ols: false,
            extended_hours: false,
        });
        setSelectedLangsForFilter([]);
        setSelectedInsurancesForFilter([]);
        var defSortType = (_a = getSortType(defaultSort)) !== null && _a !== void 0 ? _a : filters.sortType;
        var val = age === PatientType.TEEN ? SortTypes.teen : defSortType;
        onFilterApply('patientType', age, [
            { key: 'sortType', value: sort ? sort : val },
            { key: 'isOrthoDoc', value: defaultFilters.isOrthoDoc },
            { key: 'isGeneralDoc', value: defaultFilters.isGeneralDoc },
            { key: 'isPediatric', value: defaultFilters.isPediatric },
            { key: 'radius', value: defaultFilters.radius },
            { key: 'tier', value: defaultFilters.tier },
            { key: 'flan', value: [] },
            { key: 'fpinsurance', value: [] },
            {
                key: 'fservice',
                value: [],
            },
            { key: 'fehours', value: false },
            {
                key: 'treatments',
                value: {
                    vivera_retainers: false,
                    whitening: false,
                    ipe: false,
                    itero: false,
                    invisalign_first: false,
                },
            },
        ]);
        closeModal();
    };
    var _t = __read(useState(fpinsurance && (fpinsurance === null || fpinsurance === void 0 ? void 0 : fpinsurance.length) > 5 ? true : false), 2), showMoreInsurances = _t[0], setShowMoreInsurances = _t[1];
    var _u = __read(useState(fpinsurance || []), 2), selectedInsurancesForFilter = _u[0], setSelectedInsurancesForFilter = _u[1];
    var _v = __read(useState(flan && (flan === null || flan === void 0 ? void 0 : flan.length) > 5 ? true : false), 2), showMoreLangs = _v[0], setShowMoreLangs = _v[1];
    var _w = __read(useState(flan || []), 2), selectedLangsForFilter = _w[0], setSelectedLangsForFilter = _w[1];
    var showVivera = useMemo(function () { return !hideFilters || (hideFilters && !hideFilters.viveraFilter); }, [hideFilters]);
    return (_jsxs("div", { className: cx('filter-and-sort-wraper'), children: [_jsxs("div", { className: cx('form-group input-box'), children: [_jsx("label", { htmlFor: "sortType", className: "filter-title mb-5", children: t.result_sort_button_sort }), _jsx(Select, { id: "sortType", onChange: function (e) {
                            setSort(e.target.value);
                        }, value: sort, options: sortTypeOptions })] }), _jsxs("div", { className: cx('form-group'), children: [_jsx("label", { className: "filter-title", children: t.result_age_label }), _jsxs("div", { className: "flex-space-between", children: [_jsx(Radio, { id: "age_adult", label: t.result_age_adult, value: PatientType.ADULT, checked: age === PatientType.ADULT, onChange: function () {
                                    setAge('adult');
                                } }), _jsx(Radio, { id: "age_teen", label: t.result_age_teen, value: PatientType.TEEN, checked: age === PatientType.TEEN, onChange: function () {
                                    setAge('teen');
                                } })] })] }), !(hideFilters === null || hideFilters === void 0 ? void 0 : hideFilters.doctorType) && (_jsxs("div", { className: cx('form-group filter-specialty'), children: [_jsx("label", { className: "filter-title", children: t.result_doctor_types_label }), _jsxs("div", { className: cx('checkbox-wrap'), children: [_jsx(CheckBox, { checked: orthoDoc, onChange: function () {
                                    setOrthoDoc(!orthoDoc);
                                }, label: t.orthodontists, name: "isOrthoDoc", width: "50%" }), _jsx(CheckBox, { checked: generalDoc, onChange: function () {
                                    setGeneralDoc(!generalDoc);
                                }, label: t.general_dentists, name: "isGeneralDoc", width: "50%" }), showPediatric && (_jsx(CheckBox, { checked: pediatric, onChange: function () {
                                    setPediatric(!pediatric);
                                }, label: t.pediatric_dentist, name: "isPediatric", width: "50%" }))] })] })), _jsxs("div", { className: cx('form-group input-box'), children: [_jsx("label", { htmlFor: "sortType", className: "filter-title mb-5", children: t.result_radius_label }), _jsx(Select, { id: "radius", onChange: function (e) {
                            handleDistanceChange(e);
                        }, value: rd || '', options: radiusOptions })] }), showTierLevelFilter && (_jsxs("div", { className: cx('form-group'), children: [_jsx("label", { className: "filter-title", children: t.result_tier_label }), _jsxs("div", { className: cx('tier-level-wrap'), children: [_jsx(Radio, { id: "tier-any", label: t.result_tier_any || 'Any', value: "", checked: tierLevel === '', width: "50%", onChange: function () {
                                    setTierLevel('');
                                }, icon: "" }, "tier-any"), tierPins.map(function (tier, idx) {
                                return (_jsx(Radio, { id: "tier-".concat(idx), label: tier.label, value: tier.label, checked: tierLevel === tier.segmentCode, width: "50%", onChange: function () {
                                        setTierLevel(tier.segmentCode);
                                    }, icon: tier.imgUrl }, "tier-".concat(idx)));
                            })] })] })), useDocLoc3O && (_jsxs("div", { className: cx('form-group'), children: [_jsxs("label", { className: "filter-title", children: [" ", t.result_service_offered] }), (servicesOfferedFilterData === null || servicesOfferedFilterData === void 0 ? void 0 : servicesOfferedFilterData.map(function (element) { return element.key; }).includes('ols')) && (_jsx(CheckBox, { checked: servicesOfferedState.ols, onChange: function () {
                            setServicesOfferedState(function (pre) {
                                return __assign(__assign({}, pre), { ols: servicesOfferedState.ols ? false : true });
                            });
                        }, label: t.online_scheduling, name: "ols", width: "100%" })), (servicesOfferedFilterData === null || servicesOfferedFilterData === void 0 ? void 0 : servicesOfferedFilterData.map(function (element) { return element.key; }).includes('patient_financing')) && (_jsx(CheckBox, { checked: servicesOfferedState.patient_financing, onChange: function () {
                            setServicesOfferedState(function (pre) {
                                return __assign(__assign(__assign({}, pre), { patient_financing: servicesOfferedState.patient_financing ? false : true }), (selectOtherPatientFinancing
                                    ? {
                                        financing_no_down_payment: servicesOfferedState.patient_financing
                                            ? false
                                            : true,
                                        hfd_financing: servicesOfferedState.patient_financing ? false : true,
                                    }
                                    : {}));
                            });
                        }, label: t.patient_financing, name: "finance", width: "100%" })), (servicesOfferedFilterData === null || servicesOfferedFilterData === void 0 ? void 0 : servicesOfferedFilterData.map(function (element) { return element.key; }).includes('financing_no_down_payment')) && (_jsx(CheckBox, { checked: servicesOfferedState.financing_no_down_payment, onChange: function () {
                            setServicesOfferedState(function (pre) {
                                return __assign(__assign({}, pre), { financing_no_down_payment: servicesOfferedState.financing_no_down_payment
                                        ? false
                                        : true });
                            });
                        }, label: t.financing_no_down_payment, name: "no_down_payment", width: "100%" })), (servicesOfferedFilterData === null || servicesOfferedFilterData === void 0 ? void 0 : servicesOfferedFilterData.map(function (element) { return element.key; }).includes('complimentary_consultation')) && (_jsx(CheckBox, { checked: servicesOfferedState.complimentary_consultation, onChange: function () {
                            setServicesOfferedState(function (pre) {
                                return __assign(__assign({}, pre), { complimentary_consultation: servicesOfferedState.complimentary_consultation
                                        ? false
                                        : true });
                            });
                        }, label: t.complimentary_consultation, name: "complimentary_consultation", width: "100%" })), (servicesOfferedFilterData === null || servicesOfferedFilterData === void 0 ? void 0 : servicesOfferedFilterData.map(function (element) { return element.key; }).includes('hfd_financing')) && (_jsx(CheckBox, { checked: servicesOfferedState.hfd_financing, onChange: function () {
                            setServicesOfferedState(function (pre) {
                                return __assign(__assign({}, pre), { hfd_financing: servicesOfferedState.hfd_financing ? false : true });
                            });
                        }, label: t.hfd_financing, name: "hfd", width: "100%", showInfoIcon: true, infoClickHandler: function () {
                            updateModalInfo('hfd_financing');
                            setShowModal(true);
                        } })), (servicesOfferedFilterData === null || servicesOfferedFilterData === void 0 ? void 0 : servicesOfferedFilterData.map(function (element) { return element.key; }).includes('invisalign_pay')) && (_jsx(CheckBox, { checked: servicesOfferedState.invisalign_pay, onChange: function () {
                            setServicesOfferedState(function (pre) {
                                return __assign(__assign({}, pre), { invisalign_pay: servicesOfferedState.invisalign_pay ? false : true });
                            });
                        }, label: t.invisalign_pay, name: "invisalign_pay", width: "100%", infoClickHandler: function () {
                            updateModalInfo('invisalign_pay');
                            setShowModal(true);
                        } })), _jsx(CheckBox, { checked: servicesOfferedState.extended_hours, onChange: function () {
                            setServicesOfferedState(function (pre) {
                                return __assign(__assign({}, pre), { extended_hours: servicesOfferedState.extended_hours ? false : true });
                            });
                        }, label: t.extended_hours, name: "extended_hours", width: "100%" })] })), _jsxs("div", { className: cx('form-group'), children: [_jsxs("label", { className: "filter-title", children: [" ", t.treatments_offered] }), _jsx(CheckBox, { checked: treatmentsOfferedState.itero, onChange: function () {
                            setTreatmentsOfferedState(function (pre) {
                                return __assign(__assign({}, pre), { itero: treatmentsOfferedState.itero ? false : true });
                            });
                        }, label: t.doctor_offers_itero, name: "itero", width: "100%", showInfoIcon: true, infoClickHandler: function () {
                            updateModalInfo('itero');
                            setShowModal(true);
                        } }), !(hideFilters === null || hideFilters === void 0 ? void 0 : hideFilters.whitening) && (_jsx(CheckBox, { checked: treatmentsOfferedState.whitening, onChange: function () {
                            setTreatmentsOfferedState(function (pre) {
                                return __assign(__assign({}, pre), { whitening: treatmentsOfferedState.whitening ? false : true });
                            });
                        }, label: t.result_whitening_doc, name: "whitening", width: "100%", showInfoIcon: true, infoClickHandler: function () {
                            updateModalInfo('whitening');
                            setShowModal(true);
                        } })), showVivera && (_jsx(CheckBox, { checked: treatmentsOfferedState.vivera_retainers, onChange: function () {
                            setTreatmentsOfferedState(function (pre) {
                                return __assign(__assign({}, pre), { vivera_retainers: treatmentsOfferedState.vivera_retainers ? false : true });
                            });
                        }, label: t.result_vivera_label, name: "vivera_retainers", width: "100%", showInfoIcon: true, infoClickHandler: function () {
                            updateModalInfo('vivera');
                            setShowModal(true);
                        } })), useDocLoc3O && (_jsxs(_Fragment, { children: [!(hideFilters === null || hideFilters === void 0 ? void 0 : hideFilters.invisalign_first) && (_jsx(CheckBox, { checked: treatmentsOfferedState.invisalign_first, onChange: function () {
                                    setTreatmentsOfferedState(function (pre) {
                                        return __assign(__assign({}, pre), { invisalign_first: treatmentsOfferedState.invisalign_first ? false : true });
                                    });
                                }, label: t.label_invisalign_first, name: "invisalign_first", width: "100%", showInfoIcon: true, infoClickHandler: function () {
                                    updateModalInfo('invisalignFirst');
                                    setShowModal(true);
                                } })), !(hideFilters === null || hideFilters === void 0 ? void 0 : hideFilters.invisalign_palatal_expanders) && (_jsx(CheckBox, { checked: treatmentsOfferedState.ipe, onChange: function () {
                                    setTreatmentsOfferedState(function (pre) {
                                        return __assign(__assign({}, pre), { ipe: treatmentsOfferedState.ipe ? false : true });
                                    });
                                }, label: t.invisalign_palatal_expanders, name: "ipe", width: "100%", showInfoIcon: true, infoClickHandler: function () {
                                    updateModalInfo('palatal_expanders');
                                    setShowModal(true);
                                } }))] }))] }), useDocLoc3O && (_jsxs("div", { className: cx('form-group'), children: [_jsxs("label", { className: "filter-title", children: [" ", t.result_sort_insurance] }), insurancesFilterOptions.slice(0, !showMoreInsurances ? 5 : undefined).map(function (item) {
                        return (_jsx(CheckBox, { checked: selectedInsurancesForFilter.includes(item.value), onChange: function (v) {
                                if (!v) {
                                    var filtered = selectedInsurancesForFilter.filter(function (lang) {
                                        return lang !== item.value;
                                    });
                                    setSelectedInsurancesForFilter(filtered);
                                }
                                else {
                                    setSelectedInsurancesForFilter(function (prev) { return __spreadArray(__spreadArray([], __read(prev), false), [item.value], false); });
                                }
                            }, label: item.translation, name: "vivera", width: "100%" }, item.value));
                    }), insurancesFilterOptions.length > 5 && (_jsx("span", { className: cx('more_options'), onClick: function () { return setShowMoreInsurances(!showMoreInsurances); }, children: showMoreInsurances ? t.result_less_options : t.result_more_options }))] })), useDocLoc3O && (_jsxs("div", { className: cx('form-group'), children: [_jsxs("label", { className: "filter-title", children: [" ", t.result_sort_languages] }), lanuagesFilterOptions.slice(0, !showMoreLangs ? 5 : undefined).map(function (item, index) {
                        return (_jsx(CheckBox, { checked: selectedLangsForFilter.includes(item.value), onChange: function (v) {
                                if (!v) {
                                    var filtered = selectedLangsForFilter.filter(function (lang) {
                                        return lang !== item.value;
                                    });
                                    setSelectedLangsForFilter(filtered);
                                }
                                else {
                                    setSelectedLangsForFilter(function (prev) { return __spreadArray(__spreadArray([], __read(prev), false), [item.value], false); });
                                }
                            }, label: item.translation, name: "vivera", width: "100%" }, item.value));
                    }), lanuagesFilterOptions.length > 5 && (_jsx("span", { className: cx('more_options'), onClick: function () { return setShowMoreLangs(!showMoreLangs); }, children: showMoreLangs ? t.result_less_options : t.result_more_options }))] })), _jsx("hr", {}), _jsxs("div", { className: "flex-space-between", children: [_jsx(Button, { type: "submit", styleType: "cancel", onClick: clearFilters, children: t.result_clear_filter }), _jsx(Button, { type: "submit", styleType: "normal", onClick: applyFilter, children: t.result_filter_button_apply })] }), showModal && modalData && (_jsx(Modal, { setShowModal: function () { return setShowModal(false); }, size: (modalData === null || modalData === void 0 ? void 0 : modalData.width) || 'sm', subTitle: modalData === null || modalData === void 0 ? void 0 : modalData.title, description: modalData === null || modalData === void 0 ? void 0 : modalData.description, closeButton: true, children: _jsxs(_Fragment, { children: [modalData.image ? (_jsx("img", { width: '264px', style: { margin: '0px auto 24px auto' }, src: modalData.image, alt: "" })) : (_jsx(_Fragment, {})), (modalData === null || modalData === void 0 ? void 0 : modalData.footnote) && (_jsx("p", { className: cx('modal_footnote'), dangerouslySetInnerHTML: {
                                __html: (_b = modalData === null || modalData === void 0 ? void 0 : modalData.footnote) === null || _b === void 0 ? void 0 : _b.replace('®', '<sup>®</sup>'),
                            } }))] }) }))] }));
};
export default FilterAndSort;
