@akinon/pz-theme 2.0.164-rc.0 → 2.0.164

package/src/blocks/__tests__/social-icons-theme-fallback.test.tsx

@@ -0,0 +1,268 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import type { BlockRendererProps } from '../block-renderer-registry';
+import SocialIconsListBlock from '../social-icons-list-block';
+import { ThemeSettingsProvider } from '../../theme-settings-context';
+import {
+  SOCIAL_GLYPHS,
+  platformLabel,
+  resolveSocialGlyph
+} from '../social-glyphs';
+
+/**
+ * The settings page's "Sosyal Ağlar" (`socialNetworks`) can feed a
+ * social-icons-list block — but only one that opts in with
+ * `useThemeSocialNetworks` and has no entries of its own. The block saves
+ * `icons: []` by default and the old settings page already stored networks,
+ * so an automatic fallback would make blocks that render nothing today start
+ * drawing icons on live sites.
+ */
+
+const props = (
+  properties: Record<string, unknown>,
+  extra: Partial<BlockRendererProps> = {}
+): BlockRendererProps =>
+  ({
+    block: {
+      id: 'b1',
+      type: 'social-icons-list',
+      label: 'Social Icons',
+      value: '',
+      properties,
+      styles: {},
+      order: 0,
+      hidden: false
+    },
+    placeholderId: 'footer',
+    sectionId: 's1',
+    isDesigner: false,
+    currentBreakpoint: 'desktop',
+    ...extra
+  } as unknown as BlockRendererProps);
+
+const NETWORKS = {
+  instagram: { url: 'https://instagram.com/lulu', icon: '' },
+  x: { url: 'https://x.com/lulu', icon: '' },
+  facebook: { url: 'https://facebook.com/lulu', icon: '' }
+};
+
+const renderWith = (
+  properties: Record<string, unknown>,
+  settings: Record<string, unknown> | null,
+  extra: Partial<BlockRendererProps> = {}
+) =>
+  render(
+    <ThemeSettingsProvider value={settings}>
+      <SocialIconsListBlock {...props(properties, extra)} />
+    </ThemeSettingsProvider>
+  );
+
+const platforms = (container: HTMLElement) =>
+  Array.from(container.querySelectorAll('[data-social-icon]')).map((node) =>
+    node.getAttribute('data-social-icon')
+  );
+
+describe('social-icons-list — theme social networks fallback', () => {
+  it('ignores the theme networks without the toggle', () => {
+    const { container } = renderWith(
+      { icons: [] },
+      { socialNetworks: NETWORKS }
+    );
+
+    expect(container.querySelector('[data-social-icon]')).toBeNull();
+  });
+
+  it('draws the theme networks, in stored order, when the toggle is on', () => {
+    const { container } = renderWith(
+      { icons: [], useThemeSocialNetworks: true },
+      { socialNetworks: NETWORKS }
+    );
+
+    expect(platforms(container)).toEqual(['instagram', 'x', 'facebook']);
+
+    const links = container.querySelectorAll('[data-social-icon]');
+    expect(links[0].getAttribute('href')).toBe('https://instagram.com/lulu');
+    expect(links[0].getAttribute('aria-label')).toBe('Instagram');
+    expect(links[0].getAttribute('target')).toBe('_blank');
+  });
+
+  it('reads the toggle per breakpoint and as a stored string', () => {
+    const settings = { socialNetworks: NETWORKS };
+
+    const mobileOff = renderWith(
+      { useThemeSocialNetworks: { desktop: true, mobile: false } },
+      settings,
+      { currentBreakpoint: 'mobile' }
+    );
+    expect(mobileOff.container.querySelector('[data-social-icon]')).toBeNull();
+
+    const stringOn = renderWith({ useThemeSocialNetworks: 'true' }, settings);
+    expect(platforms(stringOn.container)).toHaveLength(3);
+  });
+
+  it("keeps the block's own entries when it has any", () => {
+    const { container } = renderWith(
+      {
+        icons: [{ icon: 'youtube', link: 'https://youtube.com/@lulu' }],
+        useThemeSocialNetworks: true
+      },
+      { socialNetworks: NETWORKS }
+    );
+
+    expect(platforms(container)).toEqual(['youtube']);
+  });
+
+  it('draws the X mark for the settings key `x`', () => {
+    const { container } = renderWith(
+      { useThemeSocialNetworks: true },
+      { socialNetworks: { x: { url: 'https://x.com/lulu' } } }
+    );
+
+    const link = container.querySelector('[data-social-icon="x"]')!;
+    expect(link.getAttribute('aria-label')).toBe('X');
+    // The twitter mark is one path; the globe it used to fall back to is
+    // three shapes.
+    const glyph = link.querySelector('svg')!;
+    expect(glyph.children.length).toBe(1);
+    expect(glyph.querySelector('path')!.getAttribute('d')).toBe(
+      'M4 4l16 16M20 4L4 20'
+    );
+  });
+
+  it('treats legacy `twitter` and `x` as one network', () => {
+    const { container } = renderWith(
+      { useThemeSocialNetworks: true },
+      {
+        socialNetworks: {
+          twitter: { url: 'https://twitter.com/lulu' },
+          x: { url: 'https://x.com/lulu' }
+        }
+      }
+    );
+
+    expect(platforms(container)).toEqual(['twitter']);
+  });
+
+  it('drops a network whose link is not a safe href', () => {
+    const { container } = renderWith(
+      { useThemeSocialNetworks: true },
+      {
+        socialNetworks: {
+          facebook: { url: 'javascript:alert(1)' },
+          instagram: { url: '//evil.example/lulu' },
+          youtube: { url: '' },
+          tiktok: { url: '/\t/evil.example' },
+          linkedin: { url: 'https://linkedin.com/company/lulu' }
+        }
+      }
+    );
+
+    expect(platforms(container)).toEqual(['linkedin']);
+    expect(container.innerHTML).not.toContain('javascript:');
+    expect(container.innerHTML).not.toContain('evil.example');
+  });
+
+  it('gives a bare domain https and keeps mailto/tel links', () => {
+    const { container } = renderWith(
+      { useThemeSocialNetworks: true },
+      {
+        socialNetworks: {
+          instagram: { url: 'www.instagram.com/lulu' },
+          email: { url: 'mailto:hello@lulu.example' },
+          phone: { url: 'tel:+905550000000' }
+        }
+      }
+    );
+
+    const hrefs = Array.from(
+      container.querySelectorAll('[data-social-icon]')
+    ).map((node) => node.getAttribute('href'));
+    expect(hrefs).toEqual([
+      'https://www.instagram.com/lulu',
+      'mailto:hello@lulu.example',
+      'tel:+905550000000'
+    ]);
+  });
+
+  it('renders an uploaded SVG only as an image, never as markup', () => {
+    const markup =
+      '<svg xmlns="http://www.w3.org/2000/svg" onload="alert(1)"><script>alert(2)</script><path d="M0 0h24v24H0z"/></svg>';
+    const { container } = renderWith(
+      { useThemeSocialNetworks: true },
+      {
+        socialNetworks: {
+          facebook: { url: 'https://facebook.com/lulu', icon: markup }
+        }
+      }
+    );
+
+    const link = container.querySelector('[data-social-icon="facebook"]')!;
+    const image = link.querySelector('img')!;
+
+    expect(image.getAttribute('src')).toMatch(
+      /^data:image\/svg\+xml;charset=utf-8,/
+    );
+    expect(decodeURIComponent(image.getAttribute('src')!.split(',')[1])).toBe(
+      markup
+    );
+    expect(image.getAttribute('alt')).toBe('');
+    expect(image.getAttribute('aria-hidden')).toBe('true');
+    expect(image.getAttribute('data-part')).toBe('icon');
+    expect(link.querySelector('svg')).toBeNull();
+    expect(container.querySelector('script')).toBeNull();
+  });
+
+  it('falls back to the platform glyph when the uploaded icon is unusable', () => {
+    const { container } = renderWith(
+      { useThemeSocialNetworks: true },
+      {
+        socialNetworks: {
+          facebook: {
+            url: 'https://facebook.com/lulu',
+            icon: 'javascript:alert(1)'
+          }
+        }
+      }
+    );
+
+    const link = container.querySelector('[data-social-icon="facebook"]')!;
+    expect(link.querySelector('img')).toBeNull();
+    expect(link.querySelector('svg[data-part="icon"]')).not.toBeNull();
+  });
+
+  it('says why it is empty in the designer', () => {
+    const { container } = renderWith(
+      { useThemeSocialNetworks: true },
+      { socialNetworks: {} },
+      { isDesigner: true }
+    );
+
+    expect(container.textContent).toContain(
+      'Social icons (no theme social networks)'
+    );
+  });
+
+  it('renders nothing on the storefront when the theme has no usable network', () => {
+    const { container } = renderWith({ useThemeSocialNetworks: true }, null);
+
+    expect(container.innerHTML).toBe('');
+  });
+});
+
+describe('social glyph aliases', () => {
+  it('resolves `x` to the twitter mark and keeps the table itself unchanged', () => {
+    expect(resolveSocialGlyph('x')).toBe(SOCIAL_GLYPHS.twitter);
+    expect(resolveSocialGlyph('facebook')).toBe(SOCIAL_GLYPHS.facebook);
+    expect(Object.prototype.hasOwnProperty.call(SOCIAL_GLYPHS, 'x')).toBe(
+      false
+    );
+    expect(platformLabel('x')).toBe('X');
+  });
+
+  it('never resolves an inherited property as a glyph', () => {
+    expect(resolveSocialGlyph('constructor')).toBeUndefined();
+    expect(resolveSocialGlyph('toString')).toBeUndefined();
+    expect(resolveSocialGlyph('myspace')).toBeUndefined();
+  });
+});

