140 lines
4.4 KiB
JavaScript
140 lines
4.4 KiB
JavaScript
/**
|
|
* External dependencies
|
|
*/
|
|
import '@wordpress/notices';
|
|
import { render } from '@wordpress/element';
|
|
import { CustomerEffortScoreTracksContainer } from '@woocommerce/customer-effort-score';
|
|
import {
|
|
withCurrentUserHydration,
|
|
withSettingsHydration,
|
|
} from '@woocommerce/data';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import './stylesheets/_index.scss';
|
|
import { getAdminSetting } from '~/utils/admin-settings';
|
|
import { PageLayout, EmbedLayout, PrimaryLayout as NoticeArea } from './layout';
|
|
import { EmbeddedBodyLayout } from './embedded-body-layout';
|
|
import { WcAdminPaymentsGatewaysBannerSlot } from './payments/payments-settings-banner-slotfill';
|
|
import { WcAdminConflictErrorSlot } from './settings/conflict-error-slotfill.js';
|
|
import './xstate.js';
|
|
|
|
// Modify webpack pubilcPath at runtime based on location of WordPress Plugin.
|
|
// eslint-disable-next-line no-undef,camelcase
|
|
__webpack_public_path__ = global.wcAdminAssets.path;
|
|
|
|
// Modify webpack to append the ?ver parameter to JS chunk
|
|
// https://webpack.js.org/api/module-variables/#__webpack_get_script_filename__-webpack-specific
|
|
// eslint-disable-next-line no-undef,camelcase
|
|
const oldGetScriptFileNameFn = __webpack_get_script_filename__;
|
|
// eslint-disable-next-line no-undef,camelcase
|
|
__webpack_get_script_filename__ = ( chunk ) => {
|
|
const filename = oldGetScriptFileNameFn( chunk );
|
|
return `${ filename }?ver=${ window.wcAdminAssets.version }`;
|
|
};
|
|
|
|
// Modify webpack to append the ?ver parameter to CSS chunk hrefs generated by mini-css-extract-plugin
|
|
// eslint-disable-next-line no-undef,camelcase
|
|
const oldMinCssFn = __webpack_require__.miniCssF;
|
|
// eslint-disable-next-line no-undef,camelcase
|
|
__webpack_require__.miniCssF = ( chunkId ) => {
|
|
const filename = oldMinCssFn( chunkId );
|
|
return `${ filename }?ver=${ window.wcAdminAssets.version }`;
|
|
};
|
|
|
|
const appRoot = document.getElementById( 'root' );
|
|
const embeddedRoot = document.getElementById( 'woocommerce-embedded-root' );
|
|
const settingsGroup = 'wc_admin';
|
|
const hydrateUser = getAdminSetting( 'currentUserData' );
|
|
|
|
if ( appRoot ) {
|
|
let HydratedPageLayout = withSettingsHydration(
|
|
settingsGroup,
|
|
window.wcSettings.admin
|
|
)( PageLayout );
|
|
const preloadSettings = window.wcSettings.admin
|
|
? window.wcSettings.admin.preloadSettings
|
|
: false;
|
|
const hydrateSettings = preloadSettings && preloadSettings.general;
|
|
|
|
if ( hydrateSettings ) {
|
|
HydratedPageLayout = withSettingsHydration( 'general', {
|
|
general: preloadSettings.general,
|
|
} )( HydratedPageLayout );
|
|
}
|
|
if ( hydrateUser ) {
|
|
HydratedPageLayout =
|
|
withCurrentUserHydration( hydrateUser )( HydratedPageLayout );
|
|
}
|
|
render( <HydratedPageLayout />, appRoot );
|
|
} else if ( embeddedRoot ) {
|
|
let HydratedEmbedLayout = withSettingsHydration(
|
|
settingsGroup,
|
|
window.wcSettings.admin
|
|
)( EmbedLayout );
|
|
if ( hydrateUser ) {
|
|
HydratedEmbedLayout =
|
|
withCurrentUserHydration( hydrateUser )( HydratedEmbedLayout );
|
|
}
|
|
// Render the header.
|
|
render( <HydratedEmbedLayout />, embeddedRoot );
|
|
|
|
embeddedRoot.classList.remove( 'is-embed-loading' );
|
|
|
|
// Render notices just above the WP content div.
|
|
const wpBody = document.getElementById( 'wpbody-content' );
|
|
|
|
const isWcAdminSettingsPaymentPage = document.getElementById(
|
|
'wc_payment_gateways_banner_slotfill'
|
|
);
|
|
|
|
if ( isWcAdminSettingsPaymentPage ) {
|
|
render(
|
|
WcAdminPaymentsGatewaysBannerSlot(),
|
|
isWcAdminSettingsPaymentPage
|
|
);
|
|
}
|
|
|
|
const isTaxPage = document.getElementById( 'wc_conflict_error_slotfill' );
|
|
|
|
if ( isTaxPage ) {
|
|
render( WcAdminConflictErrorSlot(), isTaxPage );
|
|
}
|
|
|
|
const wrap =
|
|
wpBody.querySelector( '.wrap.woocommerce' ) ||
|
|
document.querySelector( '#wpbody-content > .woocommerce' ) ||
|
|
wpBody.querySelector( '.wrap' );
|
|
const noticeContainer = document.createElement( 'div' );
|
|
|
|
render(
|
|
<div className="woocommerce-layout">
|
|
<NoticeArea />
|
|
</div>,
|
|
wpBody.insertBefore( noticeContainer, wrap )
|
|
);
|
|
const embeddedBodyContainer = document.createElement( 'div' );
|
|
render(
|
|
<EmbeddedBodyLayout />,
|
|
wpBody.insertBefore( embeddedBodyContainer, wrap.nextSibling )
|
|
);
|
|
}
|
|
|
|
// Render the CustomerEffortScoreTracksContainer only if
|
|
// the feature flag is enabled.
|
|
if (
|
|
window.wcAdminFeatures &&
|
|
window.wcAdminFeatures[ 'customer-effort-score-tracks' ] === true
|
|
) {
|
|
// Set up customer effort score survey.
|
|
( function () {
|
|
const root = appRoot || embeddedRoot;
|
|
|
|
render(
|
|
<CustomerEffortScoreTracksContainer />,
|
|
root.insertBefore( document.createElement( 'div' ), null )
|
|
);
|
|
} )();
|
|
}
|