fix: email variable replacement + icon URL path

1. Added missing base variables in get_variables():
   - site_name, site_title, store_name
   - shop_url, my_account_url
   - support_email, current_year

2. Fixed social icon URL path calculation:
   - Was using 3x dirname which pointed to 'includes/' not plugin root
   - Now uses WOONOOW_URL constant or correct 4x dirname

3. Added px-6 padding to EmailBuilder dialog body

4. Added portal container to Select component for CSS scoping
This commit is contained in:
Dwindi Ramadhana
2026-01-01 02:12:09 +07:00
parent 875ab7af34
commit 38a7a4ee23
4 changed files with 52 additions and 28 deletions

View File

@@ -302,7 +302,7 @@ export function EmailBuilder({ blocks, onChange, variables = [] }: EmailBuilderP
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<div className="space-y-4 py-4"> <div className="space-y-4 px-6 py-4">
{editingBlock?.type === 'card' && ( {editingBlock?.type === 'card' && (
<> <>
<div className="space-y-2"> <div className="space-y-2">

View File

@@ -391,7 +391,7 @@ export function RichTextEditor({
</DialogHeader> </DialogHeader>
<DialogBody> <DialogBody>
<div className="space-y-4"> <div className="space-y-4 !p-4">
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="btn-text">{__('Button Text')}</Label> <Label htmlFor="btn-text">{__('Button Text')}</Label>
<Input <Input

View File

@@ -69,8 +69,23 @@ SelectScrollDownButton.displayName =
const SelectContent = React.forwardRef< const SelectContent = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Content>, React.ElementRef<typeof SelectPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
>(({ className, children, position = "popper", ...props }, ref) => ( >(({ className, children, position = "popper", ...props }, ref) => {
<SelectPrimitive.Portal> // Get or create portal container inside the app for proper CSS scoping
const getPortalContainer = () => {
const appContainer = document.getElementById('woonoow-admin-app');
if (!appContainer) return document.body;
let portalRoot = document.getElementById('woonoow-select-portal');
if (!portalRoot) {
portalRoot = document.createElement('div');
portalRoot.id = 'woonoow-select-portal';
appContainer.appendChild(portalRoot);
}
return portalRoot;
};
return (
<SelectPrimitive.Portal container={getPortalContainer()}>
<SelectPrimitive.Content <SelectPrimitive.Content
ref={ref} ref={ref}
className={cn( className={cn(
@@ -95,7 +110,8 @@ const SelectContent = React.forwardRef<
<SelectScrollDownButton /> <SelectScrollDownButton />
</SelectPrimitive.Content> </SelectPrimitive.Content>
</SelectPrimitive.Portal> </SelectPrimitive.Portal>
)) );
})
SelectContent.displayName = SelectPrimitive.Content.displayName SelectContent.displayName = SelectPrimitive.Content.displayName
const SelectLabel = React.forwardRef< const SelectLabel = React.forwardRef<

View File

@@ -140,9 +140,12 @@ class EmailRenderer {
*/ */
private function get_variables($event_id, $data, $extra_data = []) { private function get_variables($event_id, $data, $extra_data = []) {
$variables = [ $variables = [
'site_name' => get_bloginfo('name'),
'site_title' => get_bloginfo('name'),
'store_name' => get_bloginfo('name'), 'store_name' => get_bloginfo('name'),
'store_url' => home_url(), 'store_url' => home_url(),
'site_title' => get_bloginfo('name'), 'shop_url' => get_permalink(wc_get_page_id('shop')),
'my_account_url' => get_permalink(wc_get_page_id('myaccount')),
'support_email' => get_option('admin_email'), 'support_email' => get_option('admin_email'),
'current_year' => date('Y'), 'current_year' => date('Y'),
]; ];
@@ -611,8 +614,13 @@ class EmailRenderer {
* @return string * @return string
*/ */
private function get_social_icon_url($platform, $color = 'white') { private function get_social_icon_url($platform, $color = 'white') {
// Use local PNG icons // Use plugin URL constant if available, otherwise calculate from file path
$plugin_url = plugin_dir_url(dirname(dirname(dirname(__FILE__)))); if (defined('WOONOOW_URL')) {
$plugin_url = WOONOOW_URL;
} else {
// File is at includes/Core/Notifications/EmailRenderer.php - need 4 levels up
$plugin_url = plugin_dir_url(dirname(dirname(dirname(dirname(__FILE__)))));
}
$filename = sprintf('mage--%s-%s.png', $platform, $color); $filename = sprintf('mage--%s-%s.png', $platform, $color);
return $plugin_url . 'assets/icons/' . $filename; return $plugin_url . 'assets/icons/' . $filename;
} }