package/src/blocks/__tests__/text-block.test.tsx

@@ -2,31 +2,9 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import TextBlock from '../text-block';
 
-// The page's language and the storefront's default, as the localization
-// provider reports them. Most cases run on an English-default store showing
-// English; the fallback case moves both.
-const mockLocalization = { locale: 'en-us', defaultLocaleValue: 'en-us' };
-
-jest.mock('@akinon/next/hooks', () => ({
-  __esModule: true,
-  useLocalization: () => ({
-    t: (path: string) => path,
-    setLocale: () => {},
-    setCurrency: () => {},
-    locale: mockLocalization.locale,
-    currency: 'USD',
-    locales: [{ value: 'en-us' }, { value: 'tr-tr' }],
-    currencies: ['USD'],
-    defaultLocaleValue: mockLocalization.defaultLocaleValue,
-    defaultCurrencyCode: 'USD',
-    localeUrlStrategy: 'hide-default-locale'
-  })
-}));
-
-beforeEach(() => {
-  mockLocalization.locale = 'en-us';
-  mockLocalization.defaultLocaleValue = 'en-us';
-});
+// The mocked useLocalization (jest/__mocks__/akinon-next-hooks.js) returns
+// locale: 'en-us'. process.env.NEXT_PUBLIC_DEFAULT_LOCALE is unset in the
+// jest env, so the component's defaultLocale falls back to 'en'.
 
 const renderBlock = (value: unknown, styles?: Record<string, unknown>) => {
   const block: any = { id: 'b1', type: 'text', value, styles };
@@ -56,16 +34,10 @@ describe('TextBlock value-shape resolution', () => {
     );
   });
 
