The My Profile page is rendered as a React component as of the 2601.XX release. This is invoke using the WordPress blocks system via the JavaScript wp scripts helper in package.json.
Related PHP Classes and Methods
My Profile is managed via the MySLP Dashboard repo (Store-Locator-Plus/myslp-dashboard).
The \MySLP_Customer_Profile class extends SLP_Base_ReactObject.
SLP_Base_ReactObject is the Store Locator Plus class that acts as the helper to wire PHP data to the JavaScript interface using the defined WordPress blocks system. WordPress blocks are , at their core, React components.
SLP_Base_ReactObject JavaScript Variable Population
This is handled via the extendReactVars method, which is usually extended by child classes.
The return PHP array end up populating the slpReact JavaScript variable.
Most of the MySLP (SaaS code) variables will return a sub-array named mySLP.
This results in the JavaScript variable slpReact.mySLP which contains SaaS specific variables.
For example:
$vars[‘mySLP’][‘subscription’] = $this->get_subscription_data();
The notifications stack uses the MySLP_Customer_Profile::add_notification to build an array of notification messages. These are then consumed by the React ProfilePanel component.
Related React Components
ProfilePanel in WordPress/wp-content/plugins/myslp-dashboard/src/profile/profile.tsx is the primary wrapper for the entire My Profile page React component.
Notifications are handled by a Snackbar component provided by the @mui/material React framework.
It is driven by the JavaScript variables slpReact.mySLP.notifications array.
Each element is an object with a message<string> and severity<string> property.
If the notifications array is not empty, the Snackbar opens and the message stack is displayed.
The severity element defines the style of the Snackbar message interface.
Subscription Notifications
These are handled by the \Customer_Profile_Subscription class.
It uses the standard SLP_Base_ReactObject extendReactVars methodology to create JavaScript variables that can be consumed by the React component. It uses the MySLP_Customer_Profile::add_notifcation() method to build the stack of notifications.
These notifications are promoted from PHP to JavaScript via \Customer_Profile_Subscription::extendReactVars as $vars[‘mySLP’][‘notifications’] = $myProfile->notifications;
Update Card
\Customer_Profile_Subscription::get_subscription_data handles changing cards by calling \stripe\MySLP_Stripe_Payments::change_card
The return result determines the notification stack that is sent back in get_subscription_data…
/* @var MySLP_Customer_Profile $myProfile */
$myProfile = MySLP_Customer_Profile::get_instance();
$changeResult = $payment_processor->change_card();
if ( is_wp_error( $changeResult ) ) {
$myProfile->add_notification( 'error', $changeResult->get_error_message() );
} else {
$myProfile->add_notification( 'success', __( 'Payment information updated.', 'myslp' ) );
}