once-campfire/app/views/pwa/_browser_settings.html.erb

<% unless (platform.safari? || platform.chrome?) && platform.ios? %>
  <details class="notifications-help" data-notifications-target="details">
    <summary class="btn">
      <%= image_tag "external/web.svg", aria: { hidden: "true" }, size: 20 %>
      <strong>Check your <%= platform.browser.capitalize %> settings</strong>
      <%= image_tag "disclosure.svg", aria: { hidden: "true" }, size: 10, class: "disclosure" %>
    </summary>

    <% case
      when platform.firefox? && platform.android? %>
        <ol>
          <li>Tap <em><%= image_tag "lock.svg", alt: "the View site information button", size: 20 %></em> in the address bar.</li>
          <li>Tap <em>Notification</em> to change to <em>Allowed</em>.</li>
        </ol>
      <% when platform.edge? && platform.desktop? %>
        <h2 class="txt-normal txt-medium margin-block-start">Turn on notifications for this website.</h2>
        <ol>
          <li>Click <em><%= image_tag "lock.svg", alt: "the View site information button", size: 20 %></em> left of the address bar.</li>
          <li>Under <em>Permissions for this site &gt; Notifications</em>, choose <em>Allow</em>.</li>
        </ol>
        <h2 class="txt-normal txt-medium margin-block-start">Turn on notifications for <%= platform.browser.capitalize %>.</h2>
        <ol>
          <% if platform.windows? %>
            <li>Click <em>Start</em>, then <em>Settings</em>.</li>
            <li>Go to <em>System &gt; Notification</em>.</li>
            <li>Click <em><%= image_tag "external/switch.svg", alt: "the switch", size: 22 %></em> <em>ON</em> for <%= platform.browser.capitalize %>.</li>
          <% else %>
            <li>Click <em aria-label="the Apple menu"></em> in the top left.</li>
            <li>Click <em>System Settings…</em>.</li>
            <li>Click <em>Notifications</em>.</li>
            <li>Click <em><%= platform.browser.capitalize %></em>.</li>
            <li>Click <em><%= image_tag "external/switch.svg", alt: "the switch", size: 22 %></em> to <em>Allow notifications</em>.</li>
          <% end %>
        </ol>
      <% when platform.firefox? && platform.desktop? %>
        <h2 class="txt-normal txt-medium margin-block-start">Turn on notifications for this website.</h2>
        <ol>
          <li>Click <em><%= platform.browser.capitalize %></em> in the top left.</li>
          <li>Click <em>Settings…</em>.</li>
          <li>Click <em>Privacy & Security</em> in the sidebar.</li>
          <li>Scroll down to <em>Permissions</em>.</li>
          <li>Click <em>Settings</em> next to <em>Notifications</em>.</li>
          <li>Select <em>Allow</em> next to <em><%= root_url %></em>.</li>
        </ol>

        <h2 class="txt-normal txt-medium margin-block-start">Turn on notifications for <%= platform.browser.capitalize %>.</h2>
        <ol>
          <% if platform.windows? %>
            <li>Click <em>Start</em>, then <em>Settings</em>.</li>
            <li>Go to <em>System &gt; Notification</em>.</li>
            <li>Click <em><%= image_tag "external/switch.svg", alt: "the toggle button", size: 22 %></em> <em>ON</em> for <%= platform.browser.capitalize %>.</li>
          <% else %>
            <li>Click <em aria-label="the Apple menu"></em> in the top left.</li>
            <li>Click <em>System Settings…</em>.</li>
            <li>Click <em>Notifications</em>.</li>
            <li>Click <em><%= platform.browser.capitalize %></em>.</li>
            <li>Click <em><%= image_tag "external/switch.svg", alt: "the switch", size: 22 %></em> to <em>Allow notifications</em>.</li>
          <% end %>
        </ol>
      <% when platform.chrome? && platform.desktop? %>
        <h2 class="txt-normal txt-medium margin-block-start">Turn on notifications for this website.</h2>
        <ol>
          <li>Click the <em><%= image_tag "external/sliders.svg", alt: "View site information", size: 20 %></em> icon in the address bar.</li>
          <li>Click <em>Site Settings</em>.</li>
          <li>Ensure notifications are <em>Allowed</em>.</li>
        </ol>

        <h2 class="txt-normal txt-medium margin-block-start">Turn on notifications for <%= platform.browser.capitalize %>.</h2>
        <ol>
          <% if platform.windows? %>
            <li>Click <em>Start</em>, then <em>Settings</em>.</li>
            <li>Go to <em>System &gt; Notification</em>.</li>
            <li>Click <em><%= image_tag "external/switch.svg", alt: "the switch", size: 22 %></em> <em>ON</em> for <%= platform.browser.capitalize %>.</li>
          <% else %>
            <li>Click <em aria-label="the Apple menu"></em> in the top left.</li>
            <li>Click <em>System Settings…</em>.</li>
            <li>Click <em>Notifications</em>.</li>
            <li>Click <em><%= platform.browser.capitalize %></em>.</li>
            <li>Click <em><%= image_tag "external/switch.svg", alt: "the switch", size: 22 %></em> to <em>Allow notifications</em>.</li>
          <% end %>
        </ol>
      <% when platform.chrome? && platform.android? %>
        <ol>
          <li>Tap the <em><%= image_tag "menu-dots-vertical.svg", alt: "More options", size: 16 %></em> menu button.</li>
          <li>Tap <em>Settings</em>.</li>
          <li>Tap <em>Notifications</em>.</li>
          <li>Tap <em><%= image_tag "external/switch.svg", alt: "the switch", size: 22 %></em> to <em>Allow <%= platform.browser.capitalize %> notifications</em>.</li>
          <li>Tap <em><%= image_tag "external/switch.svg", alt: "the switch", size: 22 %></em> next to <em>Web apps</em>.</li>
          <li>Tap <em><%= image_tag "notification-bell-alert.svg", alt: "the notification bell", size: 16 %></em> and select <em>Allow</em>.</li>
        </ol>
      <% when platform.safari? && platform.desktop? %>
        <ol>
          <li>Click <em><%= platform.browser.capitalize %></em> in the top left.</li>
          <li>Click <em>Settings…</em>.</li>
          <li>Click the <em>Websites</em> tab.</li>
          <li>Click <em>Notifications</em> in the sidebar.</li>
          <li>Click <em><%= root_url %></em> in the list.</li>
          <li>Select <em>Allow</em>.</li>
        </ol>
      <% else %>
        <p>Ensure notifications are enabled for <em><%= root_url %></em> in your web browser settings.</p>
    <% end %>
  </details>
<% end %>