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,33 +69,49 @@ 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
<SelectPrimitive.Content const getPortalContainer = () => {
ref={ref} const appContainer = document.getElementById('woonoow-admin-app');
className={cn( if (!appContainer) return document.body;
"relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
position === "popper" && let portalRoot = document.getElementById('woonoow-select-portal');
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", if (!portalRoot) {
className portalRoot = document.createElement('div');
)} portalRoot.id = 'woonoow-select-portal';
position={position} appContainer.appendChild(portalRoot);
{...props} }
> return portalRoot;
<SelectScrollUpButton /> };
<SelectPrimitive.Viewport
return (
<SelectPrimitive.Portal container={getPortalContainer()}>
<SelectPrimitive.Content
ref={ref}
className={cn( className={cn(
"p-1", "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
position === "popper" && position === "popper" &&
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]" "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
className
)} )}
position={position}
{...props}
> >
{children} <SelectScrollUpButton />
</SelectPrimitive.Viewport> <SelectPrimitive.Viewport
<SelectScrollDownButton /> className={cn(
</SelectPrimitive.Content> "p-1",
</SelectPrimitive.Portal> position === "popper" &&
)) "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
)}
>
{children}
</SelectPrimitive.Viewport>
<SelectScrollDownButton />
</SelectPrimitive.Content>
</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;
} }