\r\n {collection.speakers && speakersLength > 0 && (\r\n
\r\n )}\r\n \r\n );\r\n}\r\n\r\nTorahAnytimeCollectionListItemTemplate.propTypes = {\r\n torahAnytimeCollectionListItemViewStore: PropTypes.object.isRequired,\r\n onCellClick: PropTypes.func.isRequired,\r\n t: PropTypes.func,\r\n};\r\n\r\nconst PanelHeader = observer(function PanelHeader({ title, store, t, isCollapsed, item, actions }) {\r\n const {\r\n isTurnedOn,\r\n isDisabled,\r\n toggleCollectionStatus,\r\n contentAccessResult,\r\n hasTopics,\r\n hasSpeakers,\r\n torahAnytimeViewStore: { torahAnytimePodcast },\r\n rootStore: { userDeviceStore },\r\n } = store;\r\n return (\r\n \r\n
\r\n \r\n \r\n\r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n {!contentAccessResult.canAccessOnSelectedDevice && \r\n {title}\r\n
\r\n {torahAnytimePodcast &&\r\n torahAnytimePodcast.isPremium &&\r\n !contentAccessResult.canAccessPremium && (\r\n \r\n )}\r\n\r\n \r\n {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n toggleCollectionStatus(!isTurnedOn);\r\n }}\r\n icon=\"u-icon u-icon--med u-icon--premium--white\"\r\n classNameOverride={mergeCss(\r\n \"c-btn c-btn--status--sml\",\r\n isTurnedOn ? \"c-btn--status--enabled\" : \"c-btn--status--disabled\"\r\n )}\r\n />\r\n \r\n )}\r\n {actions.delete && (\r\n {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n actions.delete.onClick(item);\r\n }}\r\n />\r\n )}\r\n {actions.edit && (\r\n {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n actions.edit.onClick(item);\r\n }}\r\n />\r\n )}\r\n
\r\n \r\n {(!hasTopics || !hasSpeakers) && (\r\n
\r\n {userDeviceStore.deviceCount > 0 && contentAccessResult.canAccessOnSelectedDevice && (\r\n \r\n {!hasSpeakers && !hasTopics\r\n ? t(\"APPLICATION.TORAH_ANYTIME.LIST.REMOVED_DATA.SPEAKERS_AND_TOPICS\")\r\n : !hasSpeakers\r\n ? t(\"APPLICATION.TORAH_ANYTIME.LIST.REMOVED_DATA.SPEAKERS\")\r\n : t(\"APPLICATION.TORAH_ANYTIME.LIST.REMOVED_DATA.TOPICS\")}\r\n
\r\n )}\r\n\r\n
\r\n );\r\n}\r\n\r\nfunction TopicsList({ topics, topicsLength }) {\r\n topics = orderBy(topics, [\"topic.title\"]);\r\n return (\r\n \r\n
\r\n Speakers ({speakersLength})
\r\n\r\n {map(\r\n speakers,\r\n (speaker) =>\r\n speaker?.speaker && (\r\n
\r\n \r\n {[\r\n speaker?.speaker?.title,\r\n speaker?.speaker?.firstName,\r\n speaker?.speaker?.lastName,\r\n ].join(\" \")}\r\n
\r\n )\r\n )}\r\n \r\n
\r\n );\r\n}\r\n\r\nexport default observer(TorahAnytimeCollectionListItemTemplate);\r\n","import React from \"react\";\r\nimport { PropTypes } from \"prop-types\";\r\nimport { MrbFieldInput, MrbEditFormLayout, MrbButton } from \"mrb/components\";\r\nimport { MrbPageHeader } from \"mrb/components/layout\";\r\nimport { TorahAnytimeWizardLayout } from \"application/torah-anytime/components\";\r\nimport { observer } from \"mobx-react\";\r\nimport { MrbRouterLink } from \"mrb/core/infrastructure/router\";\r\n\r\nfunction TorahAnytimeCreatePlaylistTemplate({ torahAnytimeCollectionEditViewStore, torahAnytimeWizardViewStore, t }) {\r\n const { form, isEdit } = torahAnytimeCollectionEditViewStore;\r\n return (\r\n \r\n
\r\n Topics ({topicsLength})
\r\n\r\n {map(topics, (topic) => topic?.topic &&
\r\n {topic?.topic?.title}
)}\r\n \r\n \r\n \r\n Back\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n});\r\n\r\nTorahAnytimeCreatePlaylistTemplate.propTypes = {\r\n torahAnytimeCollectionEditViewStore: PropTypes.object.isRequired,\r\n t: PropTypes.func,\r\n};\r\n\r\nexport default observer(TorahAnytimeCreatePlaylistTemplate);\r\n","import React from \"react\";\r\nimport { PropTypes } from \"prop-types\";\r\nimport { HomeDeviceSelect } from \"application/home/components\";\r\nimport { observer } from \"mobx-react\";\r\n\r\nfunction TorahAnytimeHeaderTemplate({ store, t }) {\r\n const {\r\n deviceSelectStore,\r\n torahAnytimePodcast,\r\n rootStore: { userDeviceStore },\r\n } = store;\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n )}\r\n
\r\n );\r\n}\r\n\r\nTorahAnytimeHeaderTemplate.propTypes = {\r\n store: PropTypes.object.isRequired,\r\n t: PropTypes.func,\r\n};\r\n\r\nexport default observer(TorahAnytimeHeaderTemplate);\r\n","import React from \"react\";\r\nimport { TorahAnyTimeLoaderTemplate } from \"themes/application/torah-anytime/components\";\r\n\r\nfunction TorahAnyTimeLoader(props) {\r\n return {torahAnytimePodcast && torahAnytimePodcast.title}
\r\n {userDeviceStore.deviceCount > 0 && (\r\n \r\n \r\n \r\n Back\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n deselectTopic(item) : () => selectTopic(item)}\r\n >\r\n {isSelected ?
\r\n \r\n
\r\n {item.title}
\r\n \r\n );\r\n});\r\n\r\nfunction EnabledIndicator() {\r\n return ;\r\n}\r\n\r\nfunction DisabledIndicator() {\r\n return ;\r\n}\r\n\r\nfunction NoDataEmptyState({ queryUtility, t }) {\r\n const { filter } = queryUtility;\r\n const title = isEmpty(filter.search)\r\n ? t(\"APPLICATION.TORAH_ANYTIME.EDIT.SELECT_TOPICS.NO_DATA.TITLE\")\r\n : t(\"APPLICATION.TORAH_ANYTIME.EDIT.SELECT_TOPICS.NO_DATA.TITLE_WTH_SEARCH\", { search: filter.search });\r\n return (\r\n \r\n
\r\n );\r\n}\r\n\r\nconst SelectTopicsWizardControls = observer(function SelectTopicsWizardControls({\r\n store,\r\n torahAnytimeSelectTopicsViewStore,\r\n t,\r\n}) {\r\n const { nextStep, currentStep, previousStep, hasPreviousStep } = store;\r\n const { isTopicSelectionEmpty } = torahAnytimeSelectTopicsViewStore;\r\n return (\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n {title}
\r\n{t(\"APPLICATION.TORAH_ANYTIME.EDIT.SELECT_SPEAKERS.NO_DATA.DESCRIPTION\")}
\r\n\r\n \r\n \r\n {hasPreviousStep && (\r\n
\r\n \r\n );\r\n});\r\n\r\nexport default observer(TorahAnytimeSelectTopicsTemplate);\r\n","import React from \"react\";\r\nimport { MrbGrid } from \"mrb/components/grid\";\r\nimport { Image } from \"common/components\";\r\nimport { MrbPageHeader } from \"mrb/components/layout\";\r\nimport { MrbQuerySearchInput } from \"mrb/components/input\";\r\nimport { MrbButton } from \"mrb/components/button\";\r\nimport { MrbPager } from \"mrb/components/pager\";\r\nimport { TorahAnytimeWizardLayout } from \"application/torah-anytime/components\";\r\nimport { findIndex, isEmpty } from \"lodash\";\r\nimport { mergeCss } from \"mrb/common/utils\";\r\nimport { observer } from \"mobx-react\";\r\nimport { TorahAnyTimeLoader } from \"application/torah-anytime/components/content-loader\";\r\nimport { MrbRouterLink } from \"mrb/core/infrastructure/router\";\r\n\r\nfunction TorahAnytimeSelectSpeakersTemplate({ torahAnytimeSelectSpeakersViewStore, torahAnytimeWizardViewStore, t }) {\r\n const { gridStore, torahAnytimeSelectionViewStore, queryUtility, selectSpeakersByGender, clearSelection } =\r\n torahAnytimeSelectSpeakersViewStore;\r\n\r\n return (\r\n \r\n {isTopicSelectionEmpty && (\r\n
\r\n \r\n
\r\n )}\r\n \r\n {t(\"APPLICATION.TORAH_ANYTIME.EDIT.SELECT_TOPICS.VALIDATION.NOTHING_SELECTED\")}\r\n
\r\n\r\n \r\n \r\n Back\r\n \r\n
\r\n \r\n {\r\n selectSpeakersByGender(false);\r\n }}\r\n t={t}\r\n />\r\n {\r\n selectSpeakersByGender(true);\r\n }}\r\n t={t}\r\n />\r\n
\r\n \r\n
\r\n \r\n \r\n deselectSpeaker(item) : () => selectSpeaker(item)}\r\n >\r\n {isSelected ?
\r\n \r\n
\r\n {[item.title, item.firstName, item.lastName].join(\" \")}
\r\n \r\n );\r\n});\r\n\r\nfunction EnabledIndicator() {\r\n return ;\r\n}\r\n\r\nfunction DisabledIndicator() {\r\n return ;\r\n}\r\n\r\nfunction NoDataEmptyState({ queryUtility, t }) {\r\n const { filter } = queryUtility;\r\n const title = isEmpty(filter.search)\r\n ? t(\"APPLICATION.TORAH_ANYTIME.EDIT.SELECT_SPEAKERS.NO_DATA.TITLE\")\r\n : t(\"APPLICATION.TORAH_ANYTIME.EDIT.SELECT_SPEAKERS.NO_DATA.TITLE_WTH_SEARCH\", { search: filter.search });\r\n return (\r\n \r\n
\r\n );\r\n}\r\n\r\nconst SelectSpeakersWizardControls = observer(function SelectSpeakersWizardControls({\r\n store,\r\n torahAnytimeSelectSpeakersViewStore,\r\n t,\r\n}) {\r\n const { nextStep, currentStep, previousStep, hasPreviousStep } = store;\r\n const { isSpeakerSelectionEmpty } = torahAnytimeSelectSpeakersViewStore;\r\n return (\r\n \r\n
\r\n \r\n \r\n
\r\n\r\n \r\n
\r\n {title}
\r\n{t(\"APPLICATION.TORAH_ANYTIME.EDIT.SELECT_SPEAKERS.NO_DATA.DESCRIPTION\")}
\r\n\r\n \r\n \r\n {hasPreviousStep && (\r\n
\r\n \r\n );\r\n});\r\n\r\nexport default observer(TorahAnytimeSelectSpeakersTemplate);\r\n","import React from \"react\";\r\nimport { TorahAnytimeWizardLayoutTemplate } from \"themes/application/torah-anytime/components\";\r\n\r\nfunction TorahAnytimeWizardLayout(props) {\r\n return \r\n {isSpeakerSelectionEmpty && (\r\n
\r\n \r\n
\r\n )}\r\n \r\n {t(\"APPLICATION.TORAH_ANYTIME.EDIT.SELECT_SPEAKERS.VALIDATION.NOTHING_SELECTED\")}\r\n
\r\n\r\n \r\n \r\n (\r\n
\r\n \r\n
\r\n )\r\n );\r\n});\r\n\r\nfunction NoDataEmptyState({ onClickCreateNew, t }) {\r\n return (\r\n {t(\"APPLICATION.TORAH_ANYTIME.LIST.MY_PLAYLISTS\")}
\r\n\r\n
\r\n );\r\n}\r\n\r\nexport default defaultTemplate(TorahAnytimeTemplate);\r\n","import React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport { HomePageLayout } from \"application/home/components\";\r\nimport { defaultTemplate } from \"common/hoc\";\r\n\r\nfunction TorahAnytimeWizardTemplate({ torahAnytimeWizardViewStore, t }) {\r\n const { currentStep, routeStore, torahAnytimeSelectionViewStore } = torahAnytimeWizardViewStore;\r\n return (\r\n \r\n
\r\n \r\n \r\n
\r\n\r\n \r\n
\r\n {t(\"APPLICATION.TORAH_ANYTIME.LIST.NO_DATA.TITLE\")}
\r\n{t(\"APPLICATION.TORAH_ANYTIME.LIST.NO_DATA.DESCRIPTION\")}
\r\n\r\n
\r\n \r\n
\r\n Success!
\r\n\r\n
\r\n {formattedPrice} has been transferred to your Stripe Connect account.
\r\n\r\n
\r\n \r\n
\r\n );\r\n}\r\n\r\nProducerSummaryPreviewTemplate.propTypes = {\r\n producerPreviewViewStore: PropTypes.object.isRequired,\r\n t: PropTypes.func,\r\n};\r\n\r\nexport default observer(ProducerSummaryPreviewTemplate);\r\n","import React from \"react\";\r\n\r\nconst ProducerTopTrendingEmptyStateTemplate = () => {\r\n return (\r\n Summary
\r\n\r\n \r\n
\r\n \r\n {summaryData && (\r\n
\r\n )}\r\n \r\n {producers.length === 1 && (\r\n \r\n \r\n )}\r\n
\r\n )}\r\n \r\n
\r\n \r\n
\r\n Producer
\r\n\r\n\r\n {summaryData.producerName}\r\n
\r\n\r\n
\r\n \r\n
\r\n Account Balance
\r\n\r\n
\r\n \r\n {currencyFormatter.format(\r\n summaryData.accountBalance ? summaryData.accountBalance : 0,\r\n {\r\n currency: \"USD\",\r\n }\r\n )}\r\n
\r\n\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default ProducerTopTrendingEmptyStateTemplate;\r\n","import React, { useCallback, useState } from \"react\";\r\nimport ContentLoader from \"react-content-loader\";\r\n\r\nconst ProducerRevenueLoaderTemplate = (props) => {\r\n const loaderHeight = 110;\r\n const [loaderWidth, setLoaderWidth] = useState(0);\r\n\r\n const ref = useCallback((node) => {\r\n if (node !== null) setLoaderWidth(node.getBoundingClientRect().width);\r\n }, []);\r\n\r\n return (\r\n No stats
\r\nNo content found.
\r\n\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default ProducerRevenueLoaderTemplate;\r\n","import React from \"react\";\r\nimport ContentLoader from \"react-content-loader\";\r\n\r\nconst ProducerStatsLoaderTemplate = (props) => {\r\n const { row = 10, loadMore, noButton, ...rest } = props;\r\n const screenwidth = window.innerWidth;\r\n const items = [];\r\n let loaderWidth;\r\n let loaderSml = false;\r\n\r\n if (screenwidth > 766) {\r\n loaderWidth = 768;\r\n } else {\r\n loaderWidth = screenwidth;\r\n }\r\n\r\n if (screenwidth < 543) {\r\n loaderSml = true;\r\n }\r\n\r\n let y = loadMore ? 30 : 2;\r\n let imgY = loadMore ? 16 : 3;\r\n\r\n for (let i = 0; i < row; i++) {\r\n let textWidth = Math.random() * 120 + 60;\r\n items.push(\r\n \r\n \r\n {items}\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default ProducerStatsLoaderTemplate;\r\n","import React, { useCallback, useState } from \"react\";\r\nimport ContentLoader from \"react-content-loader\";\r\n\r\nconst ProducerTotalLoaderTemplate = () => {\r\n const [loaderWidth, setLoaderWidth] = useState(0);\r\n\r\n const ref = useCallback((node) => {\r\n if (node !== null) setLoaderWidth(node.getBoundingClientRect().width);\r\n }, []);\r\n\r\n return (\r\n \r\n {disabledArrows ? null : (\r\n handleScrollAction(\"left\")}\r\n >\r\n \r\n \r\n )}\r\n\r\n {\r\n if (!tabsRef) return;\r\n setTabsRef(tabsRef);\r\n setDisabledArrows(tabsRef.scrollWidth <= tabsRef.clientWidth);\r\n }}\r\n >\r\n {options.map((option, index) => {\r\n const itemId = `${id}_${option.id}`;\r\n const isChecked = value === option.id;\r\n\r\n return (\r\n \r\n onChange(option.id)}\r\n tabIndex={0}\r\n className={mergeCss(\r\n \"c-segmented c-segmented--secondary c-segmented--secondary--lrg\",\r\n index === 0 ? \"c-segmented--first\" : \"\",\r\n index === options.length - 1 ? \"c-segmented--last\" : \"\",\r\n isChecked ? \"active\" : \"\"\r\n )}\r\n />\r\n\r\n \r\n \r\n );\r\n })}\r\n
\r\n\r\n {disabledArrows ? null : (\r\n \r\n
\r\n );\r\n}\r\n\r\nProducerRevenueTemplate.propTypes = {\r\n producerRevenueViewStore: PropTypes.object.isRequired,\r\n t: PropTypes.func,\r\n};\r\n\r\nconst Actions = observer(function Actions({ producerRevenueViewStore, t }) {\r\n const {\r\n completedOnboarding,\r\n isStripeAccountConnected,\r\n createStripeAccount,\r\n stripeAccountLink,\r\n isCreateStripeAccountButtonDisabled,\r\n loaderStore,\r\n } = producerRevenueViewStore;\r\n return (\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n {t(\"APPLICATION.PRODUCER.REVENUE.REPORTS_TITLE\")}\r\n
\r\n {producers && producers.length > 1 && (\r\n\r\n {\r\n selectProducer(value);\r\n }}\r\n />\r\n
\r\n )}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n );\r\n});\r\n\r\nexport default defaultTemplate(ProducerRevenueTemplate);\r\n","import React from \"react\";\r\nimport { PropTypes } from \"prop-types\";\r\nimport { ProducerPaymentReportSummary } from \"administration/producer/components\";\r\nimport { MrbRouterLink } from \"mrb/core/infrastructure/router\";\r\nimport { ProducerReportLayout, ProducerReport } from \"common/components/producer\";\r\nimport { defaultTemplate } from \"common/hoc\";\r\n\r\nfunction ProducerRevenueReportTemplate({ producerRevenueReportViewStore, t }) {\r\n return (\r\n Actions
\r\n\r\n \r\n
\r\n \r\n
\r\n )}\r\n \r\n {completedOnboarding && (\r\n \r\n Pay out balance\r\n \r\n )}\r\n {!completedOnboarding && !isStripeAccountConnected && (\r\n
\r\n \r\n
\r\n )}\r\n {!completedOnboarding && isStripeAccountConnected && (\r\n \r\n (window.location.href = stripeAccountLink)}\r\n className=\"c-btn c-btn--base c-btn--primary c-btn--full u-mar--bottom--xsml\"\r\n />\r\n
\r\n )}\r\n \r\n Please click button below to complete account creation\r\n
\r\n\r\n
\r\n \r\n );\r\n}\r\n\r\nProducerRevenueReportTemplate.propTypes = {\r\n producerRevenueReportViewStore: PropTypes.object.isRequired,\r\n t: PropTypes.func,\r\n};\r\n\r\nfunction BackButton({ producerId }) {\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Current Account Balance
\r\n\r\n {currencyFormatter.format(currentAccountBalance, {\r\n currency: \"USD\",\r\n })}\r\n
\r\n \r\n
\r\n New Account Balance
\r\n\r\n {currencyFormatter.format(newAccountBalance, {\r\n currency: \"USD\",\r\n })}\r\n
\r\n {getHeaderTitle()}
\r\n \r\n {producerTypeSlug !== producerTypes.podcasterSlug && (\r\n \r\n setSelectedTab(1)}\r\n className={mergeCss(\r\n \"c-tabs__item\",\r\n selectedTab.title === \"Dashboard\" && \"c-tabs__item--active\"\r\n )}\r\n routeName=\"master.application.producer.preview.dashboard\"\r\n >\r\n {t(\"APPLICATION.PRODUCER.PREVIEW.DASHBOARD_TITLE\")}\r\n \r\n setSelectedTab(2)}\r\n className={mergeCss(\r\n \"c-tabs__item\",\r\n selectedTab.title === \"Revenue\" && \"c-tabs__item--active\"\r\n )}\r\n routeName=\"master.application.producer.preview.revenue\"\r\n >\r\n {t(\"APPLICATION.PRODUCER.PREVIEW.REVENUE_TITLE\")}\r\n \r\n \r\n )}\r\n
\r\n\r\n {renderChildRoute(props)}\r\n \r\n {getHeaderTitle()}\r\n
\r\n \r\n {producerTypeSlug === producerTypes.podcasterSlug ? (\r\n
\r\n \r\n
\r\n ) : producerTypeSlug === producerTypes.artistSlug ? (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n ) : (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n )}\r\n \r\n
\r\n );\r\n});\r\n\r\nconst NakiTalesStats = observer(function NakiTalesStats({\r\n nakiTalesStatsInfiniteScrollStore,\r\n title,\r\n statsFilterOptions,\r\n nakiTalesFilterSelectedOptionValue,\r\n setNakiTalesFilterSelectedOptionValue,\r\n totalListeners,\r\n t,\r\n}) {\r\n const { gridStore } = nakiTalesStatsInfiniteScrollStore;\r\n const scrollParentRef = useRef(null);\r\n return (\r\n \r\n
\r\n\r\n \r\n
\r\n );\r\n});\r\n\r\nconst NakiNigunStats = observer(function NakiNigunStats({\r\n nakiNigunStatsInfiniteScrollStore,\r\n title,\r\n statsFilterOptions,\r\n nakiNigunFilterSelectedOptionValue,\r\n setNakiNigunFilterSelectedOptionValue,\r\n totalListeners,\r\n t,\r\n}) {\r\n const { gridStore } = nakiNigunStatsInfiniteScrollStore;\r\n const scrollParentRef = useRef(null);\r\n\r\n return (\r\n \r\n
\r\n {totalListeners != null ? (\r\n nakiTalesFilterSelectedOptionValue === 1 ? (\r\n {title}
\r\n\r\n
\r\n ) : (\r\n {t(\"APPLICATION.PRODUCER.DASHBOARD.TOTAL.STREAMS\")}
\r\n{numberFormatter.format(totalListeners)}
\r\n\r\n
\r\n )\r\n ) : (\r\n {t(\"APPLICATION.PRODUCER.DASHBOARD.TOTAL.LISTENERS\")}
\r\n{numberFormatter.format(totalListeners)}
\r\n\r\n
\r\n \r\n
\r\n )}\r\n />\r\n \r\n
\r\n \r\n {props.index + 1}.\r\n {props.item.title ? \r\n
\r\n {props.item.title}
: Unknown podcast}\r\n{numberFormatter.format(props.item.score)}
\r\n\r\n
\r\n );\r\n});\r\n\r\nexport default defaultTemplate(ProducerDashboardTemplate);\r\n","import { MrbBaseRouteStore } from \"mrb/core\";\r\nimport {\r\n NakiNigunAnalyticsService,\r\n PodcastAnalyticsService,\r\n ProducerReportService,\r\n ProducerUserAccountService,\r\n} from \"common/services\";\r\n\r\nclass ProducerRevenueRouteStore extends MrbBaseRouteStore {\r\n constructor(rootStore) {\r\n super(rootStore);\r\n\r\n this.service = rootStore.createApplicationService(ProducerReportService);\r\n this.producerUserAccountService = rootStore.createApplicationService(ProducerUserAccountService);\r\n this.podcastAnalyticsService = rootStore.createApplicationService(PodcastAnalyticsService);\r\n this.nakiNigunAnalyticsService = rootStore.createApplicationService(NakiNigunAnalyticsService);\r\n }\r\n\r\n async findProducerReports(params) {\r\n const response = await this.service.findProducerReports(params);\r\n return response.data;\r\n }\r\n\r\n async getProducerAccountSummary() {\r\n const response = await this.producerUserAccountService.getProducerAccountSummary();\r\n return response.data;\r\n }\r\n\r\n async getStripeConnectOnboardingStatus() {\r\n const response = await this.producerUserAccountService.getStripeConnectOnboardingStatus();\r\n return response.data;\r\n }\r\n\r\n async createStripeConnectLink(resource) {\r\n const response = await this.producerUserAccountService.createStripeConnectLink(resource);\r\n return response.data;\r\n }\r\n\r\n async getProducerAccountBalance(filter) {\r\n const response = await this.producerUserAccountService.getProducerAccountBalance(filter);\r\n return response.data;\r\n }\r\n\r\n async getProducerAccountRevenueTransaction(filter) {\r\n const response = await this.producerUserAccountService.getProducerAccountRevenueTransaction(filter);\r\n return response.data;\r\n }\r\n\r\n async getProducers() {\r\n const response = await this.producerUserAccountService.getProducers();\r\n return response.data;\r\n }\r\n}\r\n\r\nexport default ProducerRevenueRouteStore;\r\n","import { action, computed, makeObservable, observable, runInAction } from \"mobx\";\r\nimport { MrbBaseViewStore } from \"mrb/core\";\r\nimport { MrbTableViewStore } from \"mrb/components\";\r\nimport { mrbDefaultFormats } from \"mrb/common/formatting\";\r\nimport { dateFormatter } from \"mrb/common/formatting\";\r\nimport { applicationDefaults } from \"common/constants\";\r\nimport { ProducerPreviewReportPeriodCell, ProducerPreviewReportPlaybackTimeCell } from \"common/components/producer\";\r\nimport { numberFormatter } from \"common/utils\";\r\nimport { MrbQueryUtility } from \"mrb/core/filter\";\r\nimport { isNil } from \"lodash\";\r\nimport moment from \"moment\";\r\n\r\nclass ProducerRevenueViewStore extends MrbBaseViewStore {\r\n range = null;\r\n @observable.ref summaryData = null;\r\n @observable reportsGridStore = null;\r\n @observable revenueGridStore = null;\r\n @observable balanceGridStore = null;\r\n reportsQueryUtility = null;\r\n revenueQueryUtility = null;\r\n balanceQueryUtility = null;\r\n @observable producers = null;\r\n @observable selectedProducerId = null;\r\n @observable completedOnboarding = false;\r\n @observable.ref onboardingStatus = null;\r\n @observable stripeAccountLink;\r\n @observable isCreateStripeAccountButtonDisabled = false;\r\n\r\n producerId = null;\r\n\r\n @computed get isStripeAccountConnected() {\r\n if (this.summaryData) {\r\n return !isNil(this.summaryData.stripeAccountId);\r\n }\r\n return false;\r\n }\r\n\r\n constructor(rootStore, { routeStore }) {\r\n super(rootStore);\r\n makeObservable(this);\r\n this.routeStore = routeStore;\r\n\r\n this.producerId = this.rootStore.routerStore.routerState.queryParams.producerId;\r\n\r\n this.revenueQueryUtility = new MrbQueryUtility(\r\n this.rootStore,\r\n async (filter) => {\r\n this.revenueFetchResources(filter);\r\n },\r\n {\r\n orderBy: \"dateCreated\",\r\n orderDirection: \"desc\",\r\n ignoreQueryParams: true,\r\n disableUpdateQueryParams: true,\r\n }\r\n );\r\n\r\n this.balanceQueryUtility = new MrbQueryUtility(\r\n this.rootStore,\r\n async (filter) => {\r\n this.balanceFetchResources(filter);\r\n },\r\n {\r\n orderBy: \"dateCreated\",\r\n orderDirection: \"desc\",\r\n ignoreQueryParams: true,\r\n disableUpdateQueryParams: true,\r\n }\r\n );\r\n\r\n this.reportsQueryUtility = new MrbQueryUtility(\r\n this.rootStore,\r\n async (filter) => {\r\n this.reportsFetchResources(filter);\r\n },\r\n {\r\n orderBy: \"monthOfYear\",\r\n orderDirection: \"desc\",\r\n ignoreQueryParams: true,\r\n disableUpdateQueryParams: true,\r\n }\r\n );\r\n this.revenueFetchResources = this.revenueFetchResources.bind(this);\r\n this.balanceFetchResources = this.balanceFetchResources.bind(this);\r\n\r\n const from = moment.utc().subtract(1, \"year\").startOf(\"month\").format(applicationDefaults.formats.isoDate);\r\n const to = moment.utc().subtract(1, \"month\").startOf(\"month\").format(applicationDefaults.formats.isoDate);\r\n this.range = {\r\n from: from,\r\n to: to,\r\n };\r\n\r\n this.setReportsGridStore(\r\n new MrbTableViewStore(this.rootStore, this.reportsQueryUtility, {\r\n onRowClick: (node) => {\r\n const monthOfYear = dateFormatter.format(node.data.monthOfYear, {\r\n format: applicationDefaults.formats.isoDate,\r\n timeZone: \"utc\",\r\n });\r\n this.rootStore.routerStore.goTo(\r\n \"master.application.producer.report\",\r\n {\r\n id: this.selectedProducerId,\r\n },\r\n {\r\n monthOfYear: monthOfYear,\r\n }\r\n );\r\n },\r\n columns: [\r\n {\r\n key: \"monthOfYear\",\r\n title: \"Period\",\r\n sortable: true,\r\n cell: ProducerPreviewReportPeriodCell,\r\n },\r\n {\r\n key: \"totalProducerPlaybacks\",\r\n title: \"Playback Time\",\r\n sortable: true,\r\n cell: ProducerPreviewReportPlaybackTimeCell,\r\n },\r\n {\r\n key: \"totalProducerPlaybacks\",\r\n title: \"Playback Points\",\r\n format: (value) => numberFormatter.format(value),\r\n },\r\n {\r\n key: \"totalProducerPayment\",\r\n title: \"Revenue\",\r\n sortable: true,\r\n format: {\r\n type: mrbDefaultFormats.currency,\r\n currency: \"USD\",\r\n },\r\n },\r\n ],\r\n })\r\n );\r\n\r\n this.setRevenueGridStore(\r\n new MrbTableViewStore(this.rootStore, this.revenueQueryUtility, {\r\n columns: [\r\n {\r\n key: \"dateCreated\",\r\n title: \"Date\",\r\n sortable: true,\r\n format: (value) =>\r\n dateFormatter.format(value, {\r\n format: applicationDefaults.formats.dateTime,\r\n }),\r\n },\r\n {\r\n key: \"stripeTransactionId\",\r\n title: \"Stripe Transaction Id\",\r\n },\r\n {\r\n key: \"amount\",\r\n title: \"Amount\",\r\n sortable: true,\r\n format: {\r\n type: mrbDefaultFormats.currency,\r\n currency: \"USD\",\r\n },\r\n },\r\n ],\r\n })\r\n );\r\n\r\n this.setBalanceGridStore(\r\n new MrbTableViewStore(this.rootStore, this.balanceQueryUtility, {\r\n columns: [\r\n {\r\n key: \"dateCreated\",\r\n title: \"Date\",\r\n sortable: true,\r\n format: (value) =>\r\n dateFormatter.format(value, {\r\n format: applicationDefaults.formats.dateTime,\r\n }),\r\n },\r\n {\r\n key: \"notes\",\r\n title: \"Notes\",\r\n },\r\n {\r\n key: \"amount\",\r\n title: \"Amount\",\r\n sortable: true,\r\n format: {\r\n type: mrbDefaultFormats.currency,\r\n currency: \"USD\",\r\n },\r\n\r\n cellClass: (item) => {\r\n if (item.value > 0) {\r\n return \"u-type--color--success\";\r\n } else if (item.value < 0) {\r\n return \"u-type--color--warning\";\r\n }\r\n },\r\n },\r\n {\r\n key: \"producer.name\",\r\n title: \"Producer\",\r\n },\r\n ],\r\n })\r\n );\r\n }\r\n\r\n onFetchError(err) {\r\n this.rootStore.notificationStore.error(\r\n \"An unexpected error occurred while trying to load data. Please contact the support team.\",\r\n err\r\n );\r\n }\r\n\r\n async reportsFetchResources(filter) {\r\n this.reportsGridStore.suspend();\r\n try {\r\n filter.producerId = this.selectedProducerId;\r\n const response = await this.fetchReportsData(filter);\r\n runInAction(() => {\r\n this.reportsGridStore.setData(response);\r\n this.reportsGridStore.resume();\r\n });\r\n } catch (err) {\r\n this.reportsGridStore.resume();\r\n this.onFetchError(err);\r\n }\r\n }\r\n\r\n async revenueFetchResources(filter) {\r\n this.revenueGridStore.suspend();\r\n try {\r\n const response = await this.fetchRevenueData(filter);\r\n runInAction(() => {\r\n this.revenueGridStore.setData(response);\r\n this.revenueGridStore.resume();\r\n });\r\n } catch (err) {\r\n this.revenueGridStore.resume();\r\n this.onFetchError(err);\r\n }\r\n }\r\n\r\n async balanceFetchResources(filter) {\r\n this.balanceGridStore.suspend();\r\n try {\r\n const response = await this.fetchBalanceData(filter);\r\n runInAction(() => {\r\n this.balanceGridStore.setData(response);\r\n this.balanceGridStore.resume();\r\n });\r\n } catch (err) {\r\n this.balanceGridStore.resume();\r\n this.onFetchError(err);\r\n }\r\n }\r\n\r\n async fetchReportsData(filter) {\r\n try {\r\n return this.routeStore.findProducerReports(filter);\r\n } catch (error) {\r\n this.onFetchError(error);\r\n }\r\n }\r\n\r\n async fetchRevenueData(filter) {\r\n try {\r\n return await this.routeStore.getProducerAccountRevenueTransaction(filter);\r\n } catch (error) {\r\n this.onFetchError(error);\r\n }\r\n }\r\n\r\n async fetchBalanceData(filter) {\r\n try {\r\n return await this.routeStore.getProducerAccountBalance(filter);\r\n } catch (error) {\r\n this.onFetchError(error);\r\n }\r\n }\r\n\r\n async onInit() {\r\n await Promise.all([\r\n this.fetchProducers(),\r\n this.fetchAccountSummaryData(),\r\n this.revenueQueryUtility.initialize(),\r\n this.balanceQueryUtility.initialize(),\r\n ]);\r\n }\r\n\r\n @action.bound\r\n setStripeAccountOnboardingStatus(data) {\r\n this.onboardingStatus = data;\r\n this.setCompletedOnboarding(data.chargesEnabled && data.detailsSubmitted);\r\n }\r\n\r\n @action.bound\r\n setCompletedOnboarding(state) {\r\n this.completedOnboarding = state;\r\n }\r\n\r\n @action.bound\r\n setStripeAccountLink(data) {\r\n this.stripeAccountLink = data;\r\n }\r\n\r\n @action.bound\r\n setSummaryData(data) {\r\n this.summaryData = data;\r\n }\r\n\r\n @action.bound\r\n setReportsGridStore(reportsGridStore) {\r\n this.reportsGridStore = reportsGridStore;\r\n }\r\n\r\n @action.bound\r\n setRevenueGridStore(revenueGridStore) {\r\n this.revenueGridStore = revenueGridStore;\r\n }\r\n\r\n @action.bound\r\n setBalanceGridStore(balanceGridStore) {\r\n this.balanceGridStore = balanceGridStore;\r\n }\r\n\r\n @action.bound\r\n setProducers(producers) {\r\n this.producers = producers;\r\n }\r\n\r\n @action.bound\r\n setIsCreateStripeAccountButtonDisabled(state) {\r\n this.isCreateStripeAccountButtonDisabled = state;\r\n }\r\n\r\n @action.bound\r\n async selectProducer(producerId) {\r\n this.selectedProducerId = producerId;\r\n await this.reportsQueryUtility.initialize();\r\n }\r\n\r\n @action.bound\r\n async createStripeAccount() {\r\n try {\r\n this.setIsCreateStripeAccountButtonDisabled(true);\r\n const resource = { returnUrl: this.generateCurrentUrl(), refreshUrl: this.generateCurrentUrl() };\r\n const data = await this.routeStore.createStripeConnectLink(resource);\r\n this.setStripeAccountLink(data);\r\n\r\n await this.fetchAccountSummaryData();\r\n } catch (err) {\r\n this.rootStore.notificationStore.error(\r\n \"An unexpected error occurred while trying to load data. Please contact the support team.\",\r\n err\r\n );\r\n }\r\n }\r\n\r\n async fetchAccountSummaryData() {\r\n try {\r\n const data = await this.routeStore.getProducerAccountSummary();\r\n this.setSummaryData(data);\r\n if (this.isStripeAccountConnected) {\r\n await this.fetchStripeAccountOnboardingStatus();\r\n\r\n if (isNil(this.stripeAccountLink) && !this.completedOnboarding) {\r\n await this.fetchStripeAccountLink();\r\n }\r\n }\r\n } catch (err) {\r\n this.rootStore.notificationStore.error(\r\n \"An unexpected error occurred while trying to load data. Please contact the support team.\",\r\n err\r\n );\r\n }\r\n }\r\n\r\n async fetchStripeAccountOnboardingStatus() {\r\n try {\r\n const data = await this.routeStore.getStripeConnectOnboardingStatus();\r\n this.setStripeAccountOnboardingStatus(data);\r\n } catch (err) {\r\n this.rootStore.notificationStore.error(\r\n \"An unexpected error occurred while trying to load data. Please contact the support team.\",\r\n err\r\n );\r\n }\r\n }\r\n\r\n async fetchStripeAccountLink() {\r\n try {\r\n const resource = { returnUrl: this.generateCurrentUrl(), refreshUrl: this.generateCurrentUrl() };\r\n const data = await this.routeStore.createStripeConnectLink(resource);\r\n this.setStripeAccountLink(data);\r\n } catch (err) {\r\n this.rootStore.notificationStore.error(\r\n \"An unexpected error occurred while trying to load data. Please contact the support team.\",\r\n err\r\n );\r\n }\r\n }\r\n\r\n async fetchProducers() {\r\n try {\r\n const producers = await this.routeStore.getProducers();\r\n this.setProducers(producers);\r\n if (!isNil(this.producerId)) {\r\n this.selectProducer(this.producerId);\r\n } else {\r\n this.selectProducer(producers[0].id);\r\n }\r\n } catch (err) {\r\n this.rootStore.notificationStore.error(\r\n \"An unexpected error occurred while trying to load data. Please contact the support team.\",\r\n err\r\n );\r\n }\r\n }\r\n\r\n generateCurrentUrl() {\r\n return `${window.location.origin}/producer/revenue`;\r\n }\r\n}\r\n\r\nexport default ProducerRevenueViewStore;\r\n","import { MrbBaseRouteStore } from \"mrb/core\";\r\nimport { ProducerReportService } from \"common/services\";\r\n\r\nclass ProducerRevenueReportRouteStore extends MrbBaseRouteStore {\r\n constructor(rootStore) {\r\n super(rootStore);\r\n\r\n this.service = rootStore.createApplicationService(ProducerReportService);\r\n }\r\n\r\n async getProducerPaymentSummary(producerId, options) {\r\n const response = await this.service.getProducerPaymentSummary(producerId, options);\r\n return response.data;\r\n }\r\n\r\n async findProducerReportItems(filter) {\r\n const response = await this.service.findProducerReportItems(filter);\r\n return response.data;\r\n }\r\n\r\n async findProducerReportPayoutUserEvents(params) {\r\n const response = await this.service.findProducerReportPayoutUserEvents(params);\r\n return response.data;\r\n }\r\n}\r\n\r\nexport default ProducerRevenueReportRouteStore;\r\n","import { BaseProducerRevenueReportViewStore } from \"common/stores/producer\";\r\n\r\nclass ProducerRevenueReportViewStore extends BaseProducerRevenueReportViewStore {\r\n producerId = null;\r\n\r\n constructor(rootStore, { routeStore }) {\r\n super(rootStore, { maskUserNames: true });\r\n this.routeStore = routeStore;\r\n this.producerId = this.rootStore.routerStore.routerState.params.id;\r\n }\r\n\r\n find(params) {\r\n params.producerId = this.producerId;\r\n return this.routeStore.findProducerReportItems(params);\r\n }\r\n\r\n getSumaryData(params) {\r\n return this.routeStore.getProducerPaymentSummary(this.producerId, params);\r\n }\r\n}\r\n\r\nexport default ProducerRevenueReportViewStore;\r\n","import { MrbBaseRouteStore } from \"mrb/core\";\r\nimport { ProducerUserAccountService } from \"common/services\";\r\n\r\nclass ProducerRevenueTransferRouteStore extends MrbBaseRouteStore {\r\n constructor(rootStore) {\r\n super(rootStore);\r\n\r\n this.producerUserAccountService = rootStore.createApplicationService(ProducerUserAccountService);\r\n }\r\n\r\n async getProducerAccountSummary() {\r\n const response = await this.producerUserAccountService.getProducerAccountSummary();\r\n return response.data;\r\n }\r\n\r\n async processPayoutToBankAccount(accountId, resource) {\r\n const response = await this.producerUserAccountService.processPayoutToBankAccount(accountId, resource);\r\n return response.data;\r\n }\r\n}\r\n\r\nexport default ProducerRevenueTransferRouteStore;\r\n","import { LocalizedForm } from \"common/localization\";\r\n\r\nexport default class ProducerRevenueTransferForm extends LocalizedForm {\r\n constructor(hooks) {\r\n super(hooks);\r\n }\r\n\r\n setup() {\r\n return {\r\n fields: [\r\n {\r\n name: \"amount\",\r\n label: \"APPLICATION.PRODUCER.REVENUE_TRANSFER.FIELDS.AMOUNT_LABEL\",\r\n placeholder: \"APPLICATION.PRODUCER.REVENUE_TRANSFER.FIELDS.AMOUNT_PLACEHOLDER\",\r\n rules: \"required|numeric|min:1\",\r\n },\r\n ],\r\n };\r\n }\r\n}\r\n","import { computed, action, makeObservable, observable } from \"mobx\";\r\nimport { MrbBaseViewStore } from \"mrb/core\";\r\nimport { ProducerRevenueTransferForm } from \"application/producer/forms\";\r\nimport { MrbModalParams } from \"mrb/common/models\";\r\nimport { applicationErrorCodes } from \"common/constants\";\r\nimport { currencyFormatter } from \"mrb/common/formatting\";\r\nimport { isString } from \"lodash\";\r\n\r\nclass ProducerRevenueTransferViewStore extends MrbBaseViewStore {\r\n onSubmit = null;\r\n @observable.ref producerUserAccount = null;\r\n\r\n @computed get currentAccountBalance() {\r\n if (this.producerUserAccount) {\r\n return this.producerUserAccount.accountBalance;\r\n }\r\n return 0;\r\n }\r\n\r\n @computed get newAccountBalance() {\r\n let amount = this.form.$(\"amount\").value || 0;\r\n if (isString(amount)) {\r\n amount = parseFloat(amount);\r\n }\r\n\r\n return Math.max(this.currentAccountBalance - amount, 0);\r\n }\r\n\r\n constructor(rootStore, { routeStore }) {\r\n super(rootStore);\r\n makeObservable(this);\r\n this.routeStore = routeStore;\r\n\r\n this.form = new ProducerRevenueTransferForm({\r\n onSuccess: (form) => {\r\n const item = form.values();\r\n if (isString(item.amount)) {\r\n item.amount = parseFloat(item.amount);\r\n }\r\n return this.transferRevenue(item);\r\n },\r\n });\r\n\r\n this.transferRevenueSuccessModal = new MrbModalParams(null, {\r\n onClickGoToProducerAccount: this.goToProducerAccount,\r\n });\r\n }\r\n\r\n async onInit() {\r\n await this.getProducerUserAccount();\r\n }\r\n\r\n @action.bound\r\n async transferRevenue(resource) {\r\n const amount = resource.amount;\r\n if (amount > this.currentAccountBalance) {\r\n this.form.invalidate(\"Insufficient amount in your account.\");\r\n return;\r\n }\r\n\r\n const formattedPrice = currencyFormatter.format(resource.amount, {\r\n currency: \"USD\",\r\n });\r\n this.rootStore.confirmDialogStore.showConfirm({\r\n message: \"Transfer revenue?\",\r\n description: `${formattedPrice} will be transferred to your Stripe Connect account.`,\r\n yesLabel: `Transfer ${formattedPrice}`,\r\n onConfirm: async () => {\r\n try {\r\n await this.routeStore.processPayoutToBankAccount(\r\n this.producerUserAccount.producerUserAccountId,\r\n resource\r\n );\r\n\r\n this.transferRevenueSuccessModal.open({ amount: amount });\r\n } catch (err) {\r\n if (err.data.errorCode === applicationErrorCodes.producer.insufficientAccountBalance) {\r\n this.form.invalidate(\"Insufficient amount in your account.\");\r\n } else if (err.data.errorCode === applicationErrorCodes.producer.stripeConnectAccountNotExists) {\r\n this.form.invalidate(\"Stripe Connect account does not exists.\");\r\n } else if (err.data.errorCode === applicationErrorCodes.producer.producerUserAccountNotExists) {\r\n this.form.invalidate(\"Producer account does not exists.\");\r\n } else if (err.data.errorCode === applicationErrorCodes.producer.stripeConnectAccountNotEnabled) {\r\n this.form.invalidate(\"Stripe Connect account is not enabled.\");\r\n } else {\r\n this.rootStore.notificationStore.error(\r\n \"An unexpected error occurred while trying to transfer revenu. Please contact the support team.\",\r\n err\r\n );\r\n }\r\n }\r\n },\r\n });\r\n }\r\n\r\n @action.bound\r\n goToProducerAccount() {\r\n this.rootStore.routerStore.goTo(\"master.application.producer.preview.revenue\");\r\n }\r\n\r\n async getProducerUserAccount() {\r\n try {\r\n const account = await this.routeStore.getProducerAccountSummary();\r\n this.setProducerUserAccount(account);\r\n } catch (err) {\r\n this.rootStore.notificationStore.error(\r\n \"An unexpected error occurred while trying to load account. Please contact the support team.\",\r\n err\r\n );\r\n }\r\n }\r\n\r\n @action.bound\r\n setProducerUserAccount(account) {\r\n this.producerUserAccount = account;\r\n }\r\n}\r\n\r\nexport default ProducerRevenueTransferViewStore;\r\n","import { MrbBaseRouteStore } from \"mrb/core\";\r\nimport { NakiNigunAnalyticsService, PodcastAnalyticsService } from \"common/services\";\r\n\r\nclass ProducerDashboardRouteStore extends MrbBaseRouteStore {\r\n constructor(rootStore) {\r\n super(rootStore);\r\n\r\n this.podcastAnalyticsService = rootStore.createApplicationService(PodcastAnalyticsService);\r\n this.nakiNigunAnalyticsService = rootStore.createApplicationService(NakiNigunAnalyticsService);\r\n }\r\n\r\n async getTrendingPodcasts(filter) {\r\n const response = await this.podcastAnalyticsService.getTrendingPodcastsForProducer(filter);\r\n return response.data;\r\n }\r\n\r\n async getTrendingAlbums(filter) {\r\n const response = await this.nakiNigunAnalyticsService.getTrendingAlbumsForProducer(filter);\r\n return response.data;\r\n }\r\n\r\n async getTrendingAlbumsTotalStreams(filter) {\r\n const response = await this.nakiNigunAnalyticsService.getTrendingAlbumsTotalStreamsForProducer(filter);\r\n return response.data;\r\n }\r\n\r\n async getTrendingPodcastsTotalStreams(filter) {\r\n const response = await this.podcastAnalyticsService.getTrendingPodcastsTotalStreamsForProducer(filter);\r\n return response.data;\r\n }\r\n}\r\n\r\nexport default ProducerDashboardRouteStore;\r\n","import { action, makeObservable, observable, computed } from \"mobx\";\r\nimport { MrbSimpleSelectStore } from \"baasic-react-bootstrap/src\";\r\nimport moment from \"moment\";\r\nimport { find } from \"lodash\";\r\nimport \"moment-timezone\";\r\n\r\nconst timeRangeType = {\r\n today: \"today\",\r\n yesterday: \"yesterday\",\r\n last3Days: \"last-3-days\",\r\n thisWeek: \"this-week\",\r\n lastWeek: \"last-week\",\r\n thisMonth: \"this-month\",\r\n lastMonth: \"last-month\",\r\n custom: \"custom\",\r\n};\r\n\r\nconst defaultDropdownOptions = [\r\n { label: \"Custom\", value: timeRangeType.custom },\r\n { label: \"Today\", value: timeRangeType.today },\r\n { label: \"Yesterday\", value: timeRangeType.yesterday },\r\n { label: \"Last 3 days\", value: timeRangeType.last3Days },\r\n { label: \"This Week\", value: timeRangeType.thisWeek },\r\n { label: \"Last Week\", value: timeRangeType.lastWeek },\r\n { label: \"This Month\", value: timeRangeType.thisMonth },\r\n { label: \"Last Month\", value: timeRangeType.lastMonth },\r\n];\r\n\r\nconst timeZone = moment.tz.guess();\r\n\r\nclass ProducerDashboardTimeRangeViewStore {\r\n @observable filter = {\r\n to: moment().utc().tz(timeZone).endOf(\"week\").toISOString(),\r\n from: moment().utc().tz(timeZone).startOf(\"week\").toISOString(),\r\n previousCycleTo: moment().utc().tz(timeZone).subtract(1, \"week\").endOf(\"week\").toISOString(),\r\n previousCycleFrom: moment().utc().tz(timeZone).subtract(1, \"week\").startOf(\"week\").toISOString(),\r\n timeZone: timeZone,\r\n };\r\n\r\n maxDate = null;\r\n fetchTrendingAlbums = null;\r\n fetchTrendingPodcasts = null;\r\n\r\n @computed get isDateRangeDisabled() {\r\n return this.timeRangeSelectStore.value !== timeRangeType.custom;\r\n }\r\n\r\n @computed get minDate() {\r\n return moment(this.filter.from).toDate();\r\n }\r\n\r\n constructor(rootStore, { setDateFilter }) {\r\n this.rootStore = rootStore;\r\n makeObservable(this);\r\n this.maxDate = moment().startOf(\"day\").toDate();\r\n this.setDateFilter = setDateFilter;\r\n\r\n this.timeRangeSelectStore = new MrbSimpleSelectStore(\r\n {\r\n textKey: \"label\",\r\n valueKey: \"value\",\r\n actions: {\r\n onChange: async (newOption) => {\r\n this.timeRangeSelectStore.setSelectedItem(\r\n find(defaultDropdownOptions, (option) => option.value === newOption.value)\r\n );\r\n if (newOption.value !== timeRangeType.custom) {\r\n this.updateFilter(newOption.value);\r\n }\r\n },\r\n },\r\n },\r\n defaultDropdownOptions\r\n );\r\n this.timeRangeSelectStore.setSelectedItem(\r\n find(defaultDropdownOptions, (option) => option.value === timeRangeType.thisWeek)\r\n );\r\n }\r\n\r\n @action.bound\r\n updateFilter(value) {\r\n const now = moment().utc().tz(timeZone);\r\n switch (value) {\r\n case timeRangeType.today:\r\n this.filter = {\r\n to: moment(now).endOf(\"day\").toISOString(),\r\n from: moment(now).startOf(\"day\").toISOString(),\r\n previousCycleTo: moment(now).subtract(1, \"day\").endOf(\"day\").toISOString(),\r\n previousCycleFrom: moment(now).subtract(1, \"day\").startOf(\"day\").toISOString(),\r\n timeZone: timeZone,\r\n };\r\n break;\r\n\r\n case timeRangeType.yesterday:\r\n this.filter = {\r\n to: moment(now).subtract(1, \"day\").endOf(\"day\").toISOString(),\r\n from: moment(now).subtract(1, \"day\").startOf(\"day\").toISOString(),\r\n previousCycleTo: moment(now).subtract(2, \"day\").endOf(\"day\").toISOString(),\r\n previousCycleFrom: moment(now).subtract(2, \"day\").startOf(\"day\").toISOString(),\r\n timeZone: timeZone,\r\n };\r\n break;\r\n\r\n case timeRangeType.last3Days:\r\n this.filter = {\r\n to: moment(now).endOf(\"day\").toISOString(),\r\n from: moment(now).subtract(2, \"days\").startOf(\"day\").toISOString(),\r\n previousCycleTo: moment(now).subtract(2, \"days\").endOf(\"day\").toISOString(),\r\n previousCycleFrom: moment(now).subtract(4, \"days\").startOf(\"day\").toISOString(),\r\n timeZone: timeZone,\r\n };\r\n break;\r\n\r\n case timeRangeType.thisWeek:\r\n this.filter = {\r\n to: moment(now).endOf(\"week\").toISOString(),\r\n from: moment(now).startOf(\"week\").toISOString(),\r\n previousCycleTo: moment(now).subtract(1, \"week\").endOf(\"week\").toISOString(),\r\n previousCycleFrom: moment(now).subtract(1, \"week\").startOf(\"week\").toISOString(),\r\n timeZone: timeZone,\r\n };\r\n break;\r\n\r\n case timeRangeType.lastWeek:\r\n this.filter = {\r\n to: moment(now).subtract(1, \"week\").endOf(\"week\").toISOString(),\r\n from: moment(now).subtract(1, \"week\").startOf(\"week\").toISOString(),\r\n previousCycleTo: moment(now).subtract(2, \"weeks\").endOf(\"week\").toISOString(),\r\n previousCycleFrom: moment(now).subtract(2, \"weeks\").startOf(\"week\").toISOString(),\r\n timeZone: timeZone,\r\n };\r\n break;\r\n\r\n case timeRangeType.thisMonth:\r\n this.filter = {\r\n to: moment(now).endOf(\"month\").toISOString(),\r\n from: moment(now).startOf(\"month\").toISOString(),\r\n previousCycleTo: moment(now).subtract(1, \"month\").endOf(\"month\").toISOString(),\r\n previousCycleFrom: moment(now).subtract(1, \"month\").startOf(\"month\").toISOString(),\r\n timeZone: timeZone,\r\n };\r\n break;\r\n\r\n case timeRangeType.lastMonth:\r\n this.filter = {\r\n to: moment(now).subtract(1, \"month\").endOf(\"month\").toISOString(),\r\n from: moment(now).subtract(1, \"month\").startOf(\"month\").toISOString(),\r\n previousCycleTo: moment(now).subtract(2, \"months\").endOf(\"month\").toISOString(),\r\n previousCycleFrom: moment(now).subtract(2, \"months\").startOf(\"month\").toISOString(),\r\n timeZone: timeZone,\r\n };\r\n break;\r\n default:\r\n break;\r\n }\r\n this.setDateFilter(this.filter);\r\n }\r\n\r\n @action.bound\r\n setFromDate(value) {\r\n this.filter.from = moment.utc(value).tz(this.filter.timeZone).startOf(\"day\").toISOString();\r\n }\r\n\r\n @action.bound\r\n setToDate(value) {\r\n this.filter.to = moment.utc(value).tz(this.filter.timeZone).endOf(\"day\").toISOString();\r\n }\r\n\r\n @action.bound\r\n applyFilter() {\r\n this.setDateFilter(this.filter);\r\n }\r\n}\r\n\r\nexport default ProducerDashboardTimeRangeViewStore;\r\n","import { MrbBaseInfiniteScrollListViewStore } from \"baasic-react-bootstrap/src\";\r\nimport \"moment-timezone\";\r\nimport { MrbInfiniteScrollGridViewStore } from \"mrb/components/infinite-scroll-grid\";\r\n\r\nclass ProducerDashboardInfiniteScrollStore extends MrbBaseInfiniteScrollListViewStore {\r\n constructor(rootStore, { setPagingFilter, fetchData }) {\r\n super(rootStore, {\r\n queryConfig: {\r\n pageSize: 30,\r\n ignoreQueryParams: [\"page\", \"timeZone\", \"rpp\"],\r\n },\r\n });\r\n this.setPagingFilter = setPagingFilter;\r\n this.fetchData = fetchData;\r\n\r\n this.setGridStore(\r\n new MrbInfiniteScrollGridViewStore(this.rootStore, this.queryUtility, {\r\n generateKey: (item) => item.nakiNigunAlbum?.id || item.podcast?.id,\r\n mapper: (item) => {\r\n return {\r\n id: item.nakiNigunAlbum?.id || item.podcast.id,\r\n title: item.nakiNigunAlbum ? item.nakiNigunAlbum.title : item.podcast.title,\r\n isPremium:\r\n (item.nakiNigunAlbum && item.nakiNigunAlbum.isPremium) ||\r\n (item.podcast && item.podcast.isPremium),\r\n score: item.currentCycleScore,\r\n };\r\n },\r\n })\r\n );\r\n }\r\n\r\n find(params) {\r\n this.setPagingFilter({ page: params.pageNumber, rpp: params.pageSize });\r\n return this.fetchData();\r\n }\r\n}\r\n\r\nexport default ProducerDashboardInfiniteScrollStore;\r\n","import { action, makeObservable, observable, computed } from \"mobx\";\r\nimport { MrbBaseViewStore } from \"mrb/core\";\r\nimport { httpStatusCodes } from \"baasic-react-bootstrap/src\";\r\nimport moment from \"moment\";\r\nimport \"moment-timezone\";\r\nimport ProducerDashboardTimeRangeViewStore from \"./ProducerDashboardTimeRangeViewStore\";\r\nimport ProducerDashboardInfiniteScrollStore from \"./ProducerDashboardInfiniteScrollStore\";\r\n\r\nconst timeZone = moment.tz.guess();\r\n\r\nclass ProducerDashboardViewStore extends MrbBaseViewStore {\r\n @observable dateFilter = {\r\n to: moment().utc().tz(timeZone).endOf(\"week\").toISOString(),\r\n from: moment().utc().tz(timeZone).startOf(\"week\").toISOString(),\r\n previousCycleTo: moment().utc().tz(timeZone).subtract(1, \"week\").endOf(\"week\").toISOString(),\r\n previousCycleFrom: moment().utc().tz(timeZone).subtract(1, \"week\").startOf(\"week\").toISOString(),\r\n timeZone: timeZone,\r\n };\r\n @observable nakiNigunPagingFilter = { rpp: 30, page: 1 };\r\n @observable nakiTalesPagingFilter = { rpp: 30, page: 1 };\r\n\r\n statsFilterOptions = [\r\n { value: 1, label: \"Streams\" },\r\n { value: 2, label: \"Unique Listeners\" },\r\n ];\r\n\r\n @observable nakiNigunFilterSelectedOptionValue = 1;\r\n @observable nakiTalesFilterSelectedOptionValue = 1;\r\n\r\n @observable nakiNigunTotalListeners = null;\r\n @observable nakiTalesTotalListeners = null;\r\n\r\n @computed get producerTypeSlug() {\r\n return this.rootStore.userStore?.producerType?.slug;\r\n }\r\n\r\n @computed get nakiNigunFilter() {\r\n const uniqueListeners = this.nakiNigunFilterSelectedOptionValue === 2;\r\n return { ...this.dateFilter, ...this.nakiNigunPagingFilter, uniqueListeners };\r\n }\r\n\r\n @computed get nakiTalesFilter() {\r\n const uniqueListeners = this.nakiTalesFilterSelectedOptionValue === 2;\r\n return { ...this.dateFilter, ...this.nakiTalesPagingFilter, uniqueListeners };\r\n }\r\n\r\n constructor(rootStore, { routeStore }) {\r\n super(rootStore);\r\n makeObservable(this);\r\n this.routeStore = routeStore;\r\n\r\n this.producerDashboardTimeRangeViewStore = new ProducerDashboardTimeRangeViewStore(this.rootStore, {\r\n setDateFilter: (filter) => this.setDateFilter(filter),\r\n });\r\n\r\n this.nakiNigunStatsInfiniteScrollStore = new ProducerDashboardInfiniteScrollStore(this.rootStore, {\r\n setPagingFilter: (filter) => this.setNakiNigunPagingFilter(filter),\r\n fetchData: () => this.fetchTrendingAlbums(),\r\n });\r\n\r\n this.nakiTalesStatsInfiniteScrollStore = new ProducerDashboardInfiniteScrollStore(this.rootStore, {\r\n setPagingFilter: (filter) => this.setNakiTalesPagingFilter(filter),\r\n fetchData: () => this.fetchTrendingPodcasts(),\r\n });\r\n\r\n this.refreshData = this.refreshData.bind(this);\r\n }\r\n\r\n onFetchError(err) {\r\n this.rootStore.notificationStore.error(\r\n \"An unexpected error occurred while trying to load data. Please contact the support team.\",\r\n err\r\n );\r\n }\r\n\r\n async onInit() {\r\n await this.refreshData();\r\n }\r\n\r\n async refreshData() {\r\n await Promise.all([\r\n this.fetchTrendingAlbumsTotalStreams(),\r\n this.fetchTrendingPodcastsTotalStreams(),\r\n this.nakiNigunStatsInfiniteScrollStore.queryUtility.fetch(),\r\n this.nakiTalesStatsInfiniteScrollStore.queryUtility.fetch(),\r\n ]);\r\n }\r\n\r\n @action.bound\r\n async setDateFilter(filter) {\r\n this.dateFilter = filter;\r\n await this.refreshData();\r\n }\r\n\r\n @action.bound\r\n setNakiNigunPagingFilter(filter) {\r\n this.nakiNigunPagingFilter = filter;\r\n }\r\n @action.bound\r\n setNakiTalesPagingFilter(filter) {\r\n this.nakiTalesPagingFilter = filter;\r\n }\r\n\r\n @action.bound\r\n async setNakiTalesFilterSelectedOptionValue(value) {\r\n this.nakiTalesFilterSelectedOptionValue = value;\r\n await Promise.all([\r\n this.fetchTrendingPodcastsTotalStreams(),\r\n\r\n this.nakiTalesStatsInfiniteScrollStore.queryUtility.fetch(),\r\n ]);\r\n }\r\n\r\n @action.bound\r\n async setNakiNigunFilterSelectedOptionValue(value) {\r\n this.nakiNigunFilterSelectedOptionValue = value;\r\n await Promise.all([\r\n this.fetchTrendingAlbumsTotalStreams(),\r\n this.nakiNigunStatsInfiniteScrollStore.queryUtility.fetch(),\r\n ]);\r\n }\r\n\r\n @action.bound\r\n setNakiNigunTotalListeners(value) {\r\n this.nakiNigunTotalListeners = value;\r\n }\r\n\r\n @action.bound\r\n setNakiTalesTotalListeners(value) {\r\n this.nakiTalesTotalListeners = value;\r\n }\r\n\r\n async fetchTrendingPodcasts() {\r\n try {\r\n const data = await this.routeStore.getTrendingPodcasts(this.nakiTalesFilter);\r\n return data;\r\n } catch (error) {\r\n if (error && error.statusCode === httpStatusCodes.CanceledRequest) {\r\n return;\r\n }\r\n this.rootStore.notificationStore.error(\r\n \"An unexpected error occurred while trying to load podcasts.\",\r\n error\r\n );\r\n }\r\n }\r\n\r\n async fetchTrendingAlbums() {\r\n try {\r\n const data = await this.routeStore.getTrendingAlbums(this.nakiNigunFilter);\r\n return data;\r\n } catch (error) {\r\n if (error && error.statusCode === httpStatusCodes.CanceledRequest) {\r\n return;\r\n }\r\n this.rootStore.notificationStore.error(\"An unexpected error occurred while trying to load albums.\", error);\r\n }\r\n }\r\n\r\n async fetchTrendingAlbumsTotalStreams() {\r\n try {\r\n this.setNakiNigunTotalListeners(null);\r\n const value = await this.routeStore.getTrendingAlbumsTotalStreams(this.nakiNigunFilter);\r\n this.setNakiNigunTotalListeners(value);\r\n } catch (error) {\r\n if (error && error.statusCode === httpStatusCodes.CanceledRequest) {\r\n return;\r\n }\r\n this.setNakiNigunTotalListeners(null);\r\n this.rootStore.notificationStore.error(\r\n \"An unexpected error occurred while trying to load all Naki Nigun content listeners.\",\r\n error\r\n );\r\n }\r\n }\r\n\r\n async fetchTrendingPodcastsTotalStreams() {\r\n try {\r\n this.setNakiTalesTotalListeners(null);\r\n const value = await this.routeStore.getTrendingPodcastsTotalStreams(this.nakiTalesFilter);\r\n this.setNakiTalesTotalListeners(value);\r\n } catch (error) {\r\n if (error && error.statusCode === httpStatusCodes.CanceledRequest) {\r\n return;\r\n }\r\n this.setNakiTalesTotalListeners(null);\r\n this.rootStore.notificationStore.error(\r\n \"An unexpected error occurred while trying to load all Naki Tales content listeners.\",\r\n error\r\n );\r\n }\r\n }\r\n}\r\n\r\nexport default ProducerDashboardViewStore;\r\n","import { action, makeObservable, observable, computed } from \"mobx\";\r\nimport { MrbBaseViewStore } from \"mrb/core\";\r\nimport { find } from \"lodash\";\r\n\r\nclass ProducerPreviewViewStore extends MrbBaseViewStore {\r\n @observable selectedTab = { value: 1, title: \"Dashboard\" };\r\n\r\n tabs = [\r\n { value: 1, title: \"Dashboard\" },\r\n { value: 2, title: \"Revenue\" },\r\n ];\r\n\r\n @computed get producerTypeSlug() {\r\n return this.rootStore.userStore?.producerType?.slug;\r\n }\r\n\r\n constructor(rootStore, { routeStore }) {\r\n super(rootStore);\r\n this.routeStore = routeStore;\r\n makeObservable(this);\r\n }\r\n\r\n async onInit() {\r\n var currentRoute = this.rootStore.routerStore.getCurrentRoute();\r\n if (currentRoute.name === \"master.application.producer.preview.dashboard\" && this.selectedTab.value !== 1) {\r\n this.setSelectedTab(1);\r\n } else if (\r\n currentRoute.name === \"master.application.producer.preview.revenue\" &&\r\n this.selectedTab.value !== 2\r\n ) {\r\n this.setSelectedTab(2);\r\n }\r\n }\r\n\r\n onViewUpdate(prevProps, newProps) {\r\n var currentRoute = this.rootStore.routerStore.getCurrentRoute();\r\n if (this.selectedTab.value === 2 && currentRoute.name === \"master.application.producer.preview.dashboard\") {\r\n this.setSelectedTab(1);\r\n }\r\n }\r\n\r\n @action.bound\r\n setSelectedTab(value) {\r\n this.selectedTab = find(this.tabs, { value: value });\r\n }\r\n}\r\n\r\nexport default ProducerPreviewViewStore;\r\n","import { MrbBaseRouteStore } from \"mrb/core\";\r\n\r\nclass ProducerPreviewRouteStore extends MrbBaseRouteStore {\r\n constructor(rootStore) {\r\n super(rootStore);\r\n }\r\n}\r\n\r\nexport default ProducerPreviewRouteStore;\r\n","import React from \"react\";\r\nimport { ProducerRevenueTemplate } from \"themes/application/producer/pages\";\r\nimport { ProducerRevenueViewStore } from \"application/producer/stores\";\r\nimport { setCurrentView } from \"mrb/core\";\r\n\r\n@setCurrentView(\r\n (rootStore, componentProps) => new ProducerRevenueViewStore(rootStore, componentProps),\r\n \"producerRevenueViewStore\"\r\n)\r\nclass ProducerRevenue extends React.Component {\r\n render() {\r\n return \r\n
\r\n {totalListeners != null ? (\r\n nakiNigunFilterSelectedOptionValue === 1 ? (\r\n {title}
\r\n\r\n
\r\n ) : (\r\n {t(\"APPLICATION.PRODUCER.DASHBOARD.TOTAL.STREAMS\")}
\r\n{numberFormatter.format(totalListeners)}
\r\n\r\n
\r\n )\r\n ) : (\r\n {t(\"APPLICATION.PRODUCER.DASHBOARD.TOTAL.LISTENERS\")}
\r\n{numberFormatter.format(totalListeners)}
\r\n\r\n
\r\n \r\n
\r\n )}\r\n />\r\n \r\n
\r\n \r\n {props.index + 1}.\r\n {props.item.title ? \r\n
\r\n {props.item.title}
: Unknown album}\r\n{numberFormatter.format(props.item.score)}
\r\n\r\n
\r\n )}\r\n \r\n );\r\n}\r\n\r\nNakiNigunArtistAlbumTemplate.propTypes = {\r\n nakiNigunArtistAlbumViewStore: PropTypes.object.isRequired,\r\n};\r\n\r\nconst AlbumPanelHeader = observer(function AlbumPanelHeader({ nakiNigunArtistAlbumViewStore, isCollapsed, t }) {\r\n const {\r\n album,\r\n coverImageUrl,\r\n isTurnedOn,\r\n isDisabled,\r\n toggleAlbumStatus,\r\n contentAccessResult,\r\n rootStore: { userDeviceStore },\r\n } = nakiNigunArtistAlbumViewStore;\r\n\r\n return (\r\n \r\n
\r\n \r\n {t(\"APPLICATION.NAKI_NIGUN.ARTIST.ALBUM.FIELDS.GENRES\")}\r\n
\r\n {album.genres}\r\n\r\n
\r\n \r\n {t(\"APPLICATION.NAKI_NIGUN.ARTIST.ALBUM.FIELDS.YEAR\")}\r\n
\r\n {album.year}\r\n\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n\r\n {userDeviceStore.deviceCount > 0 && contentAccessResult.canAccessOnSelectedDevice && (\r\n \r\n
\r\n {!contentAccessResult.canAccessOnSelectedDevice && \r\n {album.title}\r\n
\r\n {album.isPremium && !contentAccessResult.canAccessPremium && (\r\n \r\n )}\r\n\r\n \r\n {\r\n toggleAlbumStatus(!isTurnedOn);\r\n }}\r\n icon=\"u-icon u-icon--lrg u-icon--premium--white\"\r\n classNameOverride={mergeCss(\r\n \"c-btn c-btn--xsml c-btn--status c-btn--rounded\",\r\n isTurnedOn ? \"c-btn--status--enabled\" : \"c-btn--status--disabled\"\r\n )}\r\n />\r\n \r\n
\r\n )}\r\n goTo(item)}>\r\n {item.name}\r\n
\r\n \r\n );\r\n});\r\n\r\nconst NakiNigunAlbumCell = observer(function NakiNigunAlbumCell({\r\n onCellClick,\r\n goTo,\r\n item,\r\n nakiNigunManageSelectedItemsViewStore,\r\n}) {\r\n const contentAccessResult = useCanAccessContent(nakiRadioContentType.nakiNigun, {\r\n isPremium: item.isPremium,\r\n unavailableInMobileApp: item.isVisibleInApp === false,\r\n unavailableInNakiTouch: item.isVisibleInEmbeddedApp === false,\r\n });\r\n const { isBulk, albumBulkEditViewStore } = nakiNigunManageSelectedItemsViewStore;\r\n\r\n function getBulkModeSelectIndicatorValue(\r\n item,\r\n canAccessAlbum,\r\n isAllSelected,\r\n selectedAlbumIds,\r\n deselectedAlbumIds\r\n ) {\r\n if (!canAccessAlbum) {\r\n return false;\r\n }\r\n const selectedIndex = findIndex(selectedAlbumIds, (selectedItemId) => selectedItemId === item.albumId);\r\n if (selectedIndex !== -1) {\r\n return true;\r\n }\r\n const deselectedIndex = findIndex(deselectedAlbumIds, (deselectedItemId) => deselectedItemId === item.albumId);\r\n if (deselectedIndex !== -1) {\r\n return false;\r\n }\r\n if (!isNil(isAllSelected)) {\r\n return isAllSelected;\r\n }\r\n return item.isTurnedOn;\r\n }\r\n\r\n function bulkSelectOrDeselect(item, canAccessAlbum, isAllSelected, selectedAlbumIds, deselectedAlbumIds) {\r\n const isSelected = getBulkModeSelectIndicatorValue(\r\n item,\r\n canAccessAlbum,\r\n isAllSelected,\r\n selectedAlbumIds,\r\n deselectedAlbumIds\r\n );\r\n if (isSelected) {\r\n albumBulkEditViewStore.deselectItem(item);\r\n } else {\r\n albumBulkEditViewStore.selectItem(item);\r\n }\r\n }\r\n\r\n return (\r\n goTo(item)}>\r\n {item.title}\r\n
\r\n \r\n );\r\n});\r\n\r\nexport default NakiNigunHomeGridCellTemplate;\r\n","import React from \"react\";\r\nimport { PropTypes } from \"prop-types\";\r\nimport { useCanAccessContent, nakiRadioContentType } from \"application/common/content-access\";\r\nimport { Image } from \"common/components\";\r\n\r\nfunction NakiNigunSearchResultGridCellTemplate({ item, onCellClick }) {\r\n const canAccessContent = useCanAccessContent(nakiRadioContentType.nakiNigun, {\r\n isPremium: item.isPremium,\r\n });\r\n return (\r\n onCellClick(item)} className=\"c-home__preview__item c-home__preview__item--search\">\r\n
\r\n );\r\n}\r\n\r\nNakiNigunSearchResultGridCellTemplate.propTypes = {\r\n item: PropTypes.object.isRequired,\r\n};\r\n\r\nexport default NakiNigunSearchResultGridCellTemplate;\r\n","import React from \"react\";\r\nimport { PropTypes } from \"prop-types\";\r\nimport { MrbRadioButtons } from \"mrb/components/radio\";\r\nimport { MrbQuerySearchInput } from \"mrb/components/input\";\r\nimport { HomeDeviceSelect } from \"application/home/components\";\r\nimport { mergeCss } from \"mrb/common/utils\";\r\nimport { observer } from \"mobx-react\";\r\n\r\nfunction NakiNigunHomePageHeaderTemplate({ nakiNigunHomeViewStore, t }) {\r\n const {\r\n anyDevice,\r\n contentTypeOptions,\r\n changeContentTypeFilter,\r\n queryUtility,\r\n inSearchMode,\r\n rootStore,\r\n deviceSelectStore,\r\n nakiNigunGenericSearchViewStore,\r\n } = nakiNigunHomeViewStore;\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n {item.title}{\" \"}\r\n {item.isPremium && !canAccessContent && (\r\n \r\n )}\r\n
\r\n {item.artistName && (\r\n {item.artistName}
\r\n )}\r\n \r\n \r\n
\r\n \r\n );\r\n}\r\n\r\nNakiNigunHomePageHeaderTemplate.propTypes = {\r\n nakiNigunHomeViewStore: PropTypes.object.isRequired,\r\n t: PropTypes.func,\r\n};\r\n\r\nexport default observer(NakiNigunHomePageHeaderTemplate);\r\n","import React from \"react\";\r\nimport { PropTypes } from \"prop-types\";\r\nimport { MrbContentLoader } from \"mrb/components/loader\";\r\nimport { HomeListLoader } from \"application/home/components\";\r\nimport { NakiNigunHomeGridCell } from \"application/naki-nigun/components\";\r\nimport { map } from \"lodash\";\r\nimport { observer } from \"mobx-react\";\r\n\r\nfunction NakiNigunHomeFeaturedTemplate({\r\n nakiNigunHomeFeaturedContentViewStore,\r\n nakiNigunManageSelectedItemsViewStore,\r\n t,\r\n}) {\r\n const {\r\n items,\r\n loaderStore,\r\n isFeaturedScrollable,\r\n scrollFeaturedLeft,\r\n scrollFeaturedRight,\r\n setFeaturedContainerRef,\r\n onClickCellItem,\r\n goTo,\r\n rootStore: { premiumSubscriptionStore },\r\n } = nakiNigunHomeFeaturedContentViewStore;\r\n const { isBulk } = nakiNigunManageSelectedItemsViewStore;\r\n\r\n return (\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n {anyDevice && !inSearchMode && (\r\n
\r\n {!inSearchMode && (\r\n \r\n
\r\n )}\r\n \r\n
\r\n )}\r\n \r\n
\r\n )}\r\n \r\n
\r\n\r\n \r\n {t(\"APPLICATION.NAKI_NIGUN.LIST.FEATURED\")}\r\n
\r\n {isFeaturedScrollable && (\r\n \r\n
\r\n )}\r\n \r\n
\r\n \r\n {map(items, (item) => (\r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n )}\r\n \r\n
\r\n )}\r\n\r\n \r\n
\r\n Search results
\r\n\r\n\r\n
\r\n \r\n
\r\n )}\r\n \r\n
\r\n\r\n \r\n {t(\"APPLICATION.NAKI_NIGUN.LIST.GENERIC_SEARCH.APPEARS_IN\")}\r\n
\r\n {isAppearsInScrollable && (\r\n \r\n
\r\n )}\r\n \r\n
\r\n \r\n {map(artists, (artist) => (\r\n
\r\n onClickArtist(item)}>\r\n
\r\n );\r\n}\r\n\r\nexport default observer(NakiNigunHomeSearchResultsTemplate);\r\n","import React from \"react\";\r\nimport { PropTypes } from \"prop-types\";\r\nimport { MrbButton } from \"baasic-react-bootstrap/src\";\r\nimport { observer } from \"mobx-react\";\r\n\r\nfunction NakiNigunManageSelectedItemsTemplate({ nakiNigunManageSelectedItemsViewStore, t }) {\r\n const { isBulk, changeIsBulk, selectAll, deselectAll, isUpdating, saveSelection } =\r\n nakiNigunManageSelectedItemsViewStore;\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n {item.name}
\r\n \r\n {isBulk ? (\r\n
\r\n );\r\n}\r\n\r\nNakiNigunManageSelectedItemsTemplate.propTypes = {\r\n nakiNigunManageSelectedItemsViewStore: PropTypes.object.isRequired,\r\n t: PropTypes.func.isRequired,\r\n};\r\n\r\nexport default observer(NakiNigunManageSelectedItemsTemplate);\r\n","import React from \"react\";\r\nimport { computed, observable, makeObservable, action, runInAction } from \"mobx\";\r\nimport { MrbBaseViewStore } from \"mrb/core\";\r\nimport { nakiRadioSystemTypes } from \"common/constants\";\r\nimport { find, isNil } from \"lodash\";\r\n\r\nclass NakiNigunArtistAlbumViewStore extends MrbBaseViewStore {\r\n @observable isCollapsed = false;\r\n @observable isUpdating = false;\r\n\r\n panelRef = React.createRef();\r\n albumId = null;\r\n\r\n @computed get coverImageUrl() {\r\n if (this.album && this.album.coverImageId) {\r\n return this.rootStore.coverImageFactory.createNakiNigunAlbumCoverImageUrl(this.album.coverImageId, 50, 50);\r\n }\r\n\r\n return null;\r\n }\r\n\r\n @computed get contentAccessResult() {\r\n return this.evaluateContentAccess(this.album);\r\n }\r\n\r\n @computed get isDisabled() {\r\n return this.nakiNigunArtistViewStore.updatingStatus || this.isUpdating;\r\n }\r\n\r\n @computed get album() {\r\n if (this.nakiNigunArtistViewStore.item && this.nakiNigunArtistViewStore.item.albums) {\r\n return find(this.nakiNigunArtistViewStore.item.albums, (album) => album.id === this.albumId);\r\n }\r\n return null;\r\n }\r\n\r\n @computed get albumStatusItem() {\r\n if (this.album) {\r\n return this.album.userDeviceAlbum;\r\n }\r\n return null;\r\n }\r\n\r\n @computed get isTurnedOn() {\r\n if (!isNil(this.albumStatusItem)) {\r\n return this.albumStatusItem.isTurnedOn;\r\n } else if (this.album) {\r\n const selectedDevice = this.rootStore.userDeviceStore.selectedDevice;\r\n if (selectedDevice && selectedDevice.device && selectedDevice.device.systemType) {\r\n switch (selectedDevice.device.systemType.abrv) {\r\n case nakiRadioSystemTypes.venice:\r\n return this.album.isTurnedOnByDefault;\r\n case nakiRadioSystemTypes.mobile:\r\n return this.album.isTurnedOnByDefaultInApp;\r\n case nakiRadioSystemTypes.mobile_embedded:\r\n return this.album.isTurnedOnByDefaultInEmbeddedApp;\r\n default:\r\n break;\r\n }\r\n }\r\n }\r\n return false;\r\n }\r\n\r\n constructor(rootStore, { albumId, nakiNigunArtistViewStore }) {\r\n super(rootStore);\r\n makeObservable(this);\r\n this.albumId = albumId;\r\n this.nakiNigunArtistViewStore = nakiNigunArtistViewStore;\r\n\r\n this.reaction(\r\n () => this.isCollapsed,\r\n (isCollapsed) => {\r\n if (isCollapsed && this.panelRef) {\r\n // We need to execute scroll function asynchronously in order to take effect.\r\n setTimeout(() => {\r\n this.panelRef.scrollIntoView({\r\n behavior: \"smooth\",\r\n block: \"center\",\r\n });\r\n });\r\n }\r\n }\r\n );\r\n }\r\n\r\n initialize() {\r\n const albumId = this.rootStore.routerStore.routerState.queryParams.albumId;\r\n if (albumId && this.album.id === albumId) {\r\n runInAction(() => {\r\n this.isCollapsed = true;\r\n });\r\n }\r\n return Promise.resolve();\r\n }\r\n\r\n @action.bound\r\n async toggleAlbumStatus(isTurnedOn) {\r\n this.isCollapsed = !this.isCollapsed;\r\n this.setIsUpdating(true);\r\n await this.nakiNigunArtistViewStore.updateAlbumTurnedOnStatus(this.albumId, isTurnedOn);\r\n this.setIsUpdating(false);\r\n }\r\n\r\n @action.bound\r\n setIsUpdating(isUpdating) {\r\n this.isUpdating = isUpdating;\r\n }\r\n\r\n @action.bound\r\n toggleCollapse() {\r\n this.isCollapsed = !this.isCollapsed;\r\n }\r\n\r\n setPanelRef = (ref) => {\r\n this.panelRef = ref;\r\n };\r\n\r\n evaluateContentAccess(item) {\r\n if (isNil(item)) {\r\n return false;\r\n }\r\n const artist = this.nakiNigunArtistViewStore.item;\r\n return this.rootStore.contentAccessValidator.canAccessNakiNigun({\r\n isPremium: item.isPremium,\r\n unavailableInMobileApp: artist.isVisibleInApp === false,\r\n unavailableInNakiTouch: artist.isVisibleInEmbeddedApp === false,\r\n });\r\n }\r\n}\r\n\r\nexport default NakiNigunArtistAlbumViewStore;\r\n","import { MrbBaseRouteStore } from \"mrb/core\";\r\nimport { NakiNigunUserContentService } from \"common/services\";\r\n\r\nclass NakiNigunArtistRouteStore extends MrbBaseRouteStore {\r\n constructor(rootStore) {\r\n super(rootStore);\r\n this.service = this.rootStore.createApplicationService(NakiNigunUserContentService);\r\n }\r\n\r\n async getNakiNigunArtistWthDeviceSettings(artistId, deviceId) {\r\n const response = await this.service.getNakiNigunArtistWthDeviceSettings(artistId, deviceId);\r\n return response.data;\r\n }\r\n\r\n async getNakiNigunArtist(artistId) {\r\n const response = await this.service.getNakiNigunArtist(artistId);\r\n return response.data;\r\n }\r\n\r\n async getUserDeviceAlbumsByArtist(deviceId, artistId) {\r\n const response = await this.service.getUserDeviceAlbumsByArtist(deviceId, artistId);\r\n return response.data;\r\n }\r\n}\r\n\r\nexport default NakiNigunArtistRouteStore;\r\n","import { action, computed, makeObservable, override, runInAction } from \"mobx\";\r\nimport { BaseHomePreviewViewStore } from \"application/home/stores\";\r\nimport { UpdateNakiNigunAlbumStatusOptions } from \"application/common/models\";\r\nimport { forEach, find, findIndex, isNil } from \"lodash\";\r\n\r\nclass NakiNigunArtistViewStore extends BaseHomePreviewViewStore {\r\n @computed get coverImageUrl() {\r\n if (this.item && this.item.coverImageId) {\r\n return this.rootStore.coverImageFactory.createNakiNigunArtistCoverImageUrl(\r\n this.item.coverImageId,\r\n 200,\r\n 200\r\n );\r\n }\r\n\r\n return null;\r\n }\r\n\r\n constructor(rootStore, { routeStore }) {\r\n const id = rootStore.routerStore.routerState.params.id;\r\n super(rootStore, {\r\n id: id,\r\n navigateBack: \"master.application.naki-nigun.list\",\r\n });\r\n makeObservable(this);\r\n this.routeStore = routeStore;\r\n }\r\n\r\n async get(id) {\r\n if (this.rootStore.userDeviceStore.selectedDevice) {\r\n return this.routeStore.getNakiNigunArtistWthDeviceSettings(\r\n id,\r\n this.rootStore.userDeviceStore.selectedDevice.id\r\n );\r\n }\r\n return this.routeStore.getNakiNigunArtist(id);\r\n }\r\n\r\n @action.bound\r\n async updateAlbumTurnedOnStatus(albumId, isTurnedOn) {\r\n try {\r\n this.statusToggleLoader.suspend();\r\n const albumIndex = findIndex(this.item.albums, (album) => album.id === albumId);\r\n const options = new UpdateNakiNigunAlbumStatusOptions(\r\n albumId,\r\n this.item.albums[albumIndex].title,\r\n this.item.albums[albumIndex].isPremium,\r\n this.item.albums[albumIndex].isVisibleInApp === false,\r\n this.item.albums[albumIndex].isVisibleInEmbeddedApp === false\r\n );\r\n await this.rootStore.userContentManagerStore.updateNakiNigunAlbumsStatus(options, isTurnedOn);\r\n runInAction(() => {\r\n if (this.item.albums[albumIndex].userDeviceAlbum) {\r\n this.item.albums[albumIndex].userDeviceAlbum.isTurnedOn = isTurnedOn;\r\n } else {\r\n this.item.albums[albumIndex].userDeviceAlbum = { isTurnedOn: isTurnedOn };\r\n }\r\n });\r\n } catch (err) {\r\n this.rootStore.notificationStore.error(\"Unexpected error occurred. Please contact the support team.\", err);\r\n } finally {\r\n this.statusToggleLoader.resume();\r\n }\r\n }\r\n\r\n getStatusItem(deviceId, resourceId) {\r\n return this.routeStore.getUserDeviceAlbumsByArtist(deviceId, resourceId);\r\n }\r\n\r\n @override\r\n setStatusItem(statusItem) {\r\n forEach(this.item.albums, (album) => {\r\n if (statusItem && statusItem.length > 0) {\r\n album.userDeviceAlbum = find(statusItem, (item) => item.albumId === album.id);\r\n } else {\r\n album.userDeviceAlbum = null;\r\n }\r\n });\r\n }\r\n\r\n evaluateContentAccess(item) {\r\n if (isNil(item)) {\r\n return false;\r\n }\r\n return this.rootStore.contentAccessValidator.canAccessNakiNigun({\r\n isPremium: item.isPremium,\r\n unavailableInMobileApp: item.isVisibleInApp === false,\r\n unavailableInNakiTouch: item.isVisibleInEmbeddedApp === false,\r\n });\r\n }\r\n}\r\n\r\nexport default NakiNigunArtistViewStore;\r\n","import { action, computed, observable, makeObservable, runInAction } from \"mobx\";\r\nimport { MrbBaseViewStore } from \"mrb/core/stores\";\r\nimport { sideScroll } from \"common/utils\";\r\nimport { UpdateNakiNigunAlbumStatusOptions, UpdateNakiNigunArtistStatusOptions } from \"application/common/models\";\r\nimport { map, find, findIndex, isNil, forEach } from \"lodash\";\r\nimport { NakiNigunArtist, NakiNigunAlbum, nakiNigunContentType } from \"application/naki-nigun/models\";\r\n\r\nclass NakiNigunHomeFeaturedContentViewStore extends MrbBaseViewStore {\r\n @observable.ref items = [];\r\n @observable isFeaturedScrollable = false;\r\n @observable.ref featuredContainerRef = null;\r\n\r\n @computed get selectedDevice() {\r\n return this.rootStore.userDeviceStore.selectedDevice;\r\n }\r\n\r\n constructor(rootStore, nakiNigunHomeViewStore) {\r\n super(rootStore);\r\n makeObservable(this);\r\n this.nakiNigunHomeViewStore = nakiNigunHomeViewStore;\r\n this.routeStore = nakiNigunHomeViewStore.routeStore;\r\n\r\n this.reaction(\r\n () => ({\r\n groups: this.items,\r\n container: this.featuredContainerRef,\r\n }),\r\n (context) => {\r\n if (context.container) {\r\n setTimeout(() => {\r\n runInAction(() => {\r\n this.isFeaturedScrollable = context.container.scrollWidth > context.container.clientWidth;\r\n });\r\n });\r\n }\r\n }\r\n );\r\n\r\n this.reaction(\r\n () => ({\r\n deviceId: this.selectedDevice && this.selectedDevice.id,\r\n contentType: this.nakiNigunHomeViewStore.queryUtility.filter.contentType,\r\n }),\r\n (context) => {\r\n this.fetchResources(context);\r\n }\r\n );\r\n }\r\n\r\n onInit() {\r\n let deviceId;\r\n if (this.selectedDevice) {\r\n deviceId = this.selectedDevice.id;\r\n }\r\n return this.fetchResources({ deviceId: deviceId });\r\n }\r\n\r\n getFeaturedArtists(deviceId) {\r\n return this.routeStore.getFeaturedArtists(deviceId);\r\n }\r\n\r\n getFeaturedAlbums(deviceId) {\r\n return this.routeStore.getFeaturedAlbums(deviceId);\r\n }\r\n\r\n async fetchResources({ deviceId }) {\r\n this.loaderStore.suspend();\r\n try {\r\n if (this.nakiNigunHomeViewStore.queryUtility.filter.contentType === nakiNigunContentType.artists) {\r\n const artists = await this.getFeaturedArtists(deviceId);\r\n this.setFeaturedArtists(artists);\r\n } else {\r\n const albums = await this.getFeaturedAlbums(deviceId);\r\n this.setFeaturedAlbums(albums);\r\n }\r\n } catch (err) {\r\n this.rootStore.notificationStore.error(\r\n \"Unexpected error occurred while trying to load featured content. Please contact the support team.\",\r\n err\r\n );\r\n } finally {\r\n this.loaderStore.resume();\r\n }\r\n }\r\n\r\n @action.bound\r\n onAlbumTurnedOnStatusChange(changedAlbum) {\r\n const album = find(this.items, (item) => item.albumId === changedAlbum.albumId);\r\n if (album && album.isTurnedOn !== changedAlbum.isTurnedOn) {\r\n album.isTurnedOn = changedAlbum.isTurnedOn;\r\n }\r\n }\r\n\r\n @action.bound\r\n onArtistTurnedOnStatusChange(changedArtist) {\r\n const artist = find(this.items, (item) => item.artistId === changedArtist.artistId);\r\n if (artist && artist.isTurnedOn !== changedArtist.isTurnedOn) {\r\n artist.isTurnedOn = changedArtist.isTurnedOn;\r\n }\r\n }\r\n\r\n goTo = (item) => {\r\n return this.nakiNigunHomeViewStore.goTo(item);\r\n };\r\n\r\n onClickCellItem = async (item) => {\r\n const contentAccessResult = this.rootStore.contentAccessValidator.canAccessNakiNigun({\r\n isPremium: item.isPremium,\r\n unavailableInMobileApp: item.isVisibleInApp === false,\r\n });\r\n if (contentAccessResult.canAccess) {\r\n if (item instanceof NakiNigunArtist) {\r\n await this.toggleFeaturedArtistTurnedOn(item, this.selectedDevice.id);\r\n } else if (item instanceof NakiNigunAlbum) {\r\n await this.toggleFeaturedAlbumTurnedOn(item, this.selectedDevice.id);\r\n }\r\n }\r\n };\r\n\r\n async toggleFeaturedAlbumTurnedOn(item, deviceId) {\r\n if (!item.isUpdating) {\r\n try {\r\n item.isUpdating = true;\r\n this.rootStore.mainLoaderStore.suspend();\r\n const newValue = !item.isTurnedOn;\r\n const options = new UpdateNakiNigunAlbumStatusOptions(\r\n item.albumId,\r\n item.title,\r\n item.isPremium,\r\n item.isVisibleInApp === false\r\n );\r\n await this.rootStore.userContentManagerStore.updateNakiNigunAlbumsStatus(options, newValue);\r\n runInAction(() => {\r\n item.isTurnedOn = newValue;\r\n this.nakiNigunHomeViewStore.onFeaturedAlbumTurnedOnStatusChange(item);\r\n });\r\n } catch (err) {\r\n this.rootStore.notificationStore.error(\r\n \"Unexpected error occurred. Please contact the support team.\",\r\n err\r\n );\r\n } finally {\r\n delete item.isUpdating;\r\n this.rootStore.mainLoaderStore.resume();\r\n }\r\n }\r\n }\r\n\r\n async toggleFeaturedArtistTurnedOn(item, deviceId) {\r\n if (!item.isUpdating) {\r\n try {\r\n item.isUpdating = true;\r\n this.rootStore.mainLoaderStore.suspend();\r\n const newValue = !item.isTurnedOn;\r\n const options = new UpdateNakiNigunArtistStatusOptions(\r\n item.artistId,\r\n item.name,\r\n item.isPremium,\r\n item.isVisibleInApp === false\r\n );\r\n await this.rootStore.userContentManagerStore.updateNakiNigunAlbumsStatusByArtist(options, newValue);\r\n runInAction(() => {\r\n item.isTurnedOn = newValue;\r\n this.nakiNigunHomeViewStore.onFeaturedArtistTurnedOnStatusChange(item);\r\n });\r\n } catch (err) {\r\n this.rootStore.notificationStore.error(\r\n \"Unexpected error occurred. Please contact the support team.\",\r\n err\r\n );\r\n } finally {\r\n delete item.isUpdating;\r\n this.rootStore.mainLoaderStore.resume();\r\n }\r\n }\r\n }\r\n\r\n @action.bound\r\n onFeaturedArtistBulkEditSuccess(artistsBulkEdit) {\r\n forEach(this.items, (artist) => {\r\n const contentAccessResult = this.rootStore.contentAccessValidator.canAccessNakiNigun({\r\n isPremium: artist.isPremium,\r\n unavailableInMobileApp: artist.isVisibleInApp === false,\r\n });\r\n if (contentAccessResult.canAccess) {\r\n const selectedIndex = findIndex(\r\n artistsBulkEdit.selectedIds,\r\n (selectedId) => selectedId === artist.artistId\r\n );\r\n if (selectedIndex !== -1) {\r\n artist.isTurnedOn = true;\r\n return;\r\n }\r\n const deselectedIndex = findIndex(\r\n artistsBulkEdit.deselectedIds,\r\n (deselectedId) => deselectedId === artist.artistId\r\n );\r\n if (deselectedIndex !== -1) {\r\n artist.isTurnedOn = false;\r\n return;\r\n }\r\n if (!isNil(artistsBulkEdit.isAllSelected)) {\r\n artist.isTurnedOn = artistsBulkEdit.isAllSelected;\r\n }\r\n }\r\n });\r\n }\r\n\r\n @action.bound\r\n onFeaturedAlbumBulkEditSuccess(albumsBulkEdit) {\r\n forEach(this.items, (album) => {\r\n const contentAccessResult = this.rootStore.contentAccessValidator.canAccessNakiNigun({\r\n isPremium: album.isPremium,\r\n unavailableInMobileApp: album.isVisibleInApp === false,\r\n });\r\n if (contentAccessResult.canAccess) {\r\n const selectedIndex = findIndex(\r\n albumsBulkEdit.selectedIds,\r\n (selectedId) => selectedId === album.albumId\r\n );\r\n if (selectedIndex !== -1) {\r\n album.isTurnedOn = true;\r\n return;\r\n }\r\n\r\n const deselectedIndex = findIndex(\r\n albumsBulkEdit.deselectedIds,\r\n (deselectedId) => deselectedId === album.albumId\r\n );\r\n if (deselectedIndex !== -1) {\r\n album.isTurnedOn = false;\r\n return;\r\n }\r\n\r\n if (!isNil(albumsBulkEdit.isAllSelected)) {\r\n album.isTurnedOn = albumsBulkEdit.isAllSelected;\r\n }\r\n }\r\n });\r\n }\r\n\r\n @action.bound\r\n resetItems() {\r\n this.items = [...this.items];\r\n }\r\n\r\n @action.bound\r\n setFeaturedArtists(items) {\r\n this.items = map(items, (item) => {\r\n return new NakiNigunArtist({\r\n ...item,\r\n coverImageUrl: this.nakiNigunHomeViewStore.createArtistCoverImageUrl(item),\r\n });\r\n });\r\n }\r\n\r\n @action.bound\r\n setFeaturedAlbums(items) {\r\n this.items = map(items, (item) => {\r\n return new NakiNigunAlbum({\r\n ...item,\r\n coverImageUrl: this.nakiNigunHomeViewStore.createAlbumCoverImageUrl(item),\r\n });\r\n });\r\n }\r\n\r\n @action.bound\r\n setFeaturedContainerRef(ref) {\r\n this.featuredContainerRef = ref;\r\n }\r\n\r\n @action.bound\r\n scrollFeaturedLeft() {\r\n sideScroll(this.featuredContainerRef, \"left\", 20, 400, 20);\r\n }\r\n\r\n @action.bound\r\n scrollFeaturedRight() {\r\n sideScroll(this.featuredContainerRef, \"right\", 20, 400, 20);\r\n }\r\n}\r\n\r\nexport default NakiNigunHomeFeaturedContentViewStore;\r\n","import { MrbBaseRouteStore } from \"mrb/core\";\r\nimport { NakiNigunUserContentService } from \"common/services\";\r\n\r\nclass NakiNigunHomeRouteStore extends MrbBaseRouteStore {\r\n constructor(rootStore) {\r\n super(rootStore);\r\n this.service = this.rootStore.createApplicationService(NakiNigunUserContentService);\r\n }\r\n\r\n async findArtists(params) {\r\n const response = await this.service.findArtists(params);\r\n return response.data;\r\n }\r\n\r\n async findAlbums(params) {\r\n const response = await this.service.findAlbums(params);\r\n return response.data;\r\n }\r\n\r\n async genericSearch(params, abortController) {\r\n const response = await this.service.genericSearch(params, abortController);\r\n return response.data;\r\n }\r\n\r\n async getFeaturedArtists(deviceId) {\r\n const response = await this.service.getFeaturedArtists(deviceId);\r\n return response.data;\r\n }\r\n\r\n async getFeaturedAlbums(deviceId) {\r\n const response = await this.service.getFeaturedAlbums(deviceId);\r\n return response.data;\r\n }\r\n}\r\n\r\nexport default NakiNigunHomeRouteStore;\r\n","import { observable, makeObservable } from \"mobx\";\r\nimport { MrbFilterParameters } from \"mrb/core/filter\";\r\nimport { nakiNigunContentType } from \"application/naki-nigun/models\";\r\n\r\nclass NakiNigunHomeContentFilter extends MrbFilterParameters {\r\n @observable contentType;\r\n\r\n constructor() {\r\n super();\r\n makeObservable(this);\r\n this.reset();\r\n }\r\n\r\n reset() {\r\n super.reset();\r\n this.contentType = nakiNigunContentType.albums;\r\n }\r\n}\r\n\r\nexport default NakiNigunHomeContentFilter;\r\n","import { action, computed, makeObservable, runInAction } from \"mobx\";\r\nimport { MrbBaseListViewStore } from \"mrb/core\";\r\nimport { MrbInfiniteScrollGridViewStore } from \"mrb/components/infinite-scroll-grid\";\r\nimport { MrbModalParams } from \"mrb/common/models\";\r\nimport { MrbSimpleSelectStore, MrbQuerySimpleSelectStore } from \"mrb/components/select\";\r\nimport {\r\n NakiNigunGenericSearchViewStore,\r\n NakiNigunManageSelectedItemsViewStore,\r\n NakiNigunHomeFeaturedContentViewStore,\r\n} from \"application/naki-nigun/stores\";\r\nimport { NakiNigunArtist, NakiNigunAlbum, nakiNigunContentType } from \"application/naki-nigun/models\";\r\nimport { UpdateNakiNigunAlbumStatusOptions, UpdateNakiNigunArtistStatusOptions } from \"application/common/models\";\r\nimport { NakiNigunHomeContentFilter } from \"application/naki-nigun/filters\";\r\nimport { calculateNumberOfColumns, calculateNumberOfRows } from \"common/utils\";\r\nimport { isNil, forEach, findIndex, find } from \"lodash\";\r\n\r\nclass NakiNigunHomeViewStore extends MrbBaseListViewStore {\r\n @computed get selectedDevice() {\r\n return this.rootStore.userDeviceStore.selectedDevice;\r\n }\r\n\r\n @computed get inSearchMode() {\r\n return this.nakiNigunGenericSearchViewStore.showSearchView;\r\n }\r\n\r\n @computed get anyDevice() {\r\n return this.rootStore.userDeviceStore.devices.length > 0;\r\n }\r\n\r\n @computed get nakiNigunContentTypeMode() {\r\n return this.queryUtility.filter.contentType;\r\n }\r\n\r\n contentTypeOptions = [\r\n {\r\n label: \"APPLICATION.NAKI_NIGUN.LIST.FILTER.ARTISTS\",\r\n value: nakiNigunContentType.artists,\r\n },\r\n {\r\n label: \"APPLICATION.NAKI_NIGUN.LIST.FILTER.ALBUMS\",\r\n value: nakiNigunContentType.albums,\r\n },\r\n ];\r\n\r\n artistOrderOptions = [\r\n {\r\n label: \"APPLICATION.NAKI_NIGUN.LIST.ORDER.ALPHABETICALY_OPTION\",\r\n value: \"name\",\r\n },\r\n {\r\n label: \"APPLICATION.NAKI_NIGUN.LIST.ORDER.RECENTLY_ADDED_OPTION\",\r\n value: \"dateCreated\",\r\n },\r\n ];\r\n\r\n albumOrderOptions = [\r\n {\r\n label: \"APPLICATION.NAKI_NIGUN.LIST.ORDER.ALPHABETICALY_OPTION\",\r\n value: \"title\",\r\n },\r\n {\r\n label: \"APPLICATION.NAKI_NIGUN.LIST.ORDER.RECENTLY_ADDED_OPTION\",\r\n value: \"dateCreated\",\r\n },\r\n ];\r\n\r\n @computed get orderOptions() {\r\n if (this.nakiNigunContentTypeMode === nakiNigunContentType.artists) {\r\n return this.artistOrderOptions;\r\n }\r\n return this.albumOrderOptions;\r\n }\r\n\r\n constructor(rootStore, { routeStore }) {\r\n const pageSize = calculateNumberOfColumns(window.innerWidth) * calculateNumberOfRows(window.innerWidth);\r\n super(rootStore, {\r\n queryConfig: {\r\n filter: new NakiNigunHomeContentFilter(),\r\n orderBy: \"name\",\r\n orderDirection: \"asc\",\r\n pageSize: pageSize,\r\n queryParamMap: {\r\n page: {\r\n toQuery: () => 1,\r\n },\r\n },\r\n },\r\n });\r\n makeObservable(this);\r\n this.routeStore = routeStore;\r\n this.nakiNigunGenericSearchViewStore = new NakiNigunGenericSearchViewStore(this.rootStore, this);\r\n this.nakiNigunManageSelectedItemsViewStore = new NakiNigunManageSelectedItemsViewStore(this.rootStore, this);\r\n this.nakiNigunHomeFeaturedContentViewStore = new NakiNigunHomeFeaturedContentViewStore(this.rootStore, this);\r\n this.connectDeviceModal = new MrbModalParams(\r\n {\r\n onClose: () => this.rootStore.userStore.disableConnectDeviceMessage(),\r\n },\r\n {\r\n goToConnectDevice: this.goToConnectDevice,\r\n }\r\n );\r\n\r\n this.setGridStore(\r\n new MrbInfiniteScrollGridViewStore(this.rootStore, this.queryUtility, {\r\n onCellClick: (item) => this.onClickCellItem(item),\r\n generateKey: (item) => item.albumId || item.artistId,\r\n mapper: (item) => {\r\n if (item.albumId) {\r\n return new NakiNigunAlbum({\r\n ...item,\r\n coverImageUrl: this.createAlbumCoverImageUrl(item),\r\n });\r\n } else {\r\n return new NakiNigunArtist({\r\n ...item,\r\n coverImageUrl: this.createArtistCoverImageUrl(item),\r\n });\r\n }\r\n },\r\n })\r\n );\r\n\r\n this.orderBySelectStore = new MrbQuerySimpleSelectStore(\r\n {\r\n textKey: \"label\",\r\n valueKey: \"value\",\r\n actions: {\r\n onChange: (selectedOrder) => {\r\n if (selectedOrder.value === \"title\" || selectedOrder.value === \"name\") {\r\n this.queryUtility.filter.orderDirection = \"asc\";\r\n } else {\r\n this.queryUtility.filter.orderDirection = \"desc\";\r\n }\r\n },\r\n },\r\n },\r\n this.queryUtility,\r\n \"orderBy\",\r\n this.orderOptions\r\n );\r\n\r\n this.deviceSelectStore = new MrbSimpleSelectStore(\r\n {\r\n textKey: \"deviceName\",\r\n valueKey: \"id\",\r\n actions: {\r\n onChange: (option) => {\r\n this.rootStore.userDeviceStore.setSelectedDevice(option.item);\r\n },\r\n },\r\n },\r\n this.rootStore.userDeviceStore.devices\r\n );\r\n this.deviceSelectStore.setSelectedItem(this.selectedDevice);\r\n\r\n this.reaction(\r\n () => this.selectedDevice,\r\n () => {\r\n if (!this.inSearchMode) {\r\n this.queryUtility.fetch();\r\n }\r\n }\r\n );\r\n\r\n this.reaction(\r\n () => this.inSearchMode,\r\n (inSearchMode) => {\r\n if (!inSearchMode) {\r\n this.queryUtility.fetch();\r\n }\r\n }\r\n );\r\n }\r\n\r\n onInit() {\r\n if (!this.anyDevice && this.rootStore.userStore.isConnectDeviceMessageVisible) {\r\n this.connectDeviceModal.open();\r\n }\r\n return Promise.all([this.nakiNigunHomeFeaturedContentViewStore.onInit(), this.queryUtility.initialize()]);\r\n }\r\n\r\n findArtists(params) {\r\n if (this.selectedDevice) {\r\n params.deviceId = this.selectedDevice.id;\r\n }\r\n return this.routeStore.findArtists({\r\n ...params,\r\n orderBy: params.orderBy === \"title\" ? \"name\" : params.orderBy,\r\n });\r\n }\r\n\r\n findAlbums(params) {\r\n if (this.selectedDevice) {\r\n params.deviceId = this.selectedDevice.id;\r\n }\r\n return this.routeStore.findAlbums({\r\n ...params,\r\n orderBy: params.orderBy === \"name\" ? \"title\" : params.orderBy,\r\n });\r\n }\r\n\r\n async fetchResources(filter) {\r\n // Display grid (Skeleton loader) only during the first page load, and in other cases, during loading more data on scroll event,\r\n // display only top bar loader (mainLoaderStore)\r\n const isFirstPageLoad = filter.pageNumber === 1;\r\n if (isFirstPageLoad) {\r\n this.gridStore.suspend();\r\n } else {\r\n this.rootStore.mainLoaderStore.suspend();\r\n }\r\n try {\r\n let response;\r\n if (filter.contentType === nakiNigunContentType.artists) {\r\n response = await this.findArtists(filter);\r\n } else {\r\n response = await this.findAlbums(filter);\r\n }\r\n runInAction(() => {\r\n this.gridStore.setData(response);\r\n if (isFirstPageLoad) {\r\n this.gridStore.resume();\r\n } else {\r\n this.rootStore.mainLoaderStore.resume();\r\n }\r\n });\r\n } catch (err) {\r\n if (isFirstPageLoad) {\r\n this.gridStore.resume();\r\n } else {\r\n this.rootStore.mainLoaderStore.resume();\r\n }\r\n this.onFetchError(err);\r\n }\r\n }\r\n\r\n @action.bound\r\n onAlbumBulkEditSuccess(albumsBulkEdit) {\r\n forEach(this.gridStore.data, (album) => {\r\n const contentAccessResult = this.rootStore.contentAccessValidator.canAccessNakiNigun({\r\n isPremium: album.isPremium,\r\n unavailableInMobileApp: album.isVisibleInApp === false,\r\n unavailableInNakiTouch: album.isVisibleInEmbeddedApp === false,\r\n });\r\n if (contentAccessResult.canAccess) {\r\n const selectedIndex = findIndex(\r\n albumsBulkEdit.selectedIds,\r\n (selectedId) => selectedId === album.albumId\r\n );\r\n if (selectedIndex !== -1) {\r\n album.isTurnedOn = true;\r\n return;\r\n }\r\n\r\n const deselectedIndex = findIndex(\r\n albumsBulkEdit.deselectedIds,\r\n (deselectedId) => deselectedId === album.albumId\r\n );\r\n if (deselectedIndex !== -1) {\r\n album.isTurnedOn = false;\r\n return;\r\n }\r\n\r\n if (!isNil(albumsBulkEdit.isAllSelected)) {\r\n album.isTurnedOn = albumsBulkEdit.isAllSelected;\r\n }\r\n }\r\n });\r\n this.nakiNigunHomeFeaturedContentViewStore.onFeaturedAlbumBulkEditSuccess(albumsBulkEdit);\r\n }\r\n\r\n @action.bound\r\n onArtistBulkEditSuccess(artistsBulkEdit) {\r\n forEach(this.gridStore.data, (artist) => {\r\n const contentAccessResult = this.rootStore.contentAccessValidator.canAccessNakiNigun({\r\n isPremium: artist.isPremium,\r\n unavailableInMobileApp: artist.isVisibleInApp === false,\r\n unavailableInNakiTouch: artist.isVisibleInEmbeddedApp === false,\r\n });\r\n if (contentAccessResult.canAccess) {\r\n const selectedIndex = findIndex(\r\n artistsBulkEdit.selectedIds,\r\n (selectedId) => selectedId === artist.artistId\r\n );\r\n if (selectedIndex !== -1) {\r\n artist.isTurnedOn = true;\r\n return;\r\n }\r\n const deselectedIndex = findIndex(\r\n artistsBulkEdit.deselectedIds,\r\n (deselectedId) => deselectedId === artist.artistId\r\n );\r\n if (deselectedIndex !== -1) {\r\n artist.isTurnedOn = false;\r\n return;\r\n }\r\n if (!isNil(artistsBulkEdit.isAllSelected)) {\r\n artist.isTurnedOn = artistsBulkEdit.isAllSelected;\r\n }\r\n }\r\n });\r\n this.nakiNigunHomeFeaturedContentViewStore.onFeaturedArtistBulkEditSuccess(artistsBulkEdit);\r\n }\r\n\r\n async toggleAlbumTurnedOn(item, deviceId) {\r\n if (!item.isUpdating) {\r\n try {\r\n item.isUpdating = true;\r\n this.rootStore.mainLoaderStore.suspend();\r\n const newValue = !item.isTurnedOn;\r\n const options = new UpdateNakiNigunAlbumStatusOptions(\r\n item.albumId,\r\n item.title,\r\n item.isPremium,\r\n item.isVisibleInApp === false,\r\n item.isVisibleInEmbeddedApp === false\r\n );\r\n await this.rootStore.userContentManagerStore.updateNakiNigunAlbumsStatus(options, newValue);\r\n runInAction(() => {\r\n item.isTurnedOn = newValue;\r\n this.nakiNigunHomeFeaturedContentViewStore.onAlbumTurnedOnStatusChange(item);\r\n });\r\n } catch (err) {\r\n this.rootStore.notificationStore.error(\r\n \"Unexpected error occurred. Please contact the support team.\",\r\n err\r\n );\r\n } finally {\r\n delete item.isUpdating;\r\n this.rootStore.mainLoaderStore.resume();\r\n }\r\n }\r\n }\r\n\r\n async toggleArtistTurnedOn(item, deviceId) {\r\n if (!item.isUpdating) {\r\n try {\r\n item.isUpdating = true;\r\n this.rootStore.mainLoaderStore.suspend();\r\n const newValue = !item.isTurnedOn;\r\n const options = new UpdateNakiNigunArtistStatusOptions(\r\n item.artistId,\r\n item.name,\r\n item.isPremium,\r\n item.isVisibleInApp === false,\r\n item.isVisibleInEmbeddedApp === false\r\n );\r\n await this.rootStore.userContentManagerStore.updateNakiNigunAlbumsStatusByArtist(options, newValue);\r\n runInAction(() => {\r\n item.isTurnedOn = newValue;\r\n this.nakiNigunHomeFeaturedContentViewStore.onArtistTurnedOnStatusChange(item);\r\n });\r\n } catch (err) {\r\n console.log(err);\r\n this.rootStore.notificationStore.error(\r\n \"Unexpected error occurred. Please contact the support team.\",\r\n err\r\n );\r\n } finally {\r\n delete item.isUpdating;\r\n this.rootStore.mainLoaderStore.resume();\r\n }\r\n }\r\n }\r\n\r\n @action.bound\r\n changeContentTypeFilter(value) {\r\n this.queryUtility.filter.set(\"contentType\", value);\r\n this.queryUtility.fetch();\r\n }\r\n\r\n goTo = (item) => {\r\n this.rootStore.routerStore.goTo(\"master.application.naki-nigun.artist\", {\r\n id: item.artistId,\r\n });\r\n };\r\n\r\n goToConnectDevice = () => {\r\n this.rootStore.routerStore.goTo(\"master.application.device.create\");\r\n };\r\n\r\n onClickCellItem = async (item) => {\r\n const contentAccessResult = this.rootStore.contentAccessValidator.canAccessNakiNigun({\r\n isPremium: item.isPremium,\r\n unavailableInMobileApp: item.isVisibleInApp === false,\r\n unavailableInNakiTouch: item.isVisibleInEmbeddedApp === false,\r\n });\r\n if (contentAccessResult.canAccess) {\r\n if (item instanceof NakiNigunArtist) {\r\n await this.toggleArtistTurnedOn(item, this.selectedDevice.id);\r\n } else if (item instanceof NakiNigunAlbum) {\r\n await this.toggleAlbumTurnedOn(item, this.selectedDevice.id);\r\n }\r\n }\r\n };\r\n\r\n @action.bound\r\n onFeaturedAlbumTurnedOnStatusChange(changedAlbum) {\r\n const album = find(this.gridStore.data, (item) => item.albumId === changedAlbum.albumId);\r\n if (album && album.isTurnedOn !== changedAlbum.isTurnedOn) {\r\n album.isTurnedOn = changedAlbum.isTurnedOn;\r\n }\r\n }\r\n\r\n @action.bound\r\n onFeaturedArtistTurnedOnStatusChange(changedArtist) {\r\n const artist = find(this.gridStore.data, (item) => item.artistId === changedArtist.artistId);\r\n if (artist && artist.isTurnedOn !== changedArtist.isTurnedOn) {\r\n artist.isTurnedOn = changedArtist.isTurnedOn;\r\n }\r\n }\r\n\r\n onFetchError(error) {\r\n this.rootStore.notificationStore.error(\r\n \"Unexpected error occurred while trying to load content. Please contact the support team.\",\r\n error\r\n );\r\n }\r\n\r\n createArtistCoverImageUrl(item) {\r\n if (item.coverImageId) {\r\n return this.rootStore.coverImageFactory.createNakiNigunArtistCoverImageUrl(item.coverImageId, 200, 200);\r\n }\r\n return null;\r\n }\r\n\r\n createAlbumCoverImageUrl(item) {\r\n if (item.coverImageId) {\r\n return this.rootStore.coverImageFactory.createNakiNigunAlbumCoverImageUrl(item.coverImageId, 200, 200);\r\n }\r\n return null;\r\n }\r\n\r\n onDestroy() {\r\n this.nakiNigunGenericSearchViewStore.destroy();\r\n this.nakiNigunManageSelectedItemsViewStore.destroy();\r\n this.nakiNigunHomeFeaturedContentViewStore.destroy();\r\n }\r\n}\r\n\r\nexport default NakiNigunHomeViewStore;\r\n","import { action, makeObservable, observable, runInAction } from \"mobx\";\r\nimport { MrbBaseListViewStore } from \"mrb/core\";\r\nimport { httpStatusCodes } from \"mrb/core/constants\";\r\nimport { MrbGridViewStore } from \"mrb/components/grid\";\r\nimport { MrbSimpleSelectStore } from \"mrb/components/select\";\r\nimport { sideScroll } from \"common/utils\";\r\nimport { find, filter, map, isNil, uniqBy } from \"lodash\";\r\n\r\nclass NakiNigunGenericSearchViewStore extends MrbBaseListViewStore {\r\n @observable showSearchView = false;\r\n @observable.ref artists = [];\r\n @observable isAppearsInScrollable = false;\r\n @observable.ref appearsInContainerRef = null;\r\n _isInitialLoad = true;\r\n\r\n _abortController = null;\r\n\r\n orderOptions = [\r\n {\r\n label: \"APPLICATION.NAKI_NIGUN.LIST.GENERIC_SEARCH.ORDER.RELEVANCE_OPTION\",\r\n value: \"-1\",\r\n },\r\n {\r\n label: \"APPLICATION.NAKI_NIGUN.LIST.GENERIC_SEARCH.ORDER.RECENTLY_ADDED_OPTION\",\r\n value: \"dateCreated\",\r\n },\r\n {\r\n label: \"APPLICATION.NAKI_NIGUN.LIST.GENERIC_SEARCH.ORDER.ALPHABETICALY_OPTION\",\r\n value: \"title\",\r\n },\r\n ];\r\n\r\n constructor(rootStore, nakiNigunHomeViewStore) {\r\n super(rootStore, {\r\n queryConfig: {\r\n disableUpdateQueryParams: true,\r\n pageSize: 30,\r\n },\r\n });\r\n makeObservable(this);\r\n this.nakiNigunHomeViewStore = nakiNigunHomeViewStore;\r\n this.routeStore = this.nakiNigunHomeViewStore.routeStore;\r\n\r\n this.setGridStore(\r\n new MrbGridViewStore(this.rootStore, this.queryUtility, {\r\n onCellClick: (item) => this.onClickCellItem(item),\r\n generateKey: (item) => item.albumId,\r\n mapper: (item) => {\r\n return {\r\n ...item,\r\n coverImageUrl: this.createAlbumCoverImageUrl(item),\r\n };\r\n },\r\n })\r\n );\r\n\r\n this.orderBySelectStore = new MrbSimpleSelectStore(\r\n {\r\n textKey: \"label\",\r\n valueKey: \"value\",\r\n actions: {\r\n onChange: (selectedOrder) => {\r\n if (this.queryUtility.filter.orderBy !== selectedOrder.value) {\r\n if (selectedOrder.value === \"-1\") {\r\n this.queryUtility.filter.orderBy = null;\r\n this.queryUtility.filter.orderDirection = null;\r\n } else {\r\n this.queryUtility.filter.orderBy = selectedOrder.value;\r\n if (selectedOrder.value === \"title\") {\r\n this.queryUtility.filter.orderDirection = \"asc\";\r\n } else {\r\n this.queryUtility.filter.orderDirection = \"desc\";\r\n }\r\n }\r\n this.queryUtility.fetch();\r\n }\r\n },\r\n },\r\n },\r\n this.orderOptions\r\n );\r\n\r\n this.initializeSortingDefault();\r\n\r\n this.reaction(\r\n () => (this.queryUtility.filter.search || \"\").trim(),\r\n (searchPhrase) => {\r\n if (searchPhrase) {\r\n this.queryUtility.fetch();\r\n } else {\r\n this.reset();\r\n }\r\n },\r\n {\r\n delay: 300,\r\n }\r\n );\r\n\r\n this.reaction(\r\n () => ({\r\n artists: this.artists,\r\n container: this.appearsInContainerRef,\r\n }),\r\n (context) => {\r\n if (context.container) {\r\n setTimeout(() => {\r\n runInAction(() => {\r\n this.isAppearsInScrollable = context.container.scrollWidth > context.container.clientWidth;\r\n });\r\n });\r\n }\r\n }\r\n );\r\n }\r\n\r\n async fetchResources(filter) {\r\n if (filter.search) {\r\n this.abortExistingRequest();\r\n this.setShowSearchView(true);\r\n let delay = null;\r\n if (this._isInitialLoad) {\r\n delay = 0;\r\n }\r\n this.gridStore.suspend(delay);\r\n try {\r\n const response = await this.find(filter);\r\n runInAction(() => {\r\n this.gridStore.setData(response);\r\n this.setArtists(response);\r\n this.gridStore.resume();\r\n });\r\n } catch (err) {\r\n runInAction(() => {\r\n this.gridStore.resume();\r\n });\r\n this.onFetchError(err);\r\n } finally {\r\n this._isInitialLoad = false;\r\n }\r\n } else {\r\n this.reset();\r\n }\r\n }\r\n\r\n @action.bound\r\n setArtists(response) {\r\n const data = response.item ? response.item : response;\r\n const artists = map(\r\n uniqBy(\r\n filter(data, (item) => !isNil(item.artistId)),\r\n \"artistId\"\r\n ),\r\n (item) => {\r\n return {\r\n artistId: item.artistId,\r\n name: item.artistName,\r\n isArtistPremium: item.isArtistPremium,\r\n coverImageUrl: this.createArtistCoverImageUrl(item.artistCoverImageId),\r\n };\r\n }\r\n );\r\n this.artists = artists;\r\n }\r\n\r\n initializeSortingDefault() {\r\n if (this.queryUtility.filter.orderBy) {\r\n this.orderBySelectStore.setSelectedItem(\r\n find(this.orderOptions, (orderOption) => orderOption.value === this.queryUtility.filter.orderBy)\r\n );\r\n } else {\r\n this.orderBySelectStore.setSelectedItem(this.orderOptions[0]);\r\n }\r\n }\r\n\r\n find(params) {\r\n this._abortController = new AbortController();\r\n return this.routeStore.genericSearch(params, this._abortController);\r\n }\r\n\r\n onClickCellItem = (item) => {\r\n this.rootStore.routerStore.goTo(\r\n \"master.application.naki-nigun.artist\",\r\n {\r\n id: item.artistId,\r\n },\r\n { albumId: item.albumId }\r\n );\r\n };\r\n\r\n createAlbumCoverImageUrl(item) {\r\n if (item.coverImageId) {\r\n return this.rootStore.coverImageFactory.createNakiNigunAlbumCoverImageUrl(item.coverImageId, 200, 200);\r\n }\r\n return null;\r\n }\r\n\r\n createArtistCoverImageUrl(artistCoverImageId) {\r\n if (artistCoverImageId) {\r\n return this.rootStore.coverImageFactory.createNakiNigunArtistCoverImageUrl(artistCoverImageId, 200, 200);\r\n }\r\n return null;\r\n }\r\n\r\n onFetchError(error) {\r\n if (error && error.statusCode === httpStatusCodes.CanceledRequest) {\r\n return;\r\n }\r\n console.log(error);\r\n this.rootStore.notificationStore.error(\r\n \"Unexpected error occurred while trying to load content. Please contact the support team.\",\r\n error\r\n );\r\n }\r\n\r\n @action.bound\r\n setShowSearchView(value) {\r\n this.showSearchView = value;\r\n }\r\n\r\n @action.bound\r\n reset() {\r\n this.setShowSearchView(false);\r\n this.abortExistingRequest();\r\n this.gridStore.setData([]);\r\n this.setArtists([]);\r\n this._isInitialLoad = true;\r\n }\r\n\r\n @action.bound\r\n scrollFeaturedLeft() {\r\n sideScroll(this.appearsInContainerRef, \"left\", 20, 400, 20);\r\n }\r\n\r\n @action.bound\r\n scrollFeaturedRight() {\r\n sideScroll(this.appearsInContainerRef, \"right\", 20, 400, 20);\r\n }\r\n\r\n abortExistingRequest() {\r\n if (this._abortController) {\r\n this._abortController.abort();\r\n }\r\n }\r\n\r\n onDestroy() {\r\n this.abortExistingRequest();\r\n }\r\n\r\n onClickArtist = (artist) => {\r\n this.rootStore.routerStore.goTo(\"master.application.naki-nigun.artist\", {\r\n id: artist.artistId,\r\n });\r\n };\r\n\r\n @action.bound\r\n setAppearsInContainerRef(ref) {\r\n this.appearsInContainerRef = ref;\r\n }\r\n}\r\n\r\nexport default NakiNigunGenericSearchViewStore;\r\n","import { MrbBaseViewStore } from \"mrb/core\";\r\nimport { observable, makeObservable, action, computed } from \"mobx\";\r\nimport { isNil } from \"lodash\";\r\nimport { NakiNigunBulkSelect } from \"application/naki-nigun/models\";\r\n\r\nclass NakiNigunAlbumBulkEditViewStore extends MrbBaseViewStore {\r\n @observable isUpdating = false;\r\n @observable bulkSelection = new NakiNigunBulkSelect();\r\n\r\n @computed get isSelectedItemsAny() {\r\n return !isNil(this.bulkSelection.isAllSelected) || this.bulkSelection.selectedIds.length > 0;\r\n }\r\n\r\n constructor(rootStore, nakiNigunHomeViewStore) {\r\n super(rootStore);\r\n makeObservable(this);\r\n this.nakiNigunHomeViewStore = nakiNigunHomeViewStore;\r\n this.routeStore = nakiNigunHomeViewStore.routeStore;\r\n }\r\n\r\n @action.bound\r\n selectAll() {\r\n this.bulkSelection.selectAll();\r\n }\r\n\r\n @action.bound\r\n deselectAll() {\r\n this.bulkSelection.deselectAll();\r\n }\r\n\r\n @action.bound\r\n selectItem(item) {\r\n if (this.isUpdating) {\r\n return;\r\n }\r\n\r\n const contentAccessResult = this.rootStore.contentAccessValidator.canAccessNakiNigun({\r\n isPremium: item.isPremium,\r\n unavailableInMobileApp: item.isVisibleInApp === false,\r\n });\r\n\r\n if (contentAccessResult.canAccess) {\r\n this.bulkSelection.addSelectedItem(item.albumId);\r\n }\r\n }\r\n\r\n @action.bound\r\n deselectItem(item) {\r\n if (this.isUpdating) {\r\n return;\r\n }\r\n\r\n const contentAccessResult = this.rootStore.contentAccessValidator.canAccessNakiNigun({\r\n isPremium: item.isPremium,\r\n unavailableInMobileApp: item.isVisibleInApp === false,\r\n });\r\n\r\n if (contentAccessResult.canAccess) {\r\n this.bulkSelection.addDeselectedItem(item.albumId);\r\n }\r\n }\r\n\r\n @action.bound\r\n async saveSelection() {\r\n if (!this.isUpdating) {\r\n this.setIsUpdating(true);\r\n try {\r\n this.rootStore.mainLoaderStore.suspend();\r\n const options = {\r\n isAllSelected: this.bulkSelection.isAllSelected,\r\n selectedAlbumIds: this.bulkSelection.selectedIds,\r\n deselectedAlbumIds: this.bulkSelection.deselectedIds,\r\n };\r\n await this.rootStore.userContentManagerStore.updateNakiNigunAlbumsStatusBulk(options);\r\n this.nakiNigunHomeViewStore.onAlbumBulkEditSuccess(this.bulkSelection);\r\n\r\n return true;\r\n } catch (err) {\r\n this.rootStore.notificationStore.error(\r\n \"Unexpected error occurred. Please contact the support team.\",\r\n err\r\n );\r\n\r\n return false;\r\n } finally {\r\n this.setIsUpdating(false);\r\n this.rootStore.mainLoaderStore.resume();\r\n }\r\n }\r\n }\r\n\r\n @action.bound\r\n setIsUpdating(isUpdating) {\r\n this.isUpdating = isUpdating;\r\n }\r\n\r\n @action.bound\r\n clearSelection() {\r\n this.bulkSelection = new NakiNigunBulkSelect();\r\n }\r\n}\r\n\r\nexport default NakiNigunAlbumBulkEditViewStore;\r\n","import { MrbBaseViewStore } from \"mrb/core\";\r\nimport { observable, makeObservable, action, computed } from \"mobx\";\r\nimport { isNil } from \"lodash\";\r\nimport { NakiNigunBulkSelect } from \"application/naki-nigun/models\";\r\n\r\nclass NakiNigunArtistBulkEditViewStore extends MrbBaseViewStore {\r\n @observable isUpdating = false;\r\n @observable bulkSelection = new NakiNigunBulkSelect();\r\n\r\n @computed get isSelectedItemsAny() {\r\n return !isNil(this.bulkSelection.isAllSelected) || this.bulkSelection.selectedIds.length > 0;\r\n }\r\n constructor(rootStore, nakiNigunHomeViewStore) {\r\n super(rootStore);\r\n makeObservable(this);\r\n this.nakiNigunHomeViewStore = nakiNigunHomeViewStore;\r\n this.routeStore = nakiNigunHomeViewStore.routeStore;\r\n }\r\n\r\n @action.bound\r\n selectAll() {\r\n this.bulkSelection.selectAll();\r\n }\r\n\r\n @action.bound\r\n deselectAll() {\r\n this.bulkSelection.deselectAll();\r\n }\r\n\r\n @action.bound\r\n selectItem(item) {\r\n if (this.isUpdating) {\r\n return;\r\n }\r\n\r\n const contentAccessResult = this.rootStore.contentAccessValidator.canAccessNakiNigun({\r\n isPremium: item.isPremium,\r\n unavailableInMobileApp: item.isVisibleInApp === false,\r\n });\r\n\r\n if (contentAccessResult.canAccess) {\r\n this.bulkSelection.addSelectedItem(item.artistId);\r\n }\r\n }\r\n\r\n @action.bound\r\n deselectItem(item) {\r\n if (this.isUpdating) {\r\n return;\r\n }\r\n\r\n const contentAccessResult = this.rootStore.contentAccessValidator.canAccessNakiNigun({\r\n isPremium: item.isPremium,\r\n unavailableInMobileApp: item.isVisibleInApp === false,\r\n });\r\n\r\n if (contentAccessResult.canAccess) {\r\n this.bulkSelection.addDeselectedItem(item.artistId);\r\n }\r\n }\r\n\r\n @action.bound\r\n async saveSelection() {\r\n if (!this.isUpdating) {\r\n this.setIsUpdating(true);\r\n try {\r\n this.rootStore.mainLoaderStore.suspend();\r\n const options = {\r\n isAllSelected: this.bulkSelection.isAllSelected,\r\n selectedArtistIds: this.bulkSelection.selectedIds,\r\n deselectedArtistIds: this.bulkSelection.deselectedIds,\r\n };\r\n await this.rootStore.userContentManagerStore.updateNakiNigunAlbumsStatusByArtistBulk(options);\r\n this.nakiNigunHomeViewStore.onArtistBulkEditSuccess(this.bulkSelection);\r\n\r\n return true;\r\n } catch (err) {\r\n this.rootStore.notificationStore.error(\r\n \"Unexpected error occurred. Please contact the support team.\",\r\n err\r\n );\r\n\r\n return false;\r\n } finally {\r\n this.setIsUpdating(false);\r\n this.rootStore.mainLoaderStore.resume();\r\n }\r\n }\r\n }\r\n\r\n @action.bound\r\n setIsUpdating(isUpdating) {\r\n this.isUpdating = isUpdating;\r\n }\r\n\r\n @action.bound\r\n clearSelection() {\r\n this.bulkSelection = new NakiNigunBulkSelect();\r\n }\r\n}\r\n\r\nexport default NakiNigunArtistBulkEditViewStore;\r\n","import { MrbBaseViewStore } from \"mrb/core\";\r\nimport { observable, makeObservable, action, computed } from \"mobx\";\r\nimport { NakiNigunAlbumBulkEditViewStore, NakiNigunArtistBulkEditViewStore } from \"application/naki-nigun/stores\";\r\nimport { nakiNigunContentType } from \"application/naki-nigun/models\";\r\n\r\nclass NakiNigunManageSelectedItemsViewStore extends MrbBaseViewStore {\r\n @observable isBulk = false;\r\n\r\n @computed get isSelectedItemsAny() {\r\n return this.nakiNigunHomeViewStore.nakiNigunContentTypeMode === nakiNigunContentType.artists\r\n ? this.artistBulkEditViewStore.isSelectedItemsAny\r\n : this.albumBulkEditViewStore.isSelectedItemsAny;\r\n }\r\n\r\n constructor(rootStore, nakiNigunHomeViewStore) {\r\n super(rootStore);\r\n makeObservable(this);\r\n this.nakiNigunHomeViewStore = nakiNigunHomeViewStore;\r\n this.routeStore = nakiNigunHomeViewStore.routeStore;\r\n\r\n this.albumBulkEditViewStore = new NakiNigunAlbumBulkEditViewStore(this.rootStore, this.nakiNigunHomeViewStore);\r\n this.artistBulkEditViewStore = new NakiNigunArtistBulkEditViewStore(\r\n this.rootStore,\r\n this.nakiNigunHomeViewStore\r\n );\r\n }\r\n\r\n @action.bound\r\n changeIsBulk() {\r\n if (this.isUpdating) {\r\n return;\r\n }\r\n this.setIsBulk(!this.isBulk);\r\n }\r\n\r\n @action.bound\r\n setIsBulk(value) {\r\n this.isBulk = value;\r\n if (!this.isBulk) {\r\n this.clearSelection();\r\n }\r\n }\r\n\r\n @action.bound\r\n selectAll() {\r\n if (this.nakiNigunHomeViewStore.nakiNigunContentTypeMode === nakiNigunContentType.artists) {\r\n this.artistBulkEditViewStore.selectAll();\r\n } else {\r\n this.albumBulkEditViewStore.selectAll();\r\n }\r\n }\r\n\r\n @action.bound\r\n deselectAll() {\r\n if (this.nakiNigunHomeViewStore.nakiNigunContentTypeMode === nakiNigunContentType.artists) {\r\n this.artistBulkEditViewStore.deselectAll();\r\n } else {\r\n this.albumBulkEditViewStore.deselectAll();\r\n }\r\n }\r\n\r\n @action.bound\r\n selectItem(item) {\r\n const contentAccessResult = this.rootStore.contentAccessValidator.canAccessNakiNigun({\r\n isPremium: item.isPremium,\r\n unavailableInMobileApp: item.isVisibleInApp === false,\r\n unavailableInNakiTouch: item.isVisibleInEmbeddedApp === false,\r\n });\r\n if (contentAccessResult.canAccess) {\r\n if (this.nakiNigunHomeViewStore.nakiNigunContentTypeMode === nakiNigunContentType.artists) {\r\n this.artistBulkEditViewStore.selectItem(item);\r\n } else {\r\n this.albumBulkEditViewStore.selectItem(item);\r\n }\r\n }\r\n }\r\n\r\n @action.bound\r\n deselectItem(item) {\r\n const contentAccessResult = this.rootStore.contentAccessValidator.canAccessNakiNigun({\r\n isPremium: item.isPremium,\r\n unavailableInMobileApp: item.isVisibleInApp === false,\r\n unavailableInNakiTouch: item.isVisibleInEmbeddedApp === false,\r\n });\r\n if (contentAccessResult.canAccess) {\r\n if (this.nakiNigunHomeViewStore.nakiNigunContentTypeMode === nakiNigunContentType.artists) {\r\n this.artistBulkEditViewStore.deselectItem(item);\r\n } else {\r\n this.albumBulkEditViewStore.deselectItem(item);\r\n }\r\n }\r\n }\r\n\r\n @action.bound\r\n async changeTurnOn(value) {\r\n let success;\r\n if (this.nakiNigunHomeViewStore.nakiNigunContentTypeMode === nakiNigunContentType.artists) {\r\n success = await this.artistBulkEditViewStore.changeTurnOn(value);\r\n } else {\r\n success = await this.albumBulkEditViewStore.changeTurnOn(value);\r\n }\r\n if (success) {\r\n this.setIsBulk(false);\r\n }\r\n }\r\n\r\n @action.bound\r\n async saveSelection() {\r\n let success;\r\n if (this.nakiNigunHomeViewStore.nakiNigunContentTypeMode === nakiNigunContentType.artists) {\r\n success = await this.artistBulkEditViewStore.saveSelection();\r\n } else {\r\n success = await this.albumBulkEditViewStore.saveSelection();\r\n }\r\n if (success) {\r\n this.setIsBulk(false);\r\n }\r\n }\r\n\r\n @action.bound\r\n clearSelection() {\r\n this.artistBulkEditViewStore.clearSelection();\r\n this.albumBulkEditViewStore.clearSelection();\r\n }\r\n}\r\n\r\nexport default NakiNigunManageSelectedItemsViewStore;\r\n","import React from \"react\";\r\nimport { NakiNigunArtistAlbumTemplate } from \"themes/application/naki-nigun/components\";\r\nimport { NakiNigunArtistAlbumViewStore } from \"application/naki-nigun/stores\";\r\nimport { setCurrentView } from \"mrb/core\";\r\n\r\n@setCurrentView(\r\n (rootStore, componentProps) => new NakiNigunArtistAlbumViewStore(rootStore, componentProps),\r\n \"nakiNigunArtistAlbumViewStore\"\r\n)\r\nclass NakiNigunArtistAlbum extends React.Component {\r\n render() {\r\n return \r\n
\r\n ) : (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n )}\r\n \r\n
\r\n \r\n\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {item.name}\r\n \r\n {!contentAccessResult.canAccessOnSelectedDevice && (\r\n
\r\n \r\n {t(\"APPLICATION.NAKI_NIGUN.ARTIST.FIELDS.NAME\")}\r\n
\r\n\r\n
\r\n )}\r\n \r\n
\r\n \r\n {map(item.albums, (album) => (\r\n
\r\n \r\n \r\n \r\n
\r\n Connect your device to the portal
\r\n\r\n
\r\n\r\n \r\n
\r\n \r\n 
\r\n
\r\n \r\n
\r\n Where to find Device ID?
\r\n\r\n
\r\n - \r\n
- Press the menu/back button on your device. \r\n
- \r\n Choose Station List.\r\n \r\n
- You Device ID is a code with 8 characters. \r\n
\r\n
\r\n \r\n \r\n
\r\n )}\r\n \r\n {!isDowntimeDisabled && (\r\n \r\n \r\n
\r\n {!isDowntimeDisabled && (\r\n \r\n
\r\n )}\r\n \r\n
\r\n )}\r\n {!isDowntimeDisabled && (\r\n \r\n
\r\n )}\r\n \r\n Presets
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n Downtime is an option that enables you to lock the device at a certain time.\r\n
\r\n )}\r\n \r\n \r\n \r\n
\r\n )}\r\n \r\n
\r\n {t(deviceListViewStore.title)}
\r\n \r\n {t(\"APPLICATION.DEVICE_SETTINGS.LIST.TITLE\")}{\" \"}\r\n
\r\n \r\n
\r\n );\r\n}\r\n\r\nconst DeviceCounter = observer(function DeviceCounter({ deviceListViewStore, t }) {\r\n const { gridStore, deviceLimit } = deviceListViewStore;\r\n\r\n if (!gridStore.dataInitialized) {\r\n return null;\r\n }\r\n\r\n if (isNil(deviceLimit)) {\r\n return (\r\n \r\n \r\n
\r\n Ooops! There is no device
\r\nPlease, add your device to start using NakiRadio.
\r\n\r\n
\r\n );\r\n});\r\n\r\nexport default defaultTemplate(DeviceListTemplate);\r\n","import { override } from \"mobx\";\r\nimport { MrbBaseRouteStore } from \"mrb/core\";\r\nimport { DeviceService } from \"common/services\";\r\n\r\nclass DeviceCreateRouteStore extends MrbBaseRouteStore {\r\n constructor(rootStore) {\r\n super(rootStore);\r\n\r\n this.service = this.rootStore.createApplicationService(DeviceService);\r\n }\r\n\r\n async registerUserDevice(resource) {\r\n const response = await this.service.registerUserDevice(resource);\r\n await this.rootStore.userDeviceStore.loadUserDevices();\r\n return response.data;\r\n }\r\n\r\n @override\r\n onBeforeEnter() {\r\n if (!this.rootStore.userDeviceStore.isDeviceSlotAvailable) {\r\n return Promise.reject(\"master.application.device.list\");\r\n }\r\n }\r\n}\r\n\r\nexport default DeviceCreateRouteStore;\r\n","import { LocalizedForm } from \"common/localization\";\r\n\r\nexport default class DeviceCreateForm extends LocalizedForm {\r\n constructor(hooks) {\r\n super(hooks);\r\n }\r\n\r\n setup() {\r\n return {\r\n fields: [\r\n {\r\n name: \"deviceTemporaryCode\",\r\n label: \"APPLICATION.DEVICE_SETTINGS.CREATE.FIELDS.DEVICE_ID_LABEL\",\r\n placeholder: \"APPLICATION.DEVICE_SETTINGS.CREATE.FIELDS.DEVICE_ID_PLACEHOLDER\",\r\n rules: \"required|string\",\r\n extra: {\r\n infoLabel: \"Where can I find my Device ID?\",\r\n },\r\n },\r\n {\r\n name: \"deviceName\",\r\n label: \"APPLICATION.DEVICE_SETTINGS.CREATE.FIELDS.DEVICE_NAME_LABEL\",\r\n placeholder: \"APPLICATION.DEVICE_SETTINGS.CREATE.FIELDS.DEVICE_NAME_PLACEHOLDER\",\r\n rules: \"required|string\",\r\n },\r\n ],\r\n };\r\n }\r\n}\r\n","import { LocalizedForm } from \"common/localization\";\r\n\r\nexport default class DeviceEditForm extends LocalizedForm {\r\n constructor(hooks) {\r\n super(hooks);\r\n }\r\n\r\n setup() {\r\n return {\r\n fields: [\r\n {\r\n name: \"deviceName\",\r\n label:\r\n \"APPLICATION.DEVICE_SETTINGS.EDIT.FIELDS.DEVICE_NAME_LABEL\",\r\n placeholder:\r\n \"APPLICATION.DEVICE_SETTINGS.EDIT.FIELDS.DEVICE_NAME_PLACEHOLDER\",\r\n rules: \"required|string\",\r\n },\r\n {\r\n name: \"timeZone\",\r\n label:\r\n \"APPLICATION.DEVICE_SETTINGS.EDIT.FIELDS.TIMEZONE_LABEL\",\r\n placeholder:\r\n \"APPLICATION.DEVICE_SETTINGS.EDIT.FIELDS.TIMEZONE_PLACEHOLDER\",\r\n rules: \"required|string\",\r\n },\r\n ],\r\n };\r\n }\r\n}\r\n","import { action, observable, makeObservable } from \"mobx\";\r\nimport { MrbBaseEditViewStore } from \"mrb/core\";\r\nimport { DeviceCreateForm } from \"application/device-settings/forms\";\r\nimport { applicationErrorCodes } from \"common/constants\";\r\nimport { localizationService } from \"common/localization\";\r\nimport { MrbModalParams } from \"mrb/common/models\";\r\n\r\nclass DeviceCreateViewStore extends MrbBaseEditViewStore {\r\n @observable currentDeviceGuideImage = 1;\r\n\r\n constructor(rootStore, { routeStore }) {\r\n super(rootStore, {\r\n name: \"device-create\",\r\n FormClass: DeviceCreateForm,\r\n autoFocusField: \"deviceTemporaryCode\",\r\n successCreateNotification: null,\r\n successUpdateNotification: null,\r\n navigateBack: \"master.application.device.list\",\r\n });\r\n makeObservable(this);\r\n this.routeStore = routeStore;\r\n\r\n this.deviceIdInfoModal = new MrbModalParams();\r\n\r\n this.onClickDeviceIdInfo = this.onClickDeviceIdInfo.bind(this);\r\n }\r\n\r\n @action.bound\r\n deviceTemporaryCodeToUpper(inputValue) {\r\n this.form.$(\"deviceTemporaryCode\").onChange(inputValue.toUpperCase());\r\n }\r\n\r\n create(resource) {\r\n if (!this.rootStore.userDeviceStore.isDeviceSlotAvailable) {\r\n this.rootStore.notificationStore.error(\r\n localizationService.t(\"APPLICATION.DEVICE_SETTINGS.CREATE.ERROR.MAXIMUM_NUMBER_OF_DEVICES_REACHED\")\r\n );\r\n return;\r\n }\r\n return this.routeStore.registerUserDevice(resource);\r\n }\r\n\r\n onCreateError(error) {\r\n if (error.data.errorCode === applicationErrorCodes.device.notExists) {\r\n this.form\r\n .$(\"deviceTemporaryCode\")\r\n .invalidate(localizationService.t(\"APPLICATION.DEVICE_SETTINGS.CREATE.ERROR.DEVICE_NOT_EXIST\"));\r\n } else if (error.data.errorCode === applicationErrorCodes.device.alreadyRegistered) {\r\n this.form\r\n .$(\"deviceTemporaryCode\")\r\n .invalidate(\r\n localizationService.t(\"APPLICATION.DEVICE_SETTINGS.CREATE.ERROR.DEVICE_ALREADY_REGISTERED\")\r\n );\r\n } else {\r\n this.rootStore.notificationStore.error(\r\n localizationService.t(\"APPLICATION.DEVICE_SETTINGS.CREATE.ERROR.GENERIC_MESSAGE\")\r\n );\r\n }\r\n }\r\n\r\n @action.bound\r\n toggleCurrentDeviceGuideImage() {\r\n switch (this.currentDeviceGuideImage) {\r\n case 1:\r\n this.currentDeviceGuideImage = 2;\r\n break;\r\n case 2:\r\n this.currentDeviceGuideImage = 3;\r\n break;\r\n case 3:\r\n this.currentDeviceGuideImage = 1;\r\n break;\r\n default:\r\n break;\r\n }\r\n }\r\n\r\n onClickDeviceIdInfo() {\r\n this.deviceIdInfoModal.open();\r\n }\r\n}\r\n\r\nexport default DeviceCreateViewStore;\r\n","import { action, observable, makeObservable, runInAction } from \"mobx\";\r\nimport { MrbBaseViewStore } from \"mrb/core\";\r\nimport { MrbFieldSelectStore } from \"mrb/components/select\";\r\nimport {\r\n forEach,\r\n map,\r\n reduce,\r\n sortBy,\r\n some,\r\n isEmpty,\r\n filter,\r\n take,\r\n} from \"lodash\";\r\nimport moment from \"moment\";\r\nimport \"moment-timezone\";\r\n\r\nclass DeviceDowntimeEditViewStore extends MrbBaseViewStore {\r\n @observable.ref weekDays = [];\r\n @observable.ref dayHours = [];\r\n @observable disableActionOccured = false;\r\n\r\n nightTime = [\r\n \"8pm\",\r\n \"9pm\",\r\n \"10pm\",\r\n \"11pm\",\r\n \"12am\",\r\n \"1am\",\r\n \"2am\",\r\n \"3am\",\r\n \"4am\",\r\n \"5am\",\r\n \"6am\",\r\n \"7am\",\r\n ];\r\n shabbosTimeFriday = [\"7pm\", \"8pm\", \"9pm\", \"10pm\", \"11pm\", \"12am\"];\r\n shabbosTimeSaturday = [\r\n \"1am\",\r\n \"2am\",\r\n \"3am\",\r\n \"4am\",\r\n \"5am\",\r\n \"6am\",\r\n \"7am\",\r\n \"8am\",\r\n \"9am\",\r\n \"10am\",\r\n \"11am\",\r\n \"12pm\",\r\n \"1pm\",\r\n \"2pm\",\r\n \"3pm\",\r\n \"4pm\",\r\n \"5pm\",\r\n \"6pm\",\r\n \"7pm\",\r\n ];\r\n\r\n constructor(rootStore, routeStore, form) {\r\n super(rootStore);\r\n makeObservable(this);\r\n this.routeStore = routeStore;\r\n this.form = form;\r\n if (!this.form.has(\"prohibitedTime\")) {\r\n this.form.add({ key: \"prohibitedTime\" });\r\n }\r\n\r\n this.timeZones = moment.tz.names();\r\n this.isAllDayChecked = this.isAllDayChecked.bind(this);\r\n }\r\n\r\n findTimeZone = (searchTerm) => {\r\n return new Promise((resolve) => {\r\n setTimeout(() => {\r\n if (!searchTerm) {\r\n resolve(take(this.timeZones, 15));\r\n } else {\r\n const items = filter(\r\n this.timeZones,\r\n (timeZone) =>\r\n timeZone.toLowerCase().indexOf(searchTerm) !== -1\r\n );\r\n resolve(take(items, 15));\r\n }\r\n }, 300);\r\n });\r\n };\r\n\r\n async initialize() {\r\n const [weekDays, dayHours] = await Promise.all([\r\n this.routeStore.getWeekDays(),\r\n this.routeStore.getDayHours(),\r\n ]);\r\n runInAction(() => {\r\n this.weekDays = sortBy(weekDays, (item) => item.order);\r\n this.dayHours = sortBy(dayHours, (item) => item.order);\r\n });\r\n const currentTimeZone = this.form.$(\"timeZone\").value;\r\n if (!currentTimeZone) {\r\n this.form.$(\"timeZone\").set(moment.tz.guess());\r\n }\r\n\r\n const timeZoneOptions = map(this.timeZones, (timeZone) => {\r\n return {\r\n id: timeZone,\r\n name: timeZone,\r\n };\r\n });\r\n\r\n this.timezoneSelectStore = new MrbFieldSelectStore(\r\n {\r\n isSearchable: true,\r\n isMulti: false,\r\n virtualized: true,\r\n },\r\n this.form.$(\"timeZone\"),\r\n timeZoneOptions\r\n );\r\n }\r\n\r\n @action.bound\r\n buildForm(data) {\r\n forEach(this.weekDays, (day) => {\r\n this.form.$(\"prohibitedTime\").add({\r\n key: day.abrv,\r\n label: day.name,\r\n fields: [\r\n ...this.generateTimeFrameFields(data && data[day.abrv]),\r\n ],\r\n });\r\n });\r\n }\r\n\r\n generateTimeFrameFields(data) {\r\n return map(this.dayHours, (hour) => {\r\n return {\r\n name: hour.abrv,\r\n type: \"bool\",\r\n value:\r\n data && data.length > 0\r\n ? some(data, (hourAbrv) => hourAbrv === hour.abrv)\r\n : false,\r\n };\r\n });\r\n }\r\n\r\n @action.bound\r\n disableEntireDay(selectedDay, isChecked) {\r\n let days = this.form.$(\"prohibitedTime\").value;\r\n forEach(days[selectedDay], (value, index) => {\r\n days[selectedDay][index] = isChecked;\r\n });\r\n this.form.$(\"prohibitedTime\").update(days);\r\n this.disableActionOccured = true;\r\n }\r\n\r\n @action.bound\r\n disableNight() {\r\n let days = this.form.$(\"prohibitedTime\").value;\r\n forEach(this.nightTime, (value) => {\r\n forEach(days, (v, index) => {\r\n days[index][value] = true;\r\n });\r\n });\r\n this.form.$(\"prohibitedTime\").update(days);\r\n this.disableActionOccured = true;\r\n }\r\n\r\n @action.bound\r\n disableShabbos() {\r\n let days = this.form.$(\"prohibitedTime\").value;\r\n forEach(this.shabbosTimeFriday, function (value) {\r\n days[\"fri\"][value] = true;\r\n });\r\n forEach(this.shabbosTimeSaturday, function (value) {\r\n days[\"sat\"][value] = true;\r\n });\r\n this.form.$(\"prohibitedTime\").update(days);\r\n this.disableActionOccured = true;\r\n }\r\n\r\n @action.bound\r\n reset() {\r\n this.form.$(\"prohibitedTime\").reset();\r\n }\r\n\r\n isAllDayChecked(day) {\r\n return !some(day, (isSelected) => !isSelected);\r\n }\r\n\r\n processFormResult(deviceDowntime) {\r\n const obj = {};\r\n forEach(deviceDowntime, (dayTimeFrames, dayAbrv) => {\r\n const timeFrames = reduce(\r\n dayTimeFrames,\r\n function (result, value, key) {\r\n if (value) {\r\n result.push(key);\r\n }\r\n return result;\r\n },\r\n []\r\n );\r\n if (timeFrames && timeFrames.length > 0) {\r\n obj[dayAbrv] = timeFrames;\r\n }\r\n });\r\n return !isEmpty(obj) ? obj : null;\r\n }\r\n}\r\n\r\nexport default DeviceDowntimeEditViewStore;\r\n","import { MrbBaseRouteStore } from \"mrb/core\";\r\nimport { DeviceService, DayHourCacheService, WeekDayCacheService } from \"common/services\";\r\n\r\nclass DeviceEditRouteStore extends MrbBaseRouteStore {\r\n constructor(rootStore) {\r\n super(rootStore);\r\n\r\n this.service = this.rootStore.createApplicationService(DeviceService);\r\n this.dayHourService = new DayHourCacheService(this.rootStore);\r\n this.weekDayService = new WeekDayCacheService(this.rootStore);\r\n }\r\n\r\n updateUserDevice(resource) {\r\n return this.rootStore.userDeviceStore.updateUserDevice(resource);\r\n }\r\n\r\n deleteUserDevice(resource) {\r\n return this.rootStore.userDeviceStore.deleteUserDevice(resource);\r\n }\r\n\r\n getUserDevice(id) {\r\n return this.rootStore.userDeviceStore.getUserDevice(id, { embed: \"device,device.systemType\" });\r\n }\r\n\r\n getWeekDays() {\r\n return this.weekDayService.getItems();\r\n }\r\n\r\n getDayHours() {\r\n return this.dayHourService.getItems();\r\n }\r\n}\r\n\r\nexport default DeviceEditRouteStore;\r\n","import { MrbBaseEditViewStore } from \"mrb/core\";\r\nimport { DeviceEditForm } from \"application/device-settings/forms\";\r\nimport { DeviceDowntimeEditViewStore } from \"application/device-settings/stores\";\r\nimport { localizationService } from \"common/localization\";\r\nimport { nakiRadioSystemTypes } from \"common/constants\";\r\nimport { computed, makeObservable, observable } from \"mobx\";\r\nimport { isNil } from \"lodash\";\r\n\r\nclass DeviceEditViewStore extends MrbBaseEditViewStore {\r\n @observable isFormChanged = false;\r\n\r\n @computed get isDowntimeDisabled() {\r\n return (\r\n !isNil(this.item) &&\r\n !isNil(this.item.device) &&\r\n !isNil(this.item.device.systemType) &&\r\n this.item.device.systemType.abrv === nakiRadioSystemTypes.mobile\r\n );\r\n }\r\n\r\n constructor(rootStore, { routeStore }) {\r\n const id = rootStore.routerStore.routerState.params.id;\r\n super(rootStore, {\r\n id: id,\r\n name: \"device-edit\",\r\n FormClass: DeviceEditForm,\r\n autoFocusField: \"deviceName\",\r\n navigateBack: \"master.application.device.list\",\r\n successCreateNotification: null,\r\n successUpdateNotification: null,\r\n });\r\n makeObservable(this);\r\n this.routeStore = routeStore;\r\n\r\n this.deviceDowntimeEditViewStore = new DeviceDowntimeEditViewStore(this.rootStore, this.routeStore, this.form);\r\n\r\n this.registerRouteExitBlocking();\r\n this.reaction(\r\n () => this.form.changed || this.deviceDowntimeEditViewStore.disableActionOccured,\r\n (isChanged) => {\r\n if (isChanged) {\r\n this.isFormChanged = isChanged;\r\n }\r\n }\r\n );\r\n }\r\n\r\n get(id) {\r\n return this.routeStore.getUserDevice(id);\r\n }\r\n\r\n update(resource) {\r\n resource.prohibitedTime = this.deviceDowntimeEditViewStore.processFormResult(resource.prohibitedTime);\r\n this.isFormChanged = false;\r\n return this.routeStore.updateUserDevice(resource);\r\n }\r\n\r\n async onInit() {\r\n await super.onInit();\r\n await this.deviceDowntimeEditViewStore.initialize();\r\n this.deviceDowntimeEditViewStore.buildForm(this.item.prohibitedTime);\r\n }\r\n\r\n onUpdateError(err) {\r\n this.rootStore.notificationStore.error(\r\n localizationService.t(\"APPLICATION.DEVICE_SETTINGS.EDIT.ERROR.GENERIC_MESSAGE\")\r\n );\r\n }\r\n\r\n registerRouteExitBlocking() {\r\n this.reaction(\r\n () => this.isFormChanged,\r\n (isChanged) => {\r\n this.routeStore.setIsRouteExitBlocked(isChanged);\r\n }\r\n );\r\n }\r\n}\r\n\r\nexport default DeviceEditViewStore;\r\n","import { MrbBaseRouteStore } from \"mrb/core\";\r\nimport { DeviceService } from \"common/services\";\r\n\r\nclass DeviceListRouteStore extends MrbBaseRouteStore {\r\n constructor(rootStore) {\r\n super(rootStore);\r\n\r\n this.service = this.rootStore.createApplicationService(DeviceService);\r\n }\r\n\r\n async findUserDevices(params) {\r\n const response = await this.service.findUserDeviceForAuthenticatedUser(\r\n params\r\n );\r\n return response.data;\r\n }\r\n\r\n deleteUserDevice(resource) {\r\n return this.rootStore.userDeviceStore.deleteUserDevice(resource);\r\n }\r\n}\r\n\r\nexport default DeviceListRouteStore;\r\n","import { MrbBaseListViewStore } from \"mrb/core\";\r\nimport { MrbGridViewStore } from \"mrb/components/grid\";\r\nimport { action, computed } from \"mobx\";\r\n\r\nclass DeviceListViewStore extends MrbBaseListViewStore {\r\n @computed get isAddDeviceEnabled() {\r\n return this.rootStore.userDeviceStore.isDeviceSlotAvailable;\r\n }\r\n\r\n @computed get deviceLimit() {\r\n return this.rootStore.userDeviceStore.deviceLimit;\r\n }\r\n\r\n constructor(rootStore, { routeStore }) {\r\n super(rootStore, {\r\n layoutActions: {\r\n create: {\r\n onClick: () => this.rootStore.routerStore.goTo(\"master.application.device.create\"),\r\n label: \"Add New Device\",\r\n },\r\n },\r\n queryConfig: {\r\n embed: \"device,device.systemType\",\r\n orderBy: \"deviceName\",\r\n orderDirection: \"asc\",\r\n },\r\n });\r\n this.routeStore = routeStore;\r\n\r\n this.setGridStore(\r\n new MrbGridViewStore(this.rootStore, this.queryUtility, {\r\n onCellClick: (item) =>\r\n this.rootStore.routerStore.goTo(\"master.application.device.edit\", { id: item.id }),\r\n actions: {\r\n delete: {\r\n onClick: (item) => this.deleteUserDevice(item),\r\n },\r\n },\r\n })\r\n );\r\n\r\n this.joyrideSteps = [\r\n {\r\n target: \".c-device__card--sml\",\r\n content: \"Here you can set prohibited time for this device!\",\r\n },\r\n ];\r\n\r\n this.goToAddNewDevice = this.goToAddNewDevice.bind(this);\r\n }\r\n\r\n find(params) {\r\n return this.routeStore.findUserDevices(params);\r\n }\r\n\r\n goToAddNewDevice() {\r\n this.rootStore.routerStore.goTo(\"master.application.device.create\");\r\n }\r\n\r\n @action.bound\r\n async deleteUserDevice(resource) {\r\n this.rootStore.confirmDialogStore.showConfirm({\r\n message: \"Do you want to delete device?\",\r\n onConfirm: async () => {\r\n try {\r\n this.rootStore.mainLoaderStore.suspend();\r\n await this.routeStore.deleteUserDevice(resource);\r\n this.rootStore.mainLoaderStore.resume();\r\n this.queryUtility.fetch();\r\n } catch (err) {\r\n this.rootStore.mainLoaderStore.resume();\r\n this.rootStore.notificationStore.error(\r\n \"An unexpected error occurred. Unable to delete device.\",\r\n err\r\n );\r\n }\r\n },\r\n yesLabel: \"Delete\",\r\n noLabel: \"Cancel\",\r\n description: \"You won't be able to revert this action.\",\r\n });\r\n }\r\n}\r\n\r\nexport default DeviceListViewStore;\r\n","import React from \"react\";\r\nimport { DeviceCreateTemplate } from \"themes/application/device-settings/pages\";\r\nimport { DeviceCreateViewStore } from \"application/device-settings/stores\";\r\nimport { setCurrentView } from \"mrb/core\";\r\n\r\n@setCurrentView(\r\n (rootStore, componentProps) =>\r\n new DeviceCreateViewStore(rootStore, componentProps),\r\n \"deviceCreateViewStore\"\r\n)\r\nclass DeviceCreate extends React.Component {\r\n render() {\r\n return \r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nUserProfilePasswordChangeTemplate.propTypes = {\r\n userProfilePasswordChangeViewStore: PropTypes.object.isRequired,\r\n t: PropTypes.func.isRequired,\r\n};\r\n\r\nexport default defaultTemplate(UserProfilePasswordChangeTemplate);\r\n","import React from \"react\";\r\nimport { PropTypes } from \"prop-types\";\r\nimport { MrbFieldInput } from \"mrb/components\";\r\nimport { defaultTemplate } from \"common/hoc\";\r\nimport { MrbEditFormLayout } from \"mrb/components/layout\";\r\n\r\nfunction UserProfileGeneralInfo({ userProfileEditViewStore, t }) {\r\n const { form } = userProfileEditViewStore;\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n {t(\"APPLICATION.USER_SETTINGS.EDIT.FIELDS.TITLE\")}
\r\n \r\n
\r\n \r\n
\r\n Personal Details
\r\n\r\n
\r\n \r\n
\r\n \r\n {t(\"ADMINISTRATION.USER.PASSWORD_CHANGE.TITLE\")}\r\n
\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n Premium\r\n \r\n
\r\n \r\n \r\n \r\n )}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n\r\n \r\n
\r\n\r\n {t(\"APPLICATION.PREMIUM.TRIAL.START_DATE_LABEL\")}
\r\n{t(\"APPLICATION.PREMIUM.TRIAL.START_DATE_VALUE\")}
\r\n\r\n
\r\n\r\n {t(\"APPLICATION.PREMIUM.TRIAL.END_DATE_LABEL\")}
\r\n\r\n {dateFormatter.format(endDate, {\r\n format: applicationDefaults.formats.date,\r\n })}\r\n
\r\n\r\n
\r\n Cancel Anytime Policy
\r\n\r\n
\r\n \r\n
\r\n );\r\n}\r\n\r\nexport default defaultTemplate(ActivateTrialTemplate);\r\n","import React from \"react\";\r\nimport { PropTypes } from \"prop-types\";\r\nimport { MrbPage, MrbPageHeader } from \"mrb/components/layout\";\r\nimport { MrbRouterLink } from \"mrb/core/infrastructure/router\";\r\nimport { SubscriptionPlanCard } from \"application/payment/components\";\r\nimport { defaultTemplate } from \"common/hoc\";\r\nimport { map, isNil } from \"lodash\";\r\n\r\nfunction ChangeSubscriptionPlanPreviewTemplate({ changeSubscriptionPlanPreviewViewStore, t }) {\r\n const { subscriptionPlans, subscription, loaderStore } = changeSubscriptionPlanPreviewViewStore;\r\n return (\r\n \r\n {premiumBadge}\r\n\r\n
\r\n \r\n
\r\n {subscriptionPlan.name} Trial
\r\nFree
\r\n\r\n {applicationDefaults.trialPeriodDays} days free trial\r\n
\r\n\r\n \r\n \r\n \r\n \r\n Subscription\r\n \r\n
\r\n \r\n {map(subscriptionPlans, (subscriptionPlan) => {\r\n return (\r\n
\r\n \r\n \r\n \r\n \r\n \r\n Subscriptions\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n Change Subscription Plan details
\r\n\r\n \r\n \r\n )}\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n\r\n {!isNil(customerPaymentMethod) && (\r\n \r\n
\r\n )}\r\n\r\n \r\n\r\n Payment method
\r\n\r\n
\r\n \r\n
\r\n );\r\n}\r\n\r\nfunction SubscriptionPolicies({ subscriptionChangePreview, currentSubscription, t }) {\r\n if (currentSubscription.subscriptionStatus.abrv === subscriptionStatuses.trial) {\r\n return createTrialSubscriptionPaymentPolicy(subscriptionChangePreview, currentSubscription, t);\r\n }\r\n return createSubscriptionPaymentPolicy(subscriptionChangePreview, currentSubscription, t);\r\n}\r\n\r\nfunction createSubscriptionPaymentPolicy(subscriptionChangePreview, currentSubscription, t) {\r\n const paymentPolicy = [];\r\n if (!subscriptionChangePreview.isUpgrade) {\r\n paymentPolicy.push(\r\n \r\n \r\n
\r\n \r\n
\r\n {isNew ? \"New Plan\" : \"Old Plan\"}
\r\n{subscriptionPlan.name}
\r\n\r\n
\r\n Your {currentSubscription.product.name} subscription will remain active until{\" \"}\r\n {dateFormatter.format(subscriptionChangePreview.dateOfChange, {\r\n format: applicationDefaults.formats.date,\r\n })}\r\n .\r\n
\r\n );\r\n }\r\n paymentPolicy.push(\r\n Starting from\r\n \r\n {\" \"}\r\n {dateFormatter.format(currentSubscription.nextBillingDate, {\r\n format: applicationDefaults.formats.date,\r\n })}{\" \"}\r\n \r\n we will charge you{\" \"}\r\n \r\n
Your new subscription starts today
);\r\n if (isNil(currentSubscription.endDate)) {\r\n paymentPolicy.push(\r\n\r\n Starting from{\" \"}\r\n {dateFormatter.format(currentSubscription.nextBillingDate, {\r\n format: applicationDefaults.formats.date,\r\n })}{\" \"}\r\n we will charge you
\r\n {subscriptionChangePreview.newSubscriptionPlan.name} Trial subscription will be active until{\" \"}\r\n {dateFormatter.format(currentSubscription.endDate, {\r\n format: applicationDefaults.formats.date,\r\n })}\r\n
\r\n );\r\n }\r\n\r\n return paymentPolicy;\r\n}\r\n\r\nfunction SubscriptionStartDate({ subscriptionChangePreview, t }) {\r\n if (isNil(subscriptionChangePreview.dateOfChange)) {\r\n returnYour new subscription plan starts today
;\r\n }\r\n return (\r\n\r\n Your new subscription plan starts on{\" \"}\r\n {dateFormatter.format(subscriptionChangePreview.dateOfChange, {\r\n format: applicationDefaults.formats.date,\r\n })}\r\n .\r\n
\r\n );\r\n}\r\n\r\nfunction ProratedInvoicePreview({ subscriptionChangePreview, invoicePreview }) {\r\n if (isNil(invoicePreview)) {\r\n return null;\r\n }\r\n if (invoicePreview.totalAmount === 0) {\r\n return null;\r\n }\r\n\r\n return (\r\n\r\n
\r\n );\r\n}\r\n\r\nfunction UpgradeSuccessModal({ modalParams, t }) {\r\n const { params, data = {} } = modalParams;\r\n let title, description;\r\n let confirmLabel = t(\"APPLICATION.PREMIUM.CHANGE_PLAN.SUCCESS.CONFIRM_BUTTON\", {\r\n subscriptionPlan: data.subscriptionPlan,\r\n });\r\n if (data.billingStartDate) {\r\n const billingStartDate = dateFormatter.format(data.billingStartDate, {\r\n format: applicationDefaults.formats.longDate,\r\n });\r\n title = t(\"APPLICATION.PREMIUM.CHANGE_PLAN.SUCCESS.TITLE\");\r\n description = t(\"APPLICATION.PREMIUM.CHANGE_PLAN.SUCCESS.DESCRIPTION_FUTURE\", {\r\n startDate: billingStartDate,\r\n subscriptionPlan: data.subscriptionPlan,\r\n });\r\n } else {\r\n title = t(\"APPLICATION.PREMIUM.CHANGE_PLAN.SUCCESS.TITLE\");\r\n description = t(\"APPLICATION.PREMIUM.CHANGE_PLAN.SUCCESS.DESCRIPTION\", {\r\n subscriptionPlan: data.subscriptionPlan,\r\n });\r\n }\r\n return (\r\n \r\n We will immediately charge you{\" \"}\r\n {currencyFormatter.format(invoicePreview.totalAmount, {\r\n currency: \"USD\",\r\n })}{\" \"}\r\n for upgrading to {subscriptionChangePreview.newSubscriptionPlan.name} subscription:\r\n
\r\n\r\n {map(invoicePreview.lineItems, (lineItem, index) => {\r\n return (\r\n
\r\n \r\n
\r\n );\r\n })}\r\n {lineItem.description}
\r\n\r\n {currencyFormatter.format(lineItem.amount, {\r\n currency: \"USD\",\r\n })}\r\n
\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n {title}
\r\n\r\n
\r\n {description}
\r\n\r\n
\r\n loading
;\r\n }\r\n takePaymentViewStore.setStripe(stripe);\r\n const { subscriptionPlan, isPaymentDisabled, paymentSuccessModal, loaderStore } = takePaymentViewStore;\r\n\r\n const subscribe = () => {\r\n // Get a reference to a mounted CardElement. Elements knows how\r\n // to find your CardElement because there can only ever be one of\r\n // each type of element.\r\n const cardElement = elements.getElement(CardElement);\r\n takePaymentViewStore.onClickSubscribe(cardElement);\r\n };\r\n\r\n return (\r\n {t(\"APPLICATION.PREMIUM.PAYMENT.TITLE\")}
\r\n\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n \r\n {t(\"APPLICATION.PREMIUM.PAYMENT.INFO.START_DATE_LABEL\")}
\r\n{t(\"APPLICATION.PREMIUM.PAYMENT.INFO.START_DATE_VALUE\")}
\r\n\r\n
\r\n );\r\n } else {\r\n return (\r\n Payment method
\r\n\r\n
\r\n );\r\n}\r\n","import React from \"react\";\r\nimport { PropTypes } from \"prop-types\";\r\nimport { useStripe, useElements, CardElement } from \"@stripe/react-stripe-js\";\r\nimport { MrbEditPage, MrbPageHeader } from \"mrb/components/layout\";\r\nimport { MrbContentLoader } from \"mrb/components/loader\";\r\nimport {\r\n CreditCardInfo,\r\n TakePaymentHeader,\r\n PaymentSuccessModal,\r\n NakiNigunPremiumBadge,\r\n NakiRadioPremiumBadge,\r\n SubscriptionPlanLoader,\r\n SubscriptionPrice,\r\n} from \"application/payment/components\";\r\nimport { StripeCreditCardField } from \"common/components\";\r\nimport { applicationDefaults } from \"common/constants\";\r\nimport { dateFormatter } from \"mrb/common/formatting\";\r\nimport { defaultTemplate } from \"common/hoc\";\r\nimport { MrbButton } from \"mrb/components/button\";\r\nimport { observer } from \"mobx-react\";\r\nimport { subscriptionPlans } from \"common/constants\";\r\n\r\nfunction UpgradeTrialTemplate({ upgradeTrialViewStore, t }) {\r\n const stripe = useStripe();\r\n const elements = useElements();\r\n\r\n if (!stripe || !elements) {\r\n // Stripe.js has not loaded yet. Make sure to disable\r\n // form submission until Stripe.js has loaded.\r\n return \r\n {premiumBadge}\r\n\r\n
\r\n \r\n
\r\n {subscriptionPlan.name}
\r\n\r\n
loading
;\r\n }\r\n upgradeTrialViewStore.setStripe(stripe);\r\n const {\r\n subscriptionPlan,\r\n isPaymentDisabled,\r\n paymentSuccessModal,\r\n loaderStore,\r\n rootStore: { premiumSubscriptionStore },\r\n } = upgradeTrialViewStore;\r\n\r\n const subscribe = () => {\r\n // Get a reference to a mounted CardElement. Elements knows how\r\n // to find your CardElement because there can only ever be one of\r\n // each type of element.\r\n const cardElement = elements.getElement(CardElement);\r\n upgradeTrialViewStore.onClickSubscribe(cardElement);\r\n };\r\n\r\n return (\r\n \r\n
\r\n\r\n \r\n \r\n \r\n )}\r\n \r\n
\r\n {t(\"APPLICATION.PREMIUM.PAYMENT.TITLE\")}
\r\n\r\n\r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n \r\n {t(\"APPLICATION.PREMIUM.PAYMENT.INFO.START_DATE_LABEL\")}
\r\n\r\n {dateFormatter.format(premiumSubscriptionStore.subscription.endDate, {\r\n format: applicationDefaults.formats.date,\r\n })}\r\n
\r\n\r\n
\r\n );\r\n } else {\r\n return (\r\n Payment method
\r\n\r\n
\r\n );\r\n}\r\n","import React from \"react\";\r\nimport { PropTypes } from \"prop-types\";\r\nimport { MrbPreviewPage } from \"mrb/components/layout\";\r\nimport { PremiumContentList, SubscriptionPlanCard } from \"application/payment/components\";\r\nimport { observer } from \"mobx-react\";\r\nimport { defaultTemplate } from \"common/hoc\";\r\nimport { map } from \"lodash\";\r\n\r\nfunction PremiumSubscriptionsTemplate({ premiumSubscriptionsViewStore, t }) {\r\n return (\r\n \r\n {premiumBadge}\r\n\r\n
\r\n \r\n
\r\n {subscriptionPlan.name}
\r\n\r\n
\r\n \r\n {subscriptionPlans && subscriptionPlans.length > 0 && (\r\n \r\n
\r\n );\r\n});\r\n\r\nPremiumSubscriptionsTemplate.propTypes = {\r\n premiumSubscriptionsViewStore: PropTypes.object.isRequired,\r\n};\r\n\r\nexport default defaultTemplate(PremiumSubscriptionsTemplate);\r\n","import React from \"react\";\r\nimport { PropTypes } from \"prop-types\";\r\nimport { MrbPreviewPage } from \"mrb/components/layout\";\r\nimport { UserSubscriptionInfo, CustomerPaymentMethodInfo } from \"application/payment/components\";\r\nimport { defaultTemplate } from \"common/hoc\";\r\nimport { observer } from \"mobx-react\";\r\nimport { mergeCss } from \"mrb/common/utils\";\r\n\r\nfunction UserSubscriptionsPreviewTemplate({ userSubscriptionsPreviewViewStore, t }) {\r\n const { pendingSubscription } = userSubscriptionsPreviewViewStore;\r\n\r\n return (\r\n \r\n {map(subscriptionPlans, (subscriptionPlan) => {\r\n return (\r\n
\r\n )}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n});\r\n\r\nexport default defaultTemplate(UserSubscriptionsPreviewTemplate);\r\n","import React from \"react\";\r\nimport { observer } from \"mobx-react\";\r\nimport { ActivateTrialTemplate } from \"themes/application/payment/pages\";\r\nimport { ActivateTrialViewStore } from \"application/payment/stores\";\r\nimport { setCurrentView } from \"mrb/core\";\r\nimport { stripeProvider } from \"common/hoc\";\r\n\r\n@stripeProvider\r\n@setCurrentView(\r\n (rootStore, componentProps) => new ActivateTrialViewStore(rootStore, componentProps),\r\n \"activateTrialViewStore\"\r\n)\r\n@observer\r\nclass ActivateTrial extends React.Component {\r\n render() {\r\n return