Extension Options
\n {extensionContent}\n\n }\n
\n {planData &&\n
\n {planData.description}
\n\n {priceTitle &&
\n {priceTitle}
}\n{currency.symbol_left}{splitPrice[0]}.{splitPrice[1]}
\n {currency.isAmbiguous &&\n {currency.code} p/month\n }\n {!currency.isAmbiguous &&\n per month\n }\n {showMonthly &&\n annual commitment\n }\n\n {!showMonthly &&\n \n \n }\n\n {showMonthly &&\n \n \n }\n\n
\n {!hasActiveSubscription &&\n Billed {currency.symbol_left}{pricingYearly}{showVat ? ' + VAT' : ''} annually
\n handleChange('monthly')}>Switch to monthly billing\nSave 20% with yearly billing
\n handleChange('yearly')}>Switch to yearly billing\n\n \n
\n }\n {disclaimer &&\n {disclaimer}{extensionLink &&
\n {isLoading ? loader : boxContent}\n
\n );\n};\n\nPriceBox.propTypes = {\n priceTitle: PropTypes.string,\n shadowBottom: PropTypes.bool,\n className: PropTypes.string,\n containerClass: PropTypes.string,\n extensionLink: PropTypes.bool,\n hasActiveSubscription: PropTypes.bool,\n isLoading: PropTypes.bool,\n};\n\nPriceBox.defaultProps = {\n planData: {},\n prefix: {},\n vat: {},\n priceTitle: '',\n className: '',\n containerClass: '',\n shadowBottom: false,\n showMonthly: false,\n extensionContent: false,\n extensionLink: false,\n hasActiveSubscription: false,\n isLoading: false,\n};\n\nexport default PriceBox;\n","import React from 'react';\nimport InlineSVG from 'svg-inline-react';\nconst Checked = () => {\n const checked = `\n`;\n return \n
\n \n);\n\nTableHeader.propTypes = {\n title: PropTypes.string,\n onClick: PropTypes.func,\n isOpen: PropTypes.bool,\n};\n\nTableHeader.defaultProps = {\n title: '',\n isOpen: false,\n onClick: () => {},\n};\n\nconst TableContent = ({ className, activeTab, items, showTooltip, currencyCode, scrollToExtOptions }) => (\n \n
\n {title}
\n \n {\n items.map((item, key) => {\n const { permissions } = item;\n const permissionValues = (permissions && Object.values(permissions)) || [];\n return (\n \n {(permission.status === 1) && Limited}\n content={permission.text.replace('VAR_AMOUNT', permission.var[currencyCode])}\n position=\"right center\"\n />\n }\n {(permission.status === 5) &&\n \n { permission.text &&\n {permission.custom}}\n content={permission.text.replace('VAR_AMOUNT', permission.var[currencyCode])}\n position=\"right center\"\n />\n }\n { !permission.text &&\n {permission.custom}\n }\n \n }\n\n
\n ))\n }\n \n );\n })\n }\n \n);\n\nTableContent.propTypes = {\n items: PropTypes.instanceOf(Array),\n showTooltip: PropTypes.bool,\n className: PropTypes.string,\n activeTab: PropTypes.number,\n scrollToExtOptions: PropTypes.func,\n};\n\nTableContent.defaultProps = {\n items: [],\n className: '',\n showTooltip: false,\n activeTab: -1,\n scrollToExtOptions(e) { e.preventDefault(); },\n};\n\nclass SubscriptionTable extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n activeIndex: 0,\n };\n\n this.handleClick = this.handleClick.bind(this);\n }\n handleClick(currentIndex) {\n const { activeIndex } = this.state;\n let selectedIndex = currentIndex;\n if (activeIndex === currentIndex) {\n selectedIndex = -1;\n }\n this.setState({ activeIndex: selectedIndex });\n }\n render() {\n const { activeIndex } = this.state;\n const { index, activeTab, headerTitle, bodyItem, showTooltip } = this.props;\n\n let currencyCode = 'usd';\n\n if (this.props.currency && this.props.currency.code) {\n currencyCode = this.props.currency.code.toLowerCase();\n }\n\n return (\n \n
\n {\n permissionValues.map((permission, key) => (\n \n {item.name}\n {showTooltip && item.description && item.description !== '' &&\n
}\n content={item.description.replace('VAR_AMOUNT', item.var[currencyCode])}\n position=\"right center\"\n />\n }\n \n this.handleClick(index)}\n />\n
\n );\n }\n}\n\nSubscriptionTable.propTypes = {\n headerTitle: PropTypes.string,\n showTooltip: PropTypes.bool,\n index: PropTypes.number,\n bodyItem: PropTypes.instanceOf(Array),\n activeTab: PropTypes.number,\n scrollToExtOptions: PropTypes.func,\n};\n\nSubscriptionTable.defaultProps = {\n headerTitle: '',\n index: 1,\n showTooltip: false,\n bodyItem: [],\n activeTab: -1,\n scrollToExtOptions(e) { e.preventDefault(); },\n};\n\nexport const mapDispatchToProps = (dispatch) => ({\n});\n\nconst mapStateToProps = (state) => ({\n currency: state.get('currency'),\n});\n\n// Wrap the component to inject dispatch and state into it\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(SubscriptionTable);\n\n","import React, { Component } from 'react';\nimport { connect } from 'react-redux';\nimport PropTypes from 'prop-types';\nimport { setSubAnnualOrMonthly } from '../../actions/cartAction';\n\nclass ToggleButton extends Component {\n constructor(props) {\n super(props);\n this.switchRef = React.createRef();\n this.handleChange = this.handleChange.bind(this);\n }\n handleChange() {\n const { onChange } = this.props;\n\n let status = 'yearly';\n if (!this.props.subscriptionCart.isMonthly) {\n status = 'monthly';\n }\n\n onChange(status);\n }\n render() {\n return (\n \n
\n );\n }\n}\n\nToggleButton.propTypes = {\n name: PropTypes.string,\n onChange: PropTypes.func,\n};\n\nexport function mapDispatchToProps(dispatch) {\n return {};\n}\n\nconst mapStateToProps = (state) => ({\n currency: state.get('currency'),\n subscriptionCart: state.get('subscriptionCart'),\n});\n\n// Wrap the component to inject dispatch and state into it\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(ToggleButton);\n","import _ from 'lodash';\nimport classname from 'classnames';\nimport React, { Fragment } from 'react';\nimport ReactDOM from 'react-dom';\nimport Helmet from 'react-helmet';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport PricingTabs from 'components/PricingTabs';\nimport PriceBox from 'components/SubscriptionPricing/PriceBox';\nimport SubscriptionTable from 'components/SubscriptionPricing/SubscriptionTable';\nimport FAQS from 'components/SubscriptionPricing/Faqs';\nimport ToggleButton from '../../components/ToggleButton';\nimport { fetchSubscriptionPermissions, fetchSubscriptionPlansAndAddons } from '../../actions/subscriptionAction';\nimport { setSubAnnualOrMonthly, addSubscriptionToCart } from '../../actions/cartAction';\nimport { fetchVatRate } from '../../actions/checkoutAction';\nimport { drip } from 'utils/drip';\n\nconst animationRequest = window.requestAnimationFrame\n ? window.requestAnimationFrame.bind(window)\n : (callback) => setTimeout(callback, 16);\n\nclass SubscriptionProPage extends React.Component {\n constructor(props) {\n super(props);\n const checkedStatus = sessionStorage.getItem('selected_billing_mode') || false;\n const isChecked = (checkedStatus === 'monthly' && true) || false;\n\n this.state = {\n plans: false,\n planLeftId: 5,\n leftPlan: false,\n planRightId: 6,\n rightPlan: false,\n addons: false,\n isLoading: false,\n permittedContent: [],\n permittedDistribution: [],\n vat: {\n rate: 0,\n zeroRate: false\n },\n vatZeroRate: false,\n activeTab: 1,\n isChecked,\n stickyBoxEl: null,\n };\n this.stickyBox = React.createRef();\n this.onScroll = this.onScroll.bind(this);\n this.handleClick = this.handleClick.bind(this);\n this.scrollToExtOptions = this.scrollToExtOptions.bind(this);\n this.onSelectSubscription = this.onSelectSubscription.bind(this);\n }\n\n componentWillMount() {\n const { getSubscriptionPermissions } = this.props;\n this.setState({ isLoading: true });\n getSubscriptionPermissions(2).then((response) => {\n this.setState({\n isLoading: false,\n permittedContent: response.permitted_content,\n permittedDistribution: response.permitted_distribution,\n });\n });\n fetchSubscriptionPlansAndAddons().then((data) => {\n let leftPlan = _.find(data.plans, ['id', this.state.planLeftId]);\n let rightPlan = _.find(data.plans, ['id', this.state.planRightId]);\n\n this.setState({\n plans: data.plans,\n leftPlan: leftPlan,\n rightPlan: rightPlan,\n addons: data.addons,\n });\n }).catch((err) => err);\n }\n componentDidMount() {\n setTimeout(() => {\n this.setState({ stickyBoxEl: ReactDOM.findDOMNode(this.stickyBox.current) });\n }, 0);\n drip(\"Visited Pro Subscription\");\n window.addEventListener('scroll', this.onScroll);\n }\n componentWillUnmount() {\n window.removeEventListener('scroll', this.onScroll);\n }\n componentDidUpdate(prevProps) {\n // Typical usage (don't forget to compare props):\n if (this.props.country.id !== prevProps.country.id) {\n if (this.props.country.iso_code_2 !== \"\") {\n fetchVatRate(this.props.country.iso_code_2).then((response) => {\n this.setState({\n vat: {\n rate: parseFloat(response.vat_rate),\n zeroRate: response.zero_rate,\n }\n });\n });\n }\n }\n }\n\n\n\n onScroll() {\n const { stickyBoxEl } = this.state;\n animationRequest(() => {\n if (!stickyBoxEl) {\n return;\n }\n const rect = stickyBoxEl.getBoundingClientRect();\n let isSticky = false;\n if (document.documentElement.clientWidth <= 768 && Math.floor(rect.top) < 0) {\n isSticky = true;\n }\n this.setState({\n isSticky,\n });\n });\n }\n\n scrollToExtOptions(e) {\n e.preventDefault();\n }\n\n handleClick(index) {\n this.setState({ activeTab: index });\n }\n\n onSelectSubscription(subscriptionId) {\n const checkoutUrl = '/pricing/subscription/checkout';\n\n this.props.addSubscriptionToCart(subscriptionId);\n this.props.router.push(checkoutUrl)\n }\n\n render() {\n const { isLoading, isSticky, isChecked, activeTab, permittedContent, permittedDistribution } = this.state;\n let subscriptionContent;\n\n let variablePricingG = '';\n\n switch (this.props.currency.code) {\n case 'GBP':\n variablePricingG = '£8,000';\n break;\n case 'AUD':\n variablePricingG = '$15,000 AUD';\n break;\n case 'CAD':\n variablePricingG = '$13,000 CAD';\n break;\n case 'EUR':\n variablePricingG = '€10,000';\n break;\n case 'USD':\n default:\n variablePricingG = '$10,000 USD';\n }\n\n let disclaimerText = `*The starting price includes clearance for content with production budgets up to ${variablePricingG} and for specified distribution channels.`;\n let extensionOpt1Text = `The basic tier of the Pro Standard plan provides clearance for content with production budgets less than ${variablePricingG}. You can extend your plan to include clearance for content with production budgets of any size.`;\n\n let extensionContent = \n
\n Bill yearly
\n \nBill monthly
\n\n *Save 20% with yearly billing\n *Annual commitment\n
\n\n
;\n\n subscriptionContent = (\n 1. Clear for larger productions
\n{extensionOpt1Text}
\n\n2. Clear for All Media
\nAs standard, the Pro Standard plan includes clearance for limited distribution channels (see Permitted Distribution, above). You can extend your plan to include clearance for All Media{/*} (learn more)*/}.
\n\nTo view extension options and pricing, click ' { this.onSelectSubscription(6) }}>Start Now'.
\n\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n\n\n \n \n\n
\n \n
\n \n
\n \n
\n Extension Options
\n \n
\n \n
\n \n \n \n Music License Subscription • Unlimited Music For Video Pros \n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n Pro Subscription Pricing
\nUnlimited music for boundless creativity.
\n\n ![\"Amazon,](\"https://cdn.musicvine.com/images/subscription-logos-pro.png\")
\n
\n Trusted by...
\n\n \n
\n \n \n
\n - \n
Lite
\n \nStandard
\n \n\n
\n {subscriptionContent}\n \n
\n \n
\n \n
\n \n );\n }\n}\n\nSubscriptionProPage.propTypes = {\n params: PropTypes.object,\n};\n\nexport const mapDispatchToProps = (dispatch) => ({\n getSubscriptionPermissions: (type) => dispatch(fetchSubscriptionPermissions(type)),\n setSubAnnualOrMonthly: (period) => dispatch(setSubAnnualOrMonthly(period, \"Pro Pricing Page\")),\n addSubscriptionToCart: (subscriptionId) => dispatch(addSubscriptionToCart(subscriptionId)),\n});\n\nconst mapStateToProps = (state) => ({\n currency: state.get('currency'),\n subscriptionCart: state.get('subscriptionCart'),\n subscriptionData: state.get('subscriptionData'),\n country: state.get('country'),\n});\n\n// Wrap the component to inject dispatch and state into it\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(SubscriptionProPage);\n","// Set currency action.\n// -----------------------------------------------------------------------------\nimport fetch from 'isomorphic-fetch';\nimport Config, { API } from '../constants';\nimport {conditionallyGetCdnApi} from \"./generalAction\";\n\nexport function fetchSubscriptionPricePreview({ planId, periodId, currencyId, countryId, vatNumber, couponId }) {\n const authToken = sessionStorage.getItem('auth_token');\n const apiUrl = `${API}subscription/price-preview`;\n const formData = new FormData();\n\n formData.append('auth_token', authToken);\n formData.append('planId', planId);\n formData.append('periodId', periodId);\n formData.append('currencyId', currencyId);\n formData.append('countryId', countryId);\n if (vatNumber) formData.append('vatNumber', vatNumber);\n if (couponId) formData.append('couponId', couponId);\n\n return fetch(apiUrl, {\n method: 'POST',\n body: formData,\n })\n .then((res) => res.json())\n .catch((err) => err);\n}\n\nexport function fetchVatRate(countryCode = false) {\n const apiUrl = `${conditionallyGetCdnApi()}subscription/get_vat/${countryCode}`;\n\n return fetch(apiUrl, {\n method: 'GET',\n })\n .then((res) => res.json())\n .catch((err) => err);\n}\n\nexport function fetchCountries() {\n const apiUrl = `${API}countries`;\n\n return fetch(apiUrl, {\n method: 'GET',\n })\n .then((res) => res.json())\n .catch((err) => err);\n}\n\nexport function checkVatNumber(vatNumber, countryID) {\n const apiUrl = `${Config.BASE_API_URL}api-checkout/payment/validate-vat-number?vat_number=${vatNumber}&country_id=${countryID}`;\n const authToken = sessionStorage.getItem('auth_token');\n return fetch(apiUrl, {\n method: 'GET',\n headers: {\n 'Content-Type': 'application/json',\n 'X-Auth-Token': authToken || null,\n },\n })\n .then((res) => res.json())\n .catch((err) => err);\n}\n\nexport function recalculateBasket(countryID, isValid = false, vatNumber = '', address = {}) {\n const authToken = sessionStorage.getItem('auth_token');\n const params = new URLSearchParams({\n country_id: countryID,\n vat_number_valid: isValid,\n vat_number: vatNumber,\n });\n if (address.line1) params.append('address_line1', address.line1);\n if (address.city) params.append('address_city', address.city);\n if (address.state) params.append('address_state', address.state);\n if (address.postal_code) params.append('address_postal_code', address.postal_code);\n const apiUrl = `${Config.BASE_API_URL}api-checkout/payment/recalculate-basket-totals?${params.toString()}`;\n return fetch(apiUrl, {\n method: 'GET',\n headers: {\n 'Content-Type': 'application/json',\n 'X-Auth-Token': authToken || null,\n },\n })\n .then((res) => res.json())\n .catch((err) => err);\n}\n\nexport function checkDiscountCode(\n discountCode,\n planId,\n currencyId,\n periodId,\n authToken\n) {\n const apiUrl = `${API}subscription/validateDiscountCode`;\n const formData = new FormData();\n\n formData.append('token', authToken);\n formData.append('discountCode', discountCode);\n formData.append('planId', planId);\n formData.append('currency', currencyId);\n formData.append('periodId', periodId);\n\n return fetch(apiUrl, {\n method: 'POST',\n body: formData,\n })\n .then((res) => res.json())\n .catch((err) => err);\n}\n\nexport function fetchCheckoutBasket() {\n const authToken = sessionStorage.getItem('auth_token');\n return () =>\n fetch(`${Config.BASE_API_URL}api-checkout/payment`, {\n method: 'GET',\n credentials: 'include',\n headers: {\n 'Content-Type': 'application/json',\n 'X-Auth-Token': authToken || null,\n 'X-GUID': sessionStorage.getItem('customer_guid') || null,\n },\n })\n .then((res) => res.json())\n .catch((err) => err);\n}\n\nexport function updateCheckoutBasket(data) {\n const authToken = sessionStorage.getItem('auth_token');\n return () =>\n fetch(`${Config.BASE_API_URL}api-checkout/payment`, {\n method: 'POST',\n body: JSON.stringify({\n token: authToken,\n ...data,\n }),\n credentials: 'include',\n headers: {\n 'Content-Type': 'application/json',\n token: authToken || null,\n },\n })\n .then((res) => res.json())\n .catch((err) => err);\n}\n\nexport function fetchBillingInformation() {\n const authToken = sessionStorage.getItem('auth_token');\n return () =>\n fetch(`${Config.BASE_API_URL}api-checkout/payment/billing-information`, {\n method: 'GET',\n headers: {\n 'Content-Type': 'application/json',\n 'X-Auth-Token': authToken || null,\n },\n })\n .then((res) => res.json())\n .catch((err) => err);\n}\nexport function updatePaymentOrderStatus(orderId) {\n const authToken = sessionStorage.getItem('auth_token');\n return () =>\n fetch(`${API}checkout/ajax-update-status-sca-order?orderId=${orderId}`, {\n method: 'GET',\n headers: {\n 'Content-Type': 'application/json',\n 'X-Auth-Token': authToken || null,\n },\n })\n .then((res) => res.json())\n .catch((err) => err);\n}\n\nexport function updateOrderStatus(orderId) {\n const authToken = sessionStorage.getItem('auth_token');\n return () =>\n fetch(`${API}checkout/ajax-update-sca-order?orderId=${orderId}`, {\n method: 'GET',\n headers: {\n 'Content-Type': 'application/json',\n 'X-Auth-Token': authToken || null,\n },\n })\n .then((res) => res.json())\n .catch((err) => err);\n}\n\nexport function checkOrderStatus(orderId) {\n const authToken = sessionStorage.getItem('auth_token');\n return () =>\n fetch(`${Config.BASE_API_URL}api-checkout/order-status/${orderId}`, {\n method: 'GET',\n headers: {\n 'Content-Type': 'application/json',\n 'X-Auth-Token': authToken || null,\n },\n })\n .then((res) => res.json())\n .catch((err) => err);\n}\n\nexport function fetchOrderConfirmation(orderID) {\n const authToken = sessionStorage.getItem('auth_token');\n return () =>\n fetch(`${Config.BASE_API_URL}api-checkout/order-confirmation/${orderID}`, {\n method: 'GET',\n headers: {\n 'Content-Type': 'application/json',\n 'X-Auth-Token': authToken || null,\n },\n })\n .then((res) => res.json())\n .catch((err) => err);\n}\n\n","import fetch from 'isomorphic-fetch';\nimport Config, { API } from '../constants';\nimport { drip } from 'utils/drip';\n\nexport function addToCart(subscriptionData) {\n // TODO: I don't think this is actually used, but it's being imported somewhere\n}\n\nexport function addSubscriptionToCart(subscriptionId) {\n sessionStorage.setItem('basket_subscription_id', subscriptionId);\n return { type: 'ADD_SUBSCRIPTION_TO_CART', subscriptionId };\n}\n\nexport function emptySubscriptionCart() {\n sessionStorage.removeItem('basket_subscription_id', subscriptionId);\n return { type: 'EMPTY_SUBSCRIPTION_CART' };\n}\n\nexport function setSubAnnualOrMonthly(period, fromPage) {\n drip(\n `Switched Billing Period from ${fromPage}`,\n period.charAt(0).toUpperCase() + period.substring(1)\n );\n sessionStorage.setItem('selected_billing_mode', period);\n return { type: 'SET_SUB_ANNUAL_OR_MONTHLY', period };\n}\n\nexport function setHasValidVatNumber(hasValidVatNumber, vatNumber = '') {\n return { type: 'SET_CART_HAS_VALID_VAT_NUMBER', hasValidVatNumber, vatNumber };\n}\n\nexport function setSubscriptionDiscount(discount) {\n return { type: 'SET_SUBSCRIPTION_DISCOUNT', discount };\n}\n\nexport function fetchBasket() {\n const authToken = sessionStorage.getItem('auth_token');\n return () =>\n fetch(`${Config.BASE_API_URL}api-checkout/basket`, {\n method: 'GET',\n headers: {\n 'Content-Type': 'application/json',\n 'X-Auth-Token': authToken || null,\n 'X-GUID': sessionStorage.getItem('customer_guid') || null,\n },\n })\n .then((res) => res.json())\n .catch((err) => err);\n}\n\nexport function checkDiscountCode(discountCode) {\n const authToken = sessionStorage.getItem('auth_token');\n return () =>\n fetch(\n `${API}checkout/basket/ajax-check-discount-code?discount_code=${discountCode}&auto_apply_code=0`,\n {\n method: 'GET',\n credentials: 'include',\n headers: {\n 'Content-Type': 'application/json',\n 'X-Auth-Token': authToken || null,\n },\n }\n )\n .then((res) => res.json())\n .catch((err) => err);\n}\n\nexport function addArtistTip(data) {\n const authToken = sessionStorage.getItem('auth_token');\n return () =>\n fetch(`${Config.BASE_API_URL}api-artist/tip`, {\n method: 'POST',\n body: JSON.stringify({\n token: authToken,\n ...data,\n }),\n headers: {\n 'Content-Type': 'application/json',\n 'X-Auth-Token': authToken || null,\n 'X-GUID': sessionStorage.getItem('customer_guid') || null,\n },\n })\n .then((res) => res.json())\n .catch((err) => err);\n}\n\nexport function updateQuantity(trackID, quantity) {\n const authToken = sessionStorage.getItem('auth_token');\n return () =>\n fetch(`${Config.BASE_API_URL}api-checkout/basket/ajax-update-basket-track-quantity`, {\n method: 'POST',\n body: JSON.stringify({\n token: authToken,\n basket_track_id: trackID,\n quantity,\n }),\n headers: {\n 'Content-Type': 'application/json',\n 'X-Auth-Token': authToken || null,\n 'X-GUID': sessionStorage.getItem('customer_guid') || null,\n },\n })\n .then((res) => res.json())\n .catch((err) => err);\n}\n\nexport function updateBasket(data) {\n const authToken = sessionStorage.getItem('auth_token');\n return () =>\n fetch(`${Config.BASE_API_URL}api-checkout/update-basket`, {\n method: 'POST',\n body: JSON.stringify({\n token: authToken,\n ...data,\n }),\n credentials: 'include',\n headers: {\n 'Content-Type': 'application/json',\n 'X-Auth-Token': authToken || null,\n 'X-GUID': sessionStorage.getItem('customer_guid') || null,\n },\n })\n .then((res) => res.json())\n .catch((err) => err);\n}\n\nexport function updateBasketTrackLicenses(data) {\n const authToken = sessionStorage.getItem('auth_token');\n return () =>\n fetch(`${Config.BASE_API_URL}api-checkout/basket/update-basket-track-licenses`, {\n method: 'POST',\n body: JSON.stringify({\n token: authToken,\n ...data,\n }),\n headers: {\n 'Content-Type': 'application/json',\n 'X-Auth-Token': authToken || null,\n 'X-GUID': sessionStorage.getItem('customer_guid') || null,\n },\n })\n .then((res) => res.json())\n .catch((err) => err);\n}\n\nexport function removeBasketTrack(trackID) {\n const authToken = sessionStorage.getItem('auth_token');\n return () =>\n fetch(`${Config.BASE_API_URL}api-checkout/basket/remove-basket-track/${trackID}`, {\n method: 'POST',\n body: JSON.stringify({\n token: authToken,\n }),\n headers: {\n 'Content-Type': 'application/json',\n 'X-Auth-Token': authToken || null,\n 'X-GUID': sessionStorage.getItem('customer_guid') || null,\n },\n })\n .then((res) => res.json())\n .catch((err) => err);\n}\n","import React, { Component } from 'react';\nimport { connect } from 'react-redux';\nimport PropTypes from 'prop-types';\n\nclass SubscriptionHeading extends Component {\n constructor(props) {\n super(props);\n\n /*\n * Split input on first whitespace.\n *\n * https://stackoverflow.com/a/10272822/1482673\n */\n \n let name1 = '';\n let name2 = '';\n\n if (this.props.planName) {\n name1 = this.props.planName.substr(0,this.props.planName.indexOf(' '));\n name2 = this.props.planName.substr(this.props.planName.indexOf(' ')+1);\n }\n\n this.state = {\n name1,\n name2,\n };\n }\n\n componentDidUpdate(prevProps) {\n // Typical usage (don't forget to compare props):\n if (this.props.planName !== prevProps.planName) {\n \n let name1 = '';\n let name2 = '';\n\n if (this.props.planName) {\n name1 = this.props.planName.substr(0,this.props.planName.indexOf(' '));\n name2 = this.props.planName.substr(this.props.planName.indexOf(' ')+1);\n }\n \n this.setState({\n name1,\n name2,\n });\n }\n }\n\n render() {\n return (\n \n
\n {this.state.name1} {this.state.name2}
\n );\n }\n}\n\nSubscriptionHeading.propTypes = {\n name: PropTypes.string\n};\n\nSubscriptionHeading.defaultProps = {\n name: ''\n};\n\nexport default SubscriptionHeading;\n","import React from 'react';\nimport A from '../../components/A';\n\nclass PricingTabs extends React.Component {\n render() {\n return (\n\n
\n );\n }\n}\n\nexport default PricingTabs;","import React from 'react';\nimport InlineSVG from 'svg-inline-react';\n\nconst PlusCircle = () => {\n const plusCircle = `\n`;\n return \n
\n - \n
- Pro Subscription \n
- Pay-Per-Use \n
\n
\n \n );\n }\n}\n\nexport default FAQS;\n"],"sourceRoot":""}\n
\n \n
\n FAQs
\n- \n {\n this.props.sections.map((question, index) => {\n const selectedItem = index === activeIndex;\n return (\n
{question.name}
\n\n
\n \n
\n \n );\n })\n }\n \n {question.content}
\n