\n );\n }\n}\n","import React from \"react\";\nimport InlineSVG from 'svg-inline-react';\n\nclass AssetPaginationPrevSecondary extends React.Component {\n render() {\n const assetPaginationPrevSecondary = `\n`;\n return (\n \n );\n }\n}\n\nexport default AssetPaginationPrevSecondary;\n","import React from 'react';\nimport LicenseLink from './LicenseLink';\nimport LicenseRowChevron from './LicenseRowChevron';\nimport Summary from './Summary';\nimport A from '../../../components/A';\nimport AssetPaginationPrevSecondary from 'styles/svg-components/AssetPaginationPrevSecondary.js';\nimport CrossLight from 'styles/svg-components/CrossLight.js';\n\nexport default class Scale extends React.Component {\n constructor(props) {\n super(props);\n this.handleScaleSelect = this.handleScaleSelect.bind(this);\n this.licenseClose = this.licenseClose.bind(this);\n this.showProjectScale = this.showProjectScale.bind(this);\n this.hideProjectScale = this.hideProjectScale.bind(this);\n }\n\n handleScaleSelect(e) {\n this.props.onScaleSelect(e.currentTarget.id);\n }\n\n licenseClose() {\n $('.license-select').addClass('closed');\n }\n\n showProjectScale(e) {\n const scaleId = $(e.target).closest('a').attr('id');\n\n const theme = $('body').attr('id');\n }\n\n hideProjectScale() {\n $('.active-project-description').html('');\n }\n\n render() {\n let pageTitle = 'Confirm Project Scale';\n let isVlogLicense = this.props.currentLicense.id == '3';\n\n if ( isVlogLicense ) {\n pageTitle = 'Confirm Channel Scale';\n }\n\n let currencyCodeDisplay = '';\n if (this.props.currencyIsAmbiguous && !isVlogLicense) {\n currencyCodeDisplay = this.props.currencyCode;\n }\n\n return (\n
\n
\n\n \n
\n \n
\n \n
\n \n
\n\n
{pageTitle}
\n\n {/* For each LicenseScale display details and use handleScaleSelect function to deal with selection */}\n {this.props.currentLicense.scales && this.props.currentLicense.scales.map((scale, index) => (\n \n
\n
\n
\n
\n
\n { index === 0 &&\n S\n }\n { index === 1 &&\n L\n }\n { index === 2 &&\n XL\n }\n
We provide custom licenses tailored to the requirements of larger scale productions. Please use our custom license form to make an inquiry.
\n
\n }\n { isVlogLicense && \n
\n
Heads up! Channel verification required.
\n
This license requires verification of your YouTube channel / podcast web page. This info will be requested at checkout.
\n
\n }\n
\n \n
\n );\n }\n}\n","import React, { Fragment } from 'react';\nimport LicenseLink from './LicenseLink';\nimport A from '../../../components/A';\nimport CrossLight from 'styles/svg-components/CrossLight.js';\n\nexport default class MobileCheckoutButton extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n let total = null;\n\n if (typeof this.props.total !== 'undefined' && this.props.total > 0) {\n if (this.props.currencyIsAmbiguous) {\n total = (
\n \n );\n }\n}\n","import React from 'react';\nimport Option from './Option';\n\n\nexport default class Options extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.state = { checked: false }\n\n this.handleCheckSelect = this.handleCheckSelect.bind(this);\n this.handleRadioSelect = this.handleRadioSelect.bind(this);\n }\n\n handleCheckSelect(e) {\n this.props.onCheckSelect(e.currentTarget);\n this.setState({\n checked: !this.state.checked\n })\n }\n\n handleRadioSelect(e) {\n this.props.onCheckSelect(e.currentTarget);\n }\n\n render() {\n const displayOptions = {\n display: 'none',\n };\n let price = null;\n const options = [];\n\n\n // For web option, displays only the single option for whether to include web coverage\n if (this.props.options.length == 1) {\n price = { this.props.currentLicense.id === 3 ? '+' : '' }{this.props.currencySymbol}{Math.ceil(parseFloat(this.props.subTotal * this.props.options[0].multiplier * this.props.currencyValue))}{ this.props.currencyIsAmbiguous && {this.props.currencyCode}};\n options.push();\n }\n\n // For all other options, displays multiple options but only if the parent option has been chosen\n this.props.options.forEach((option, index) => {\n if (this.props.options.length > 1 && this.props.isChecked) {\n options.push();\n }\n });\n\n return (\n
\n
\n
\n \n {/* Displays the options created at the top of the render method */}\n {options}\n
\n
\n
\n );\n }\n}\n","import React, { Fragment } from 'react';\nimport LicenseLink from './LicenseLink';\nimport Summary from './Summary';\nimport { withRouter } from 'react-router';\nimport MobileCheckoutButton from './MobileCheckoutButton';\nimport ReactBootstrapSlider from 'react-bootstrap-slider';\nimport Options from './Options';\nimport AssetPaginationPrevSecondary from 'styles/svg-components/AssetPaginationPrevSecondary.js';\nimport CrossLight from 'styles/svg-components/CrossLight.js';\nimport Config from '../../../constants';\nimport className from 'classnames';\n\nclass Coverage extends React.Component {\n constructor(props) {\n super(props);\n let subTotal = 0;\n let currencySubTotal = 0;\n if (this.props.direct || this.props.currentLicense.id == '3') {\n subTotal = this.props.subTotal;\n currencySubTotal = this.props.currencySubTotal;\n }\n\n const coverages = {};\n switch (this.props.currentLicense.id) {\n case 3:\n coverages[['Web & Podcast']] = { id: '16', multiplier: '0', option_name: 'Web & Podcast' };\n break;\n case 4:\n coverages[['Web & Personal']] = { id: '17', multiplier: '0', option_name: 'Web & Personal' };\n break;\n case 6:\n coverages[['Web & Course']] = { id: '18', multiplier: '0', option_name: 'Web & Course' };\n break;\n }\n\n this.state = {\n currencySubTotal,\n total: currencySubTotal,\n coverageTotal: currencySubTotal,\n checkout: this.props.checkout,\n numEdits: 1,\n coverages,\n coverageParents: {},\n currentValue: 1,\n checkoutButtonActive: '',\n };\n\n this.changeValue = this.changeValue.bind(this);\n this.slideStop = this.slideStop.bind(this);\n this.handleAddToCart = this.handleAddToCart.bind(this);\n this.handlePreviewLicense = this.handlePreviewLicense.bind(this);\n this.handleCheckSelect = this.handleCheckSelect.bind(this);\n this.displayCheckout = this.displayCheckout.bind(this);\n }\n\n handleCheckSelect(target) {\n const coverages = this.state.coverages;\n const coverageParents = this.state.coverageParents;\n const name = target.getAttribute('data-option-name');\n const id = target.getAttribute('data-id');\n const option_name = target.getAttribute('data-option-name');\n let multiplier = false;\n\n if (target.getAttribute('data-length') === '1') {\n multiplier = target.getAttribute('data-multiplier');\n } else if (target.getAttribute('data-length') === '-1') {\n multiplier = target.getAttribute('data-multiplier');\n }\n\n if (target.getAttribute('data-length') == 1 || target.getAttribute('data-length') == '-1') {\n if (target.getAttribute('data-parent-name')) {\n const parentName = target.getAttribute('data-parent-name');\n\n // If an option with a parent has been selected, make sure any previously selected children have been removed\n Object.entries(this.props.currentLicense.coverages).forEach((parentCoverage) => {\n if (parentCoverage[1].name == parentName) {\n Object.entries(parentCoverage[1].options).forEach((option) => {\n if (coverages[[option[1].full_display_name]] || coverages[[option[1].full_display_name]] == false) {\n delete coverages[[option[1].full_display_name]];\n }\n });\n }\n });\n }\n\n if (coverages[[name]] || coverages[[name]] == false) {\n delete coverages[[name]];\n this.props.drip('Removed License Coverage', option_name);\n } else {\n coverages[[name]] = { id, multiplier, option_name };\n this.props.drip('Selected License Coverage', option_name);\n }\n } else if (coverageParents[[name]] || coverageParents[[name]] == false) {\n delete coverageParents[[name]];\n\n // If an option with a parent has been selected, make sure any previously selected children have been removed\n const parentName = name;\n Object.entries(this.props.currentLicense.coverages).forEach((parentCoverage) => {\n if (parentCoverage[1].name == parentName) {\n Object.entries(parentCoverage[1].options).forEach((option) => {\n if (coverages[[option[1].full_display_name]] || coverages[[option[1].full_display_name]] == false) {\n delete coverages[[option[1].full_display_name]];\n this.props.drip('Removed License Coverage', option[1].full_display_name);\n }\n });\n }\n });\n } else {\n coverageParents[[name]] = true;\n }\n\n\n this.displayCheckout(coverages);\n }\n\n displayCheckout(coverages) {\n // Calculate total, coverageTotal and whether to display checkout button based upon what's been selected and license type\n let coverageTotal = Math.ceil(this.state.currencySubTotal);\n let currencyCoverageTotal = Math.ceil(this.state.currencySubTotal);\n let active = false;\n\n Object.values(coverages).forEach((coverage) => {\n coverageTotal += Math.ceil((coverage.multiplier * this.state.currencySubTotal));\n currencyCoverageTotal += Math.ceil((coverage.multiplier * this.props.subTotal) * this.props.currencyValue);\n active = true;\n });\n\n coverageTotal = currencyCoverageTotal;\n\n const numEdits = this.state.numEdits;\n let total = currencyCoverageTotal;\n let currencyTotal = currencyCoverageTotal;\n if (numEdits > 1) {\n let extra = total * this.props.currentLicense.edit.base;\n let currencyExtra = currencyTotal * this.props.currentLicense.edit.base;\n\n extra *= (numEdits - 1);\n currencyExtra *= (numEdits - 1);\n if (numEdits > 2) {\n extra *= (1 - (this.props.currentLicense.edit.discount * (numEdits - 2)));\n currencyExtra *= (1 - (this.props.currentLicense.edit.discount * (numEdits - 2)));\n }\n total += extra;\n currencyTotal += currencyExtra;\n }\n\n if (this.props.currentLicense.id == '3' || this.props.direct || active) {\n if (this.props.currentLicense.id == 4 || this.props.currentLicense.id == 6) {\n this.setState({ checkout: true, total, coverageTotal, coverages });\n } else {\n this.setState({ checkout: true, total, coverageTotal, coverages });\n }\n } else {\n this.setState({ checkout: false, total, coverageTotal, coverages });\n }\n }\n\n changeValue(e) {\n // Update total based upon number of edits chosen\n let total = Math.ceil(this.state.coverageTotal);\n const numEdits = e.target.value;\n if (numEdits > 1) {\n let extra = total * this.props.currentLicense.edit.base;\n\n extra *= (numEdits - 1);\n if (numEdits > 2) {\n extra *= (1 - (this.props.currentLicense.edit.discount * (numEdits - 2)));\n }\n total += extra;\n }\n\n if (this.props.currentLicense.id == 4 || this.props.currentLicense.id == 6) {\n this.setState({ total, numEdits, currentValue: numEdits });\n } else {\n this.setState({ total, numEdits, currentValue: numEdits });\n }\n }\n\n slideStop() {\n }\n\n /**\n * TODO: this.props.track.id isn't defined when the License select modal is opened from the player\n */\n handleAddToCart(e) {\n const cartItem = {};\n\n this.setState({\n isValidating: true,\n });\n\n\n cartItem[0] = {\n trackId: this.props.track.id,\n licenseId: this.props.currentLicense.id,\n scaleId: this.props.scale.id,\n numEdits: this.state.numEdits,\n coverages: this.state.coverages,\n total: this.props.total,\n };\n\n let redirectToCheckout = false;\n if (e.target.id == 'checkout') {\n redirectToCheckout = true;\n this.props.drip('License Modal', 'Clicked Checkout');\n } else {\n this.props.drip('License Modal', 'Clicked Add to Cart');\n }\n\n // api/checkout/basket/add-basket-track/16?license_id=6&license_scale_id=5&license_coverage_option_ids[]=3&license_coverage_option_ids[]=4&license_coverage_option_ids[]=1&num_edits=3\n let path = `${Config.API}checkout/basket/add-basket-track/${cartItem[0].trackId}?license_id=${cartItem[0].licenseId}&license_scale_id=${cartItem[0].scaleId}&num_edits=${cartItem[0].numEdits}`;\n for (const key in cartItem[0].coverages) {\n path = `${path}&license_coverage_option_ids[]=${cartItem[0].coverages[key].id}`;\n }\n const authKey = sessionStorage.getItem('auth_token');\n return fetch(path, {\n method: 'GET',\n headers: {\n 'Content-Type': 'application/json',\n 'X-Auth-Token': authKey,\n 'X-GUID': sessionStorage.getItem('customer_guid') || null,\n },\n credentials: 'same-origin',\n // mode: 'CORS',\n })\n .then((res) => {\n // Update the basket count\n let basketCount = parseInt(sessionStorage.getItem('basket_count'));\n sessionStorage.setItem('basket_count', basketCount += 1);\n $('.cart-total-number-text').text(sessionStorage.getItem('basket_count'));\n\n // Update the basket_track_ids\n const basketTrackIds = Object.assign([], this.props.basketTrackIdsArray);\n basketTrackIds.push(this.props.track.id);\n sessionStorage.setItem('basket_track_ids', JSON.stringify(basketTrackIds));\n\n if (redirectToCheckout) {\n // basket pick-up on the other side is now handled by cookies.\n // const redirectPath = `${Config.BASE_URL}checkout/basket`;\n\n // if (sessionStorage.getItem('customer_guid')) {\n // redirectPath = `http://musicvine.com/checkout/basket?guid=${sessionStorage.getItem('customer_guid')}`;\n // } else if (sessionStorage.getItem('auth_token')) {\n // redirectPath = `http://musicvine.com/checkout/basket?auth_token=${sessionStorage.getItem('auth_token')}`;\n // } else {\n // redirectPath = 'http://musicvine.com/checkout/basket';\n // }\n this.props.onRemoveLicense(true);\n return this.props.router.push('/checkout/cart');\n }\n this.setState({\n isValidating: false,\n });\n\n // Close the modal\n this.props.onRemoveLicense(true);\n\n\n return res.json();\n })\n .catch((err) => log(err));\n }\n\n /**\n * TODO: this.props.track.id isn't defined when the License select modal is opened from the player\n */\n handlePreviewLicense(e) {\n const cartItem = {};\n cartItem[0] = {\n trackId: this.props.track.id,\n licenseId: this.props.currentLicense.id,\n scaleId: this.props.scale.id,\n numEdits: this.state.numEdits,\n coverages: this.state.coverages,\n total: this.props.total,\n };\n\n this.props.drip('Downloaded Preview License');\n\n // api/checkout/basket/preview-license-agreement/16?license_id=6&license_scale_id=5&license_coverage_option_ids[]=3&license_coverage_option_ids[]=4&license_coverage_option_ids[]=1&num_edits=3\n let path = `${Config.API}checkout/basket/preview-license-agreement/${cartItem[0].trackId}?license_id=${cartItem[0].licenseId}&license_scale_id=${cartItem[0].scaleId}&num_edits=${cartItem[0].numEdits}`;\n for (const key in cartItem[0].coverages) {\n path = `${path}&license_coverage_option_ids[]=${cartItem[0].coverages[key].id}`;\n }\n return window.open(path);\n }\n\n render() {\n let previewLicenseLink = null;\n let checkoutButton = null;\n let cartButton = null;\n\n if (this.state.checkout) {\n previewLicenseLink = (Preview License);\n checkoutButton = (\n Checkout\n );\n cartButton = (\n Add to Cart\n );\n }\n\n const SliderStyle = {\n padding: '40px',\n };\n\n let editsText = 'No. Video Edits';\n let editsDescription = 'Cover multiple edits of the same production.';\n if (this.props.currentLicense.id == '2') {\n editsText = 'No. Episodes';\n editsDescription = 'Cover multiple episodes within a single series.';\n } else if (this.props.currentLicense.id == '3') {\n editsText = 'No. Videos / Episodes';\n editsDescription = 'Cover multiple episodes within a single channel/series.';\n } else if (this.props.currentLicense.id == '4') {\n editsText = 'No. Productions';\n editsDescription = 'Cover multiple productions.';\n } else if (this.props.currentLicense.id == '5') {\n editsText = 'No. Edits';\n } else if (this.props.currentLicense.id == '6') {\n editsText = 'No. Productions';\n editsDescription = 'Cover multiple productions.';\n }\n\n let pageTitle = 'Select Coverage';\n if (this.props.currentLicense.id == '3' || this.props.currentLicense.id == '4' || this.props.currentLicense.id == '6') {\n pageTitle = 'Coverage Add-Ons';\n } \n return (\n \n
\n
\n
\n
\n \n
\n \n
\n \n
\n
{pageTitle}
\n
\n {/* For each LicenseCoverage display options and set methods to deal with selection */}\n {this.props.currentLicense.coverages && this.props.currentLicense.coverages.map((coverage, index) => (\n \n )) }\n
\n
\n {/* Row */}\n
\n
\n {editsText}\n
\n
\n
\n {editsDescription}\n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n
\n \n
\n \n \n );\n }\n}\n\nexport default withRouter(Coverage)","import React from \"react\";\nimport InlineSVG from 'svg-inline-react';\n\nclass Infinite extends React.Component {\n render() {\n const Infinite = `\n\n\n`;\n return (\n \n );\n }\n}\n\nexport default Infinite;\n","import React from 'react';\nimport { connect } from 'react-redux';\nimport LicenseLink from './LicenseLink';\nimport LicenseRowChevron from './LicenseRowChevron';\nimport A from '../../../components/A';\nimport Summary from './Summary';\nimport CrossLight from 'styles/svg-components/CrossLight.js';\nimport Spinner from 'styles/svg-components/Spinner.js';\nimport Infinite from 'styles/svg-components/Infinite.js';\nimport { API } from '../../../constants';\nimport {\n addModal,\n} from '../../../actions/authenticationAction';\n\nclass LicensingMethod extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n suppressLicensePrompt: false\n };\n\n this.handleChange = this.handleChange.bind(this);\n this.handleLoginSwitch = this.handleLoginSwitch.bind(this);\n }\n\n handleChange(event) {\n this.setState({suppressLicensePrompt: event.target.checked});\n }\n\n handleLoginSwitch(event) {\n event.preventDefault();\n \n this.props.onRemoveLicense();\n \n this.props.onAddModal('login');\n $('body').addClass('modal-overlay-active');\n }\n\n render() {\n let currencyCode = '';\n if (sessionStorage.getItem('currency_code') == 'USD' || sessionStorage.getItem('currency_code') == 'AUD' || sessionStorage.getItem('currency_code') == 'CAD') {\n currencyCode = ` ${sessionStorage.getItem('currency_code')}`;\n }\n\n return (\n
\n
\n
Select A Licensing Option
\n \n
\n
\n
\n
\n
\n \n
Subscription
\n
\n
\n
\n
\n \n
\n
\n
Subscription
\n
\n
\n
\n
Love our music? Enjoy unlimited access to our acclaimed catalog with our Pro or Creator subscriptions. Our plans are straightforward and built to give you total peace of mind.
Buy a license for this track only with our Pay-Per-Use licenses. Ideal if you have a less regular need for music. We offer an array of licenses to suit productions of all shapes and sizes.
\n
\n
\n \n
\n \n
\n
\n
\n
\n
\n \n
\n \n
\n );\n }\n}\n\n\n// Map redux actions to local props.\nconst mapDispatchToProps = (dispatch) => ({\n onAddModal: (modal) => {\n dispatch(addModal(modal));\n },\n});\n\n// Map redux states to local props.\nconst mapStateToProps = (state) => ({\n});\n\n// Wrap the component to inject dispatch and state into it\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(LicensingMethod);\n","import React from \"react\";\nimport InlineSVG from 'svg-inline-react';\n\nclass FileText extends React.Component {\n render() {\n const FileText = `\n\n\n`;\n return (\n \n );\n }\n}\n\nexport default FileText;\n","import React, {Fragment} from 'react';\nimport A from '../../../components/A';\n\nexport default class SubscriptionUsageWarning extends React.Component {\n constructor(props) {\n super(props);\n }\n\n\n render() {\n return (\n
\n
Heads up!
\n
You’ve licensed a lot of tracks {`${ this.props.licenseStatusD === 1 ? 'today' : 'this month' }`}. If you need a preview version to use in your videos, please use the “Download Preview” button.
\n
As per the Terms and Conditions of your subscription, you may only license tracks for active projects.
Additionally, you are nearing the monthly limit of licenses generated through our site.
\n
While you will still be able to license tracks once this limit is reached, you will have to do so by contacting Music Vine directly, which may cause minor delays to your production.
\n \n }\n \n
\n );\n }\n}\n","import React, {Fragment} from 'react';\nimport A from '../../../components/A';\n\nexport default class SubscriptionUsageReached extends React.Component {\n constructor(props) {\n super(props);\n } \n\n render() {\n return (\n \n
Limit Reached
\n
You've hit your {`${ this.props.licenseStatusM === 2 ? 'monthly' : 'daily' }`} automatic license limit.
\n
While your subscription is unlimited, as per the Terms and Conditions of your subscription, you may only license tracks for active projects.
\n
Each license you create is used to ensure that we're fairly compensating our artists for each placement of their music, and misuse of this feature can result in our artists not being fairly compensated for their work.
\n
If you require more tracks urgently, you can request additional licenses by getting in touch.
\n \n );\n }\n}\n","import React, {Fragment} from 'react';\nimport { connect } from 'react-redux';\nimport className from 'classnames';\nimport A from '../../../components/A';\nimport CrossLight from 'styles/svg-components/CrossLight.js';\nimport LogoSVG from 'styles/svg-components/LogoSVG.js';\nimport SignupModal from 'components/SignupModal';\nimport Config, { API } from '../../../constants';\nimport Download from 'styles/svg-components/Download.js';\nimport FileText from 'styles/svg-components/FileText.js';\nimport SubscriptionUsageWarning from './SubscriptionUsageWarning';\nimport SubscriptionUsageReached from './SubscriptionUsageReached';\nimport { addNewEngagement } from 'actions/favouriteAction';\n\nimport {\n addModal,\n getAuthToken,\n} from '../../../actions/authenticationAction';\nimport GenerateAutoClearCodeButton from '../../CustomerPage/LicenseHistory/GenerateAutoClearCodeButton';\n\nclass SubscriptionLicenseModal extends React.Component { // eslint-disable-line react/prefer-stateless-function\n constructor(props) {\n super(props);\n this.state = {\n tab: 'customer',\n edits: 1,\n licenseModalStep: 1,\n licenseId: false,\n error: false,\n errorCode: false,\n errorMessage: false,\n downloadLink: false,\n licenseStatusD: 0,\n licenseStatusM: 0,\n overdueId: false,\n needsDownloadCode: null\n };\n\n this.licenseDelay = 2500;\n\n this.onRequestSubscriptionLicense = this.onRequestSubscriptionLicense.bind(this);\n this.licenseStepDebug = this.licenseStepDebug.bind(this);\n this.downloadLicense = this.downloadLicense.bind(this);\n this.downloadFiles = this.downloadFiles.bind(this);\n this.handleChange = this.handleChange.bind(this);\n this.handleAddModal = this.handleAddModal.bind(this);\n this.hasWarning = this.hasWarning.bind(this);\n }\n\n componentDidMount() {\n this.props.drip(\"Started Subscription Licensing Process\");\n }\n\n handleAddModal(e) {\n e.preventDefault();\n\n this.props.onRemoveLicense();\n\n this.props.onAddModal('login');\n $('body').addClass('modal-overlay-active');\n }\n\n\n onRequestSubscriptionLicense() {\n this.setState({\n licenseModalStep: 2,\n error: false,\n errorCode: false,\n errorMessage: false,\n });\n\n this.props.requestSubscriptionLicense(this.props.track.id, this.state.edits, getAuthToken() )\n .then((data) => {\n console.log(data);\n let errorCode = false;\n let overdueId = false;\n let errorMessage = \"Sorry, something went wrong.\";\n\n if (data.success && data.licenseStatusD !== 2 && data.licenseStatusM !== 2) {\n window.setTimeout(function() {\n\n this.props.drip(\"Licensed Track with Subscription\");\n\n addNewEngagement(\"subscription\", this.props.track.id, this.props.track.current_context.id);\n\n this.setState({\n licenseModalStep: 3,\n licenseId: data.licenseId,\n downloadLink: data.download,\n licenseStatusD: data.licenseStatusD,\n licenseStatusM: data.licenseStatusM,\n needsDownloadCode: data.needsDownloadCode\n });\n }.bind(this), this.licenseDelay);\n } else if (data.licenseStatusD === 2 || data.licenseStatusM === 2) {\n this.setState({\n licenseModalStep: 4,\n licenseStatusD: data.licenseStatusD,\n licenseStatusM: data.licenseStatusM,\n });\n } else {\n if (data.error) {\n if (data.error.message === \"No user found\") {\n errorMessage = \"You have been signed out - please sign in again to continue.\";\n } else if ( data.error.code === 1 ) {\n errorCode = data.error.code;\n errorMessage = data.error.message;\n overdueId = data.error.paymentId;\n } else if ( data.error.code === 2 ) {\n errorCode = data.error.code;\n errorMessage = \"Access to your free account has expired. If this is a mistake please get in touch.\";\n }\n }\n\n this.setState({\n licenseModalStep: 1,\n error: true,\n errorCode,\n errorMessage,\n overdueId,\n });\n }\n })\n .catch((err) => err);\n }\n handleChange(event) {\n this.setState({edits: event.target.value});\n }\n licenseStepDebug(step) {\n this.setState({licenseModalStep: step});\n }\n\n downloadFiles() {\n if (this.state.downloadLink) {\n window.location = this.state.downloadLink;\n }\n }\n\n downloadLicense() {\n console.log(this.state.licenseId);\n if (this.state.licenseId) {\n window.open(`${API}subscription/getlicense/${this.state.licenseId}`);\n }\n }\n\n hasWarning() {\n return ( this.state.licenseStatusD === 1 || this.state.licenseStatusM === 1 );\n }\n\n render() {\n return (\n
For supported tracks, our AutoClear solution automatically releases copyright claims on YouTube. Learn more.
\n \n )}\n\n\n
\n \n \n
\n
\n \n \n
\n
\n
\n }\n
\n
\n );\n }\n}\n\n\n// Map redux actions to local props.\nconst mapDispatchToProps = (dispatch) => ({\n onAddModal: (modal) => {\n dispatch(addModal(modal));\n },\n});\n\n// Map redux states to local props.\nconst mapStateToProps = (state) => ({\n license: state.get('license'),\n});\n\n// Wrap the component to inject dispatch and state into it\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(SubscriptionLicenseModal);\n","import React, {Fragment} from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { createStructuredSelector } from 'reselect';\nimport { fetchLicenses, fetchDMultiplier, addToCart, removeLicense, getCurrencySpecificScaleText, getColourTheming, requestSubscriptionLicense } from 'actions/licenseAction';\nimport $ from 'jquery';\n\nimport Type from './PayPerUse/Type';\nimport Scale from './PayPerUse/Scale';\nimport Coverage from './PayPerUse/Coverage';\nimport LicensingMethod from './PayPerUse/LicensingMethod';\n\nimport { drip } from 'utils/drip';\n\nimport SubscriptionLicenseModal from './Subscription/SubscriptionLicenseModal';\nimport {\n setCookie,\n getCookie,\n} from 'actions/authenticationAction';\n\nclass LicensePage extends React.Component {\n\n constructor(props) {\n super(props);\n let track = false;\n let trackVersion = false;\n let trackDuration = false;\n let currentLicense = false;\n let scale = false;\n let web = false;\n let broadcast = false;\n let filmfestival = false;\n let theatrical = false;\n let monetized = false;\n let numEdits = 1;\n let total = 0;\n let step = 1;\n let hasAccount = false;\n let isActive = this.props.subscriptionData.isActive;\n let isFreeTrial = this.props.subscriptionData.isFreeTrial;\n let hasSuppressedSubscription = false;\n let loggedOutSubscriber = sessionStorage.getItem('is_subscriber') === 'true';\n let loggedOutSubscription = 1;\n\n if ( localStorage.getItem('quick_login') && localStorage.getItem('quick_login') !== '' && localStorage.getItem('quick_login') !== 'undefined' ) {\n hasAccount = true;\n }\n\n if (getCookie('has_suppressed_subscription') === '1' || sessionStorage.getItem('has_suppressed_subscription') === '1') {\n hasSuppressedSubscription = true;\n }\n\n if (this.props.track) {\n // If from cart page use track data sent\n track = this.props.track;\n\n for (var i = 0; i < this.props.track.track_version.length; i++) {\n trackVersion = this.props.track.track_version[i];\n\n // Loop through versions until one is found marked as the Main Version\n if ( trackVersion.version_type.id === 1 ) {\n trackDuration = trackVersion.version_length;\n break;\n }\n }\n\n // If no main version was found for some reason, just use the first version's length.\n if ( !trackDuration ) {\n trackDuration = this.props.track.track_version[0].version_length;\n }\n\n } else if (this.props.params && this.props.cart[this.props.params.trackId]) {\n // If editing an existing cart item load data from cart using trackId in URL\n const cartItem = this.props.cart[this.props.params.trackId];\n track = cartItem.track;\n currentLicense = cartItem.license.currentLicense;\n scale = cartItem.license.scale;\n web = cartItem.license.web;\n broadcast = cartItem.license.broadcast;\n filmfestival = cartItem.license.filmfestival;\n theatrical = cartItem.license.theatrical;\n monetized = cartItem.license.monetized;\n numEdits = cartItem.license.numEdits;\n total = cartItem.license.total;\n } else {\n step = 0;\n }\n\n if ( hasSuppressedSubscription ) {\n step = 2;\n }\n\n const basketTrackIdsArray = JSON.parse(sessionStorage.getItem('basket_track_ids')) || [];\n\n let notification = false;\n if (basketTrackIdsArray.indexOf(track.id) != -1) {\n notification = true;\n }\n\n // Set default state\n this.state = {\n track,\n trackDuration,\n step,\n licenses: [],\n duration_multiplier: [],\n licenseTheme: 'default',\n currentLicense,\n scale,\n web,\n broadcast,\n filmfestival,\n theatrical,\n monetized,\n numEdits,\n checkout: false,\n direct: false,\n subTotal: 0,\n currencySubTotal: 0,\n total,\n notification,\n basketTrackIdsArray,\n hasAccount,\n hasSuppressedSubscription,\n isActive,\n isFreeTrial,\n loggedOutSubscriber,\n loggedOutSubscription,\n overrideLogin: false,\n forcePayPerUse: false,\n };\n\n this.handleTypeSelect = this.handleTypeSelect.bind(this);\n this.handleMethodSelect = this.handleMethodSelect.bind(this);\n this.handleDismissSubscription = this.handleDismissSubscription.bind(this);\n this.handleScaleSelect = this.handleScaleSelect.bind(this);\n this.handlePrevious = this.handlePrevious.bind(this);\n this.handleRemoveLicense = this.handleRemoveLicense.bind(this);\n this.handleChange = this.handleChange.bind(this);\n this.debugStepOne = this.debugStepOne.bind(this);\n this.goToPayPerUse = this.goToPayPerUse.bind(this);\n }\n\n goToPayPerUse() {\n this.setState({ step: 2, forcePayPerUse: true });\n }\n\n handleChange(event) {\n const target = event.target;\n const value = target.type === 'checkbox' ? target.checked : target.value;\n const name = target.name;\n\n this.setState({\n [name]: value\n });\n }\n componentWillMount() {\n // Fetch all possible licenses\n fetchLicenses().then((data) => {\n this.setState({ licenses: data });\n }).catch((err) => err);\n\n // Fetch multiplier that is related to duration of the track\n fetchDMultiplier(this.state.trackDuration).then((data) => {\n this.setState({ duration_multiplier: data.multiplier });\n }).catch((err) => err);\n }\n\n componentDidUpdate() {\n\n if (this.props.track && this.props.track != this.state.track) {\n this.setState({\n track: this.props.track,\n trackDuration: this.props.track.track_url.version_length,\n currentLicense: false,\n scale: false,\n web: false,\n broadcast: false,\n filmfestival: false,\n theatrical: false,\n monetized: false,\n numEdits: 1,\n total: 0,\n step: 1,\n });\n }\n }\n\n handleMethodSelect(hasSuppressedSubscription) {\n drip(\"Clicked View Licenses\");\n if (hasSuppressedSubscription) {\n this.handleDismissSubscription();\n }\n this.setState( {'step': 2} );\n }\n\n handleDismissSubscription() {\n drip(`Selected \"Don't Ask Again\"`);\n sessionStorage.setItem('has_suppressed_subscription', 1);\n this.setState( {'hasSuppressedSubscription': true} );\n }\n\n // handles the selection of the LicenseType in \n handleTypeSelect(index) {\n let checkout = false;\n let direct = false;\n\n // Licenses can be either a direct or non-direct, the license types that are direct have the id 4 or 5. This checks to see if the chosen license is direct.\n const directLicenses = [4, 6];\n if (directLicenses.indexOf(this.state.licenses[index].id) !== -1) {\n checkout = true;\n direct = true;\n }\n\n // License 3 is not direct, but can be checked out with no coverage options\n if (this.state.licenses[index].id == '3') {\n checkout = true;\n }\n\n // not all licenses have scale as an option, if they do not skip to step 4, if they do go to step 3\n let step = 4;\n if (this.state.licenses[index].scale_type) {\n step = 3;\n }\n let subTotal = this.state.licenses[index].base * this.state.duration_multiplier;\n let currencySubTotal = Math.ceil(subTotal * this.props.currency.value);\n\n drip(\"Selected License Type\", this.state.licenses[index].name);\n\n this.setState({ currentLicense: this.state.licenses[index], step, checkout, direct, web: false, broadcast: false, subTotal: subTotal, currencySubTotal: currencySubTotal });\n }\n\n // handles the selection of the LicenseScale in \n handleScaleSelect(index) {\n // set the sub total and skip to step 3\n // const subTotal = (this.state.subTotal * this.state.currentLicense.scales[index].multiplier);\n const subTotal = (this.state.currentLicense.base * this.state.duration_multiplier) * this.state.currentLicense.scales[index].multiplier;\n const currencySubTotal = subTotal * this.props.currency.value;\n\n drip(\"Selected License Scale\", this.state.currentLicense.scales[index].size);\n\n this.setState({ scale: this.state.currentLicense.scales[index], step: 4, total: subTotal, subTotal, currencySubTotal: currencySubTotal });\n }\n\n // Go back a step depending on whether direct or not\n handlePrevious() {\n let newStep = this.state.step - 1;\n\n if (this.state.step === 4 && this.state.direct) {\n let newStep = 2;\n this.setState({ step: newStep, total: 0 });\n } else if (this.state.step === 3) {\n this.setState({ step: newStep, total: 0, scale: false });\n } else {\n this.setState({ step: newStep, total: 0, scale: false });\n }\n\n if (newStep === 2) {\n this.setState( { licenseTheme: 'default', currentLicense: false } );\n }\n }\n\n handleRemoveLicense(addedToCart) {\n // This has to be an explicit check for 'true' as this function gets passed a class by default\n if ( addedToCart !== true ) {\n drip(`Abandoned License at Step ${this.state.step}`);\n }\n $('.modal-overlay').removeClass('active');\n this.props.onRemoveLicense();\n }\n\n debugStepOne() {\n this.setState({ step: 1 });\n }\n\n render() {\n let licenseStep;\n let subscriptionState = 0;\n\n if (this.state.isActive || this.state.isFreeTrial) {\n subscriptionState = 1; // Logged in, active sub\n } else if (this.state.loggedOutSubscriber) {\n subscriptionState = 2; // Logged out, active sub\n }\n\n if (this.state.forcePayPerUse) {\n subscriptionState = 0;\n }\n\n if (subscriptionState !== 0) {\n licenseStep = ;\n } else {\n switch (this.state.step) {\n case 0:\n licenseStep =
No Track data found
;\n break;\n case 1:\n licenseStep = ;\n break;\n case 2:\n licenseStep = ;\n break;\n case 3:\n licenseStep = ;\n break;\n case 4:\n licenseStep = ;\n break;\n default:\n licenseStep = ;\n break;\n }\n\n }\n\n \n return \n {licenseStep}\n {/*\n
We are passionate about building a platform that celebrates expressive, imaginative music with exceptional production values.
\n
If, like us, you live for the craftsmanship of creative work and are excited by prospect of being part of a remarkable new resource with a focus on quality over quantity, then we'd love to hear from you!
\n);\n\nDuration.propTypes = {\n duration: PropTypes.string.isRequired,\n};\n\nexport default Duration;\n","import { Link } from 'react-router';\nimport styled from 'styled-components';\n\nexport default styled(Link)`\n`;\n","import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport { PLACEHOLDER_IMG_URL } from 'components/ImgPlaceholder';\nimport NameLink from './NameLink';\nimport {getImgixUrl} from \"../../utils/helpers\";\n\nconst Profile = ({ activeTrack }) => (\n \n
![]({\"https://cdn.uppbeat.io/images/icons/UppBeat_Icons_Tick.svg\"})
Copied to clipboard!\n 
\n }\n ![](\"https://cdn.musicvine.com/images/subscription-infinite.svg\")
\n ![](\"https://cdn.musicvine.com/images/download-single-version.svg\")
\n ![](\"https://cdn.musicvine.com/images/request-custom.svg\")
\n ![](\"https://cdn.musicvine.com/images/admin-logo.png\"){kind=logo}
\n }\n ![](\"https://cdn.musicvine.com/images/download-all-versions.svg\")
;\n }\n\n let hasExisting = false;\n const playlistsData = JSON.parse( sessionStorage.getItem('playlists_data') );\n if (playlistsData.length > 0) {\n hasExisting = true;\n }\n\n return (\n ![{\"\"}]({\"https://cdn.musicvine.com/images/autoclear-modal-header.svg\"})
\n ![{track.license_document._label}]({\"https://cdn.uppbeat.io/images/lh_m_document.svg\"})
\n {'Download license PDF'}\n \n )}\n\n {track.license_download && (\n ![{track.autoclear._label}]({\"https://cdn.uppbeat.io/images/lh_m_autoclear-code.svg\"})
\n {'Generate AutoClear code'}\n \n )}\n\n {track.license_again &&\n ![{track.license_again._label}]({\"https://cdn.uppbeat.io/images/lh_m_license-again.svg\"})
\n {'License again'}\n \n }\n 
\n 
);\n}\n\nProfile.propTypes = {\n activeTrack: PropTypes.object.isRequired,\n};\n\nexport default Profile;\n","import React from \"react\";\nimport InlineSVG from 'svg-inline-react';\n\nclass Plus extends React.Component {\n render() {\n const Plus = ``;\n return (\n