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.