-  it("falls back to the storefront's default language when the active one is absent", () => {
-    // A Turkish-default store showing German. The entry under `en` is what
-    // the block used to show: its default was read from an env variable
-    // that falls back to English, not from the storefront (ZERO-5296).
-    mockLocalization.locale = 'de-de';
-    mockLocalization.defaultLocaleValue = 'tr-tr';
-
-    const { container } = renderBlock({ en: 'EN', 'tr-tr': 'TR' });
+  it('falls back to defaultLocale ("en") when active locale is absent', () => {
+    const { container } = renderBlock({ en: 'EN', fr: 'FR' });
     expect((container.querySelector('div') as HTMLDivElement).innerHTML).toBe(
-      'TR'
+      'EN'
     );
   });
 

package/src/blocks/accordion-block.tsx

@@ -2,6 +2,8 @@ import React, { useState } from 'react';
 import { BlockRendererProps } from './block-renderer-registry';
 import ThemeBlock from '../theme-block';
 import { partAttrs } from '../utils';
+import { useThemeSettingsContext } from '../theme-settings-context';
+import { themeOwnPartStyleAttributes } from '../utils/theme-settings-css';
 
 /**
  * Accordion: a heading row that toggles a content panel.
@@ -30,6 +32,11 @@ const AccordionBlock: React.FC<BlockRendererProps> = ({
   currentBreakpoint = 'desktop'
 }) => {
   const childBlocks = block.blocks || [];
+  const themeSettings = useThemeSettingsContext();
+  // The header, panel and content parts hold the child blocks, so a colour
+  // or type authored on one of them has to keep reaching the text inside.
+  const ownPartStyle = (part: string) =>
+    themeOwnPartStyleAttributes(block.styles, part, themeSettings);
 
   const defaultOpen = block.properties?.defaultOpen === true;
   const [isOpen, setIsOpen] = useState(defaultOpen);
@@ -140,6 +147,7 @@ const AccordionBlock: React.FC<BlockRendererProps> = ({
     <>
       <div
         {...partAttrs('header', { open: isOpen })}
+        {...ownPartStyle('header')}
         style={{ cursor: 'pointer' }}
         onClick={toggleAccordion}
       >
@@ -148,6 +156,7 @@ const AccordionBlock: React.FC<BlockRendererProps> = ({
 
       <div
         {...partAttrs('panel', { open: isOpen })}
+        {...ownPartStyle('panel')}
         style={{
           display: 'grid',
           gridTemplateRows: isOpen ? '1fr' : '0fr',
@@ -156,6 +165,7 @@ const AccordionBlock: React.FC<BlockRendererProps> = ({
       >
         <div
           {...partAttrs('content', { open: isOpen })}
+          {...ownPartStyle('content')}
           style={{ overflow: 'hidden' }}
         >
           {renderContent()}

package/src/blocks/hotspot-block.tsx

@@ -4,6 +4,7 @@ import React, { useState } from 'react';
 import { BlockRendererProps } from './block-renderer-registry';
 import { getResponsiveValue, getCSSStyles, resolveForceOpen } from '../utils';
 import { useThemeSettingsContext } from '../theme-settings-context';
+import { themeOwnStyleAttributes } from '../utils/theme-settings-css';
 import { useLocalization } from '@akinon/next/hooks';
 import { useLocalizeHref } from '../hooks/use-localize-href';
 import ThemeBlock from '../theme-block';
@@ -109,7 +110,11 @@ const HotspotBlock = ({
       </button>
 
       {(isOpen || forcedOpen) && (
-        <div className="absolute left-1/2 bottom-full mb-2 -translate-x-1/2 w-64 bg-white p-4 rounded-lg shadow-xl z-20 text-left text-sm pointer-events-auto">
+        <div
+          className="absolute left-1/2 bottom-full mb-2 -translate-x-1/2 w-64 bg-white p-4 rounded-lg shadow-xl z-20 text-left text-sm pointer-events-auto"
+          // `text-sm` sets the size of the blocks inside the tooltip.
+          {...themeOwnStyleAttributes(null, themeSettings, { type: true })}
+        >
           <div className="flex justify-between items-start mb-2">
             {title && <h3 className="font-bold text-gray-900">{title}</h3>}
             <button

package/src/blocks/listing-breadcrumb-block.tsx

@@ -3,6 +3,8 @@
 import React from 'react';
 import { ThemeLink as NextLink } from '../components/theme-link';
 import { getResponsiveValue, partAttrs } from '../utils';
+import { readThemeBreadcrumbSeparator } from '../utils/theme-settings-readers';
+import { useThemeSettingsContext } from '../theme-settings-context';
 import { BlockRendererProps } from './block-renderer-registry';
 import {
   listingPlaceholderStyle,
@@ -33,9 +35,16 @@ const ListingBreadcrumbBlock = ({
   isDesigner = false
 }: BlockRendererProps) => {
   const listing = useListingContext();
+  const themeSettings = useThemeSettingsContext();
 
+  // An unset separator follows the theme's breadcrumb setting; a
+  // stored one (including '/') keeps winning, so saved blocks render as before.
   const separator = String(
-    getResponsiveValue(block.properties?.separator, currentBreakpoint, '/')
+    getResponsiveValue(
+      block.properties?.separator,
+      currentBreakpoint,
+      readThemeBreadcrumbSeparator(themeSettings) ?? '/'
+    )
   );
   const showHome = readToggle(
     block.properties?.showHome,

package/src/blocks/order-detail-block.tsx

@@ -9,7 +9,6 @@ import { getResponsiveValue, partAttrs } from '../utils';
 import { formatDate, formatMoney } from './commerce-format';
 import { readMoneyStyle } from './money-style';
 import { hasItemTemplate, ItemTemplateList } from './item-template';
-import { renderOrderLineActions } from './order-line-actions';
 import { BlockRendererProps } from './block-renderer-registry';
 import {
   DesignerPlaceholder,
@@ -25,7 +24,7 @@ import {
   useOrderActionRules
 } from '../utils/order-action-rules';
 
-type OrderItemLike = {
+interface OrderItemLike {
   id?: number;
   price?: string;
   quantity?: string | number;
@@ -44,7 +43,7 @@ type OrderItemLike = {
     absolute_url?: string;
     attributes?: Record<string, unknown>;
   } | null;
-};
+}
 
 interface AddressLike {
   first_name?: string;
@@ -409,7 +408,7 @@ const formatAddress = (address: AddressLike | null | undefined): string[] => {
  * currencyText, currencyPosition.
  * Parts: detail, header, number, date, header-total, status,
  * invoice-link, cancel-link, return-link, list, item, image, name, quantity,
- * color, size, item-status, item-tracking, item-return-code, item-actions,
+ * color, size, item-status, item-tracking, item-return-code,
  * item-return-method, item-return-carrier, item-pickup-date, price, shipment,
  * delivery, tracking, addresses, address, address-label, totals, total-row,
  * total-label, total-value, grand-total, payment-info, payment-info-label.
@@ -956,21 +955,6 @@ const OrderDetailBlock = ({
                 showPickupDate && returnDetails.pickupDate
                   ? formatPickupDate(returnDetails.pickupDate, locale)
                   : '';
-              const lineActions = renderOrderLineActions({
-                order,
-                line,
-                isDesigner
-              });
-              const showLineMeta =
-                showShipmentStatus &&
-                Boolean(
-                  item.status?.label ||
-                    trackingValue ||
-                    returnCodeValue ||
-                    returnMethodValue ||
-                    returnCarrierValue ||
-                    pickupDateValue
-                );
 
               return (
                 <li
@@ -1086,100 +1070,98 @@ const OrderDetailBlock = ({
                       </div>
                     </div>
 
-                    {(showLineMeta || lineActions) && (
-                      <div
-                        style={{
-                          display: 'flex',
-                          flexDirection: 'column',
-                          alignItems: isMobile ? 'flex-start' : 'flex-end',
-                          textAlign: isMobile ? 'left' : 'right',
-                          gap: '4px',
-                          flex: isMobile ? '1 1 100%' : '0 0 auto'
-                        }}
-                      >
-                        {lineActions && (
-                          <div
-                            data-order-detail-item-actions=""
-                            {...partAttrs('item-actions')}
-                          >
-                            {lineActions}
-                          </div>
-                        )}
-                        {showLineMeta && item.status?.label && (
-                          <span
-                            data-order-detail-item-status=""
-                            data-order-status-value={item.status.value}
-                            {...partAttrs('item-status')}
-                            style={{ display: 'inline-block' }}
-                          >
-                            {item.status.label}
-                          </span>
-                        )}
-                        {/* Label and value in their own spans, so a
-                            composition can colour them apart. */}
-                        {showLineMeta && returnMethodValue && (
-                          <span
-                            data-order-detail-item-return-method=""
-                            {...partAttrs('item-return-method')}
-                            style={{ opacity: 0.8 }}
-                          >
-                            <span data-label="">{returnMethodLabel}</span>{' '}
-                            <span data-value="">{returnMethodValue}</span>
-                          </span>
-                        )}
-                        {showLineMeta && returnCarrierValue && (
-                          <span
-                            data-order-detail-item-return-carrier=""
-                            {...partAttrs('item-return-carrier')}
-                            style={{ opacity: 0.8 }}
-                          >
-                            <span data-label="">{returnCarrierLabel}</span>{' '}
-                            <span data-value="">{returnCarrierValue}</span>
-                          </span>
-                        )}
-                        {showLineMeta && pickupDateValue && (
-                          <span
-                            data-order-detail-item-pickup-date=""
-                            {...partAttrs('item-pickup-date')}
-                            style={{ opacity: 0.8 }}
-                          >
-                            <span data-label="">{pickupDateLabel}</span>{' '}
-                            <span data-value="">{pickupDateValue}</span>
-                          </span>
-                        )}
-                        {showLineMeta && trackingValue && (
-                          <span
-                            data-order-detail-item-tracking=""
-                            {...partAttrs('item-tracking')}
-                            style={{ opacity: 0.8 }}
-                          >
-                            {lineTrackingLabel}{' '}
-                            {item.tracking_url ? (
-                              <a
-                                href={isDesigner ? '#' : item.tracking_url}
-                                onClick={guard}
-                                target={isDesigner ? undefined : '_blank'}
-                                rel="noreferrer"
-                                style={{ color: 'inherit' }}
-                              >
-                                {item.tracking_number || item.tracking_url}
-                              </a>
-                            ) : (
-                              trackingValue
-                            )}
-                          </span>
-                        )}
-                        {showLineMeta && returnCodeValue && (
-                          <span
-                            data-order-detail-item-return-code=""
-                            {...partAttrs('item-return-code')}
-                            style={{ opacity: 0.8 }}
-                          >
-                            {returnCodeLabel} {returnCodeValue}
-                          </span>
-                        )}
-                      </div>
-                    )}
+                    {showShipmentStatus &&
+                      (item.status?.label ||
+                        trackingValue ||
+                        returnCodeValue ||
+                        returnMethodValue ||
+                        returnCarrierValue ||
+                        pickupDateValue) && (
+                        <div
+                          style={{
+                            display: 'flex',
+                            flexDirection: 'column',
+                            alignItems: isMobile ? 'flex-start' : 'flex-end',
+                            textAlign: isMobile ? 'left' : 'right',
+                            gap: '4px',
+                            flex: isMobile ? '1 1 100%' : '0 0 auto'
+                          }}
+                        >
+                          {item.status?.label && (
+                            <span
+                              data-order-detail-item-status=""
+                              data-order-status-value={item.status.value}
+                              {...partAttrs('item-status')}
+                              style={{ display: 'inline-block' }}
+                            >
+                              {item.status.label}
+                            </span>
+                          )}
+                          {/* Label and value in their own spans, so a
+                              composition can colour them apart. */}
+                          {returnMethodValue && (
+                            <span
+                              data-order-detail-item-return-method=""
+                              {...partAttrs('item-return-method')}
+                              style={{ opacity: 0.8 }}
+                            >
+                              <span data-label="">{returnMethodLabel}</span>{' '}
+                              <span data-value="">{returnMethodValue}</span>
+                            </span>
+                          )}
+                          {returnCarrierValue && (
+                            <span
+                              data-order-detail-item-return-carrier=""
+                              {...partAttrs('item-return-carrier')}
+                              style={{ opacity: 0.8 }}
+                            >
+                              <span data-label="">{returnCarrierLabel}</span>{' '}
+                              <span data-value="">{returnCarrierValue}</span>
+                            </span>
+                          )}
+                          {pickupDateValue && (
+                            <span
+                              data-order-detail-item-pickup-date=""
+                              {...partAttrs('item-pickup-date')}
+                              style={{ opacity: 0.8 }}
+                            >
+                              <span data-label="">{pickupDateLabel}</span>{' '}
+                              <span data-value="">{pickupDateValue}</span>
+                            </span>
+                          )}
+                          {trackingValue && (
+                            <span
+                              data-order-detail-item-tracking=""
+                              {...partAttrs('item-tracking')}
+                              style={{ opacity: 0.8 }}
+                            >
+                              {lineTrackingLabel}{' '}
+                              {item.tracking_url ? (
+                                <a
+                                  href={isDesigner ? '#' : item.tracking_url}
+                                  onClick={guard}
+                                  target={isDesigner ? undefined : '_blank'}
+                                  rel="noreferrer"
+                                  style={{ color: 'inherit' }}
+                                >
+                                  {item.tracking_number || item.tracking_url}
+                                </a>
+                              ) : (
+                                trackingValue
+                              )}
+                            </span>
+                          )}
+                          {returnCodeValue && (
+                            <span
+                              data-order-detail-item-return-code=""
+                              {...partAttrs('item-return-code')}
+                              style={{ opacity: 0.8 }}
+                            >
+                              {returnCodeLabel} {returnCodeValue}
+                            </span>
+                          )}
+                        </div>
+                      )}
                   </div>
                 </li>
               );