From ad2a7f2f1302589690b0c450097889cea1719076 Mon Sep 17 00:00:00 2001
From: Anthony Shull <ashull@mbta.com>
Date: Fri, 6 Dec 2024 08:30:04 -0600
Subject: [PATCH] Add walking legs to the trip plan details (#2246)

* walking leg nearly complete

* update to use the latest metro

* docs

* format

* remove extra

* remove id from accordion

* change gray color

* mix lock

* mix format more files
---
 lib/dotcom_web/components/components.ex       |  6 +--
 .../live_components/trip_planner_form.ex      | 18 +++----
 .../trip_planner_results_section.ex           |  8 +--
 lib/dotcom_web/components/route_symbols.ex    |  2 +-
 .../trip_planner/itinerary_detail.ex          | 31 ++++++-----
 .../trip_planner/itinerary_summary.ex         | 12 ++---
 lib/dotcom_web/components/trip_planner/leg.ex | 16 +++---
 .../components/trip_planner/walking_leg.ex    | 53 +++++++++++++++++++
 lib/dotcom_web/live/admin.ex                  |  4 +-
 .../live/admin/trip_plan_feedback.ex          |  4 +-
 lib/dotcom_web/live/trip_planner.ex           |  8 +--
 lib/dotcom_web/templates/alert/show.html.heex | 26 ++++-----
 .../templates/error/error_layout.html.heex    | 12 ++---
 .../fare/proposed_sales_locations.html.heex   | 26 ++++-----
 .../fare/retail_sales_locations.html.heex     | 12 ++---
 .../templates/layout/_new_header.html.heex    |  8 +--
 .../layout/_new_nav_mobile.html.heex          | 10 ++--
 .../templates/layout/admin.html.heex          |  6 +--
 .../templates/layout/preview.html.heex        |  2 +-
 lib/dotcom_web/templates/page/menu.html.heex  |  6 +--
 .../trip_plan/_leg_summary.html.heex          | 16 +++---
 .../trip_plan/_mobile_trip_summary.html.heex  |  4 +-
 .../templates/trip_plan/_options.html.heex    |  8 +--
 .../trip_plan/_time_inputs.html.heex          |  2 +-
 .../templates/trip_plan/index.html.heex       |  6 +--
 lib/dotcom_web/templates/vote/show.html.heex  | 12 ++---
 mix.exs                                       |  4 +-
 mix.lock                                      |  4 +-
 test/dotcom_web/components_test.exs           |  4 +-
 29 files changed, 191 insertions(+), 139 deletions(-)
 create mode 100644 lib/dotcom_web/components/trip_planner/walking_leg.ex

diff --git a/lib/dotcom_web/components/components.ex b/lib/dotcom_web/components/components.ex
index 2861ccc4b3..65ab9aed98 100644
--- a/lib/dotcom_web/components/components.ex
+++ b/lib/dotcom_web/components/components.ex
@@ -66,7 +66,7 @@ defmodule DotcomWeb.Components do
         />
         <div class="c-search-bar__autocomplete-results" />
       </div>
-      <%= render_slot(@inner_block) %>
+      {render_slot(@inner_block)}
     </div>
     """
   end
@@ -81,8 +81,8 @@ defmodule DotcomWeb.Components do
 
     ~H"""
     <div class={"error-container rounded #{@padding_class}"}>
-      <p :if={@title} class="font-bold mb-2"><%= @title %></p>
-      <%= render_slot(@inner_block) %>
+      <p :if={@title} class="font-bold mb-2">{@title}</p>
+      {render_slot(@inner_block)}
     </div>
     """
   end
diff --git a/lib/dotcom_web/components/live_components/trip_planner_form.ex b/lib/dotcom_web/components/live_components/trip_planner_form.ex
index 7ff7142b4d..0d37f2e01d 100644
--- a/lib/dotcom_web/components/live_components/trip_planner_form.ex
+++ b/lib/dotcom_web/components/live_components/trip_planner_form.ex
@@ -73,7 +73,7 @@ defmodule DotcomWeb.Components.LiveComponents.TripPlannerForm do
               />
             </.inputs_for>
             <.error_container :for={{msg, _} <- f[field].errors} :if={used_input?(f[field])}>
-              <%= msg %>
+              {msg}
             </.error_container>
           </.algolia_autocomplete>
         </div>
@@ -93,7 +93,7 @@ defmodule DotcomWeb.Components.LiveComponents.TripPlannerForm do
             :for={{msg, _} <- f[:datetime_type].errors}
             :if={used_input?(f[:datetime_type])}
           >
-            <%= msg %>
+            {msg}
           </.error_container>
           <.live_component
             :if={@show_datepicker}
@@ -103,14 +103,14 @@ defmodule DotcomWeb.Components.LiveComponents.TripPlannerForm do
             id={:datepicker}
           />
           <.error_container :for={{msg, _} <- f[:datetime].errors} :if={used_input?(f[:datetime])}>
-            <%= msg %>
+            {msg}
           </.error_container>
         </div>
         <div>
           <.fieldset id="modes" legend="Modes">
-            <.accordion id="accordion">
+            <.accordion variant="contained">
               <:heading>
-                <%= Modes.selected_modes(input_value(f, :modes)) %>
+                {Modes.selected_modes(input_value(f, :modes))}
               </:heading>
               <:content>
                 <div class="flex flex-col gap-05 px-2">
@@ -124,12 +124,10 @@ defmodule DotcomWeb.Components.LiveComponents.TripPlannerForm do
                   </.inputs_for>
                 </div>
               </:content>
-              <:extra :if={used_input?(f[:modes])}>
-                <.error_container :for={{msg, _} <- f[:modes].errors}>
-                  <%= msg %>
-                </.error_container>
-              </:extra>
             </.accordion>
+            <.error_container :for={{msg, _} <- f[:modes].errors}>
+              {msg}
+            </.error_container>
           </.fieldset>
           <div class="inline-flex items-center gap-1">
             <.input type="checkbox" field={f[:wheelchair]} label="Prefer accessible routes" />
diff --git a/lib/dotcom_web/components/live_components/trip_planner_results_section.ex b/lib/dotcom_web/components/live_components/trip_planner_results_section.ex
index 321f041078..0d0f9362d5 100644
--- a/lib/dotcom_web/components/live_components/trip_planner_results_section.ex
+++ b/lib/dotcom_web/components/live_components/trip_planner_results_section.ex
@@ -28,7 +28,7 @@ defmodule DotcomWeb.Components.LiveComponents.TripPlannerResultsSection do
       "border border-solid border-slate-400"
     ]}>
       <div :if={@error} class="w-full p-4 text-rose-400">
-        <%= inspect(@error) %>
+        {inspect(@error)}
       </div>
       <.async_result :let={results} assign={@results}>
         <div
@@ -86,13 +86,13 @@ defmodule DotcomWeb.Components.LiveComponents.TripPlannerResultsSection do
         :if={summary.tag}
         class="whitespace-nowrap leading-none font-bold font-heading text-sm uppercase bg-brand-primary-darkest text-white px-3 py-2 mb-3 -ml-4 -mt-4 rounded-br-lg w-min"
       >
-        <%= summary.tag %>
+        {summary.tag}
       </div>
       <.itinerary_summary summary={summary} />
       <div class="flex justify-end items-center">
         <div :if={Enum.count(summary.next_starts) > 0} class="grow text-sm text-grey-dark">
-          Similar trips depart at <%= Enum.map(summary.next_starts, &format_datetime_short/1)
-          |> Enum.join(", ") %>
+          Similar trips depart at {Enum.map(summary.next_starts, &format_datetime_short/1)
+          |> Enum.join(", ")}
         </div>
         <button
           class="btn-link font-semibold underline"
diff --git a/lib/dotcom_web/components/route_symbols.ex b/lib/dotcom_web/components/route_symbols.ex
index e87126d9d8..3d922fc42e 100644
--- a/lib/dotcom_web/components/route_symbols.ex
+++ b/lib/dotcom_web/components/route_symbols.ex
@@ -68,7 +68,7 @@ defmodule DotcomWeb.Components.RouteSymbols do
 
     ~H"""
     <div class={"#{@class} #{@cva_class} font-heading whitespace-nowrap w-min font-bold inline-flex items-center justify-center leading-[1]"}>
-      <%= @route.name %>
+      {@route.name}
     </div>
     """
   end
diff --git a/lib/dotcom_web/components/trip_planner/itinerary_detail.ex b/lib/dotcom_web/components/trip_planner/itinerary_detail.ex
index 0cef0b9786..56a677b9ae 100644
--- a/lib/dotcom_web/components/trip_planner/itinerary_detail.ex
+++ b/lib/dotcom_web/components/trip_planner/itinerary_detail.ex
@@ -6,7 +6,8 @@ defmodule DotcomWeb.Components.TripPlanner.ItineraryDetail do
 
   use DotcomWeb, :component
 
-  import DotcomWeb.Components.TripPlanner.Leg
+  import DotcomWeb.Components.TripPlanner.Leg, only: [leg: 1]
+  import DotcomWeb.Components.TripPlanner.WalkingLeg, only: [walking_leg: 1]
 
   alias Dotcom.TripPlan.PersonalDetail
 
@@ -30,7 +31,7 @@ defmodule DotcomWeb.Components.TripPlanner.ItineraryDetail do
           phx-value-trip-index={index}
           phx-target={@target}
         >
-          <%= Timex.format!(itinerary.start, "%-I:%M%p", :strftime) %>
+          {Timex.format!(itinerary.start, "%-I:%M%p", :strftime)}
         </.depart_at_button>
       </div>
       <.specific_itinerary_detail itinerary={@selected_itinerary} />
@@ -55,7 +56,7 @@ defmodule DotcomWeb.Components.TripPlanner.ItineraryDetail do
       ]}
       {@rest}
     >
-      <%= render_slot(@inner_block) %>
+      {render_slot(@inner_block)}
     </button>
     """
   end
@@ -73,19 +74,23 @@ defmodule DotcomWeb.Components.TripPlanner.ItineraryDetail do
     ~H"""
     <div class="mt-4">
       <div>
-        Depart at <%= Timex.format!(@itinerary.start, "%-I:%M%p", :strftime) %>
+        Depart at {Timex.format!(@itinerary.start, "%-I:%M%p", :strftime)}
         <.route_symbol :for={route <- @all_routes} route={route} class="ml-2" />
       </div>
       <div :for={leg <- @itinerary.legs}>
-        <.leg
-          start_time={leg.start}
-          end_time={leg.stop}
-          from={leg.from}
-          to={leg.to}
-          mode={leg.mode}
-          realtime={leg.realtime}
-          realtime_state={leg.realtime_state}
-        />
+        <%= if match?(%PersonalDetail{}, leg.mode) do %>
+          <.walking_leg leg={leg} />
+        <% else %>
+          <.leg
+            start_time={leg.start}
+            end_time={leg.stop}
+            from={leg.from}
+            to={leg.to}
+            mode={leg.mode}
+            realtime={leg.realtime}
+            realtime_state={leg.realtime_state}
+          />
+        <% end %>
       </div>
     </div>
     """
diff --git a/lib/dotcom_web/components/trip_planner/itinerary_summary.ex b/lib/dotcom_web/components/trip_planner/itinerary_summary.ex
index efaf7a6db6..8d497b3354 100644
--- a/lib/dotcom_web/components/trip_planner/itinerary_summary.ex
+++ b/lib/dotcom_web/components/trip_planner/itinerary_summary.ex
@@ -11,12 +11,10 @@ defmodule DotcomWeb.Components.TripPlanner.ItinerarySummary do
     <div>
       <div class="flex flex-row mb-3 font-bold text-lg justify-between">
         <div>
-          <%= format_datetime_full(@summary.first_start) %> - <%= format_datetime_full(
-            @summary.first_stop
-          ) %>
+          {format_datetime_full(@summary.first_start)} - {format_datetime_full(@summary.first_stop)}
         </div>
         <div>
-          <%= @summary.duration %> min
+          {@summary.duration} min
         </div>
       </div>
       <div class="flex flex-wrap gap-1 items-center content-center mb-3">
@@ -32,12 +30,12 @@ defmodule DotcomWeb.Components.TripPlanner.ItinerarySummary do
         </div>
         <div class="inline-flex items-center gap-0.5">
           <.icon name="person-walking" class="h-3 w-3" />
-          <%= @summary.walk_distance %> mi
+          {@summary.walk_distance} mi
         </div>
         <div :if={@summary.total_cost > 0} class="inline-flex items-center gap-0.5">
           <.icon name="circle" class="h-0.5 w-0.5 mx-1" />
           <.icon name="wallet" class="h-3 w-3" />
-          <%= Fares.Format.price(@summary.total_cost) %>
+          {Fares.Format.price(@summary.total_cost)}
         </div>
       </div>
     </div>
@@ -56,7 +54,7 @@ defmodule DotcomWeb.Components.TripPlanner.ItinerarySummary do
       @class
     ]}>
       <.icon name="person-walking" class="h-4 w-4" />
-      <span><%= @walk_minutes %> min</span>
+      <span>{@walk_minutes} min</span>
     </span>
     """
   end
diff --git a/lib/dotcom_web/components/trip_planner/leg.ex b/lib/dotcom_web/components/trip_planner/leg.ex
index 88f8563171..3d8dd12cbf 100644
--- a/lib/dotcom_web/components/trip_planner/leg.ex
+++ b/lib/dotcom_web/components/trip_planner/leg.ex
@@ -31,16 +31,16 @@ defmodule DotcomWeb.Components.TripPlanner.Leg do
     ~H"""
     <div class={"border-solid #{@realtime_class} p-3 m-1"}>
       <div class="flex items-center justify-between">
-        <strong><%= @from.name %></strong>
-        <span><%= format_time(@start_time) %></span>
+        <strong>{@from.name}</strong>
+        <span>{format_time(@start_time)}</span>
       </div>
       <div>
-        <p :if={@realtime_state}>Realtime data: <%= @realtime_state %></p>
+        <p :if={@realtime_state}>Realtime data: {@realtime_state}</p>
         <.mode mode={@mode} />
       </div>
       <div class="flex items-center justify-between">
-        <strong><%= @to.name %></strong>
-        <span><%= format_time(@end_time) %></span>
+        <strong>{@to.name}</strong>
+        <span>{format_time(@end_time)}</span>
       </div>
     </div>
     """
@@ -71,11 +71,11 @@ defmodule DotcomWeb.Components.TripPlanner.Leg do
   def transit(assigns) do
     ~H"""
     <div class="text-lg">
-      <.route_symbol route={@route} /> (<%= @route.name %>) on trip <%= @trip_id %>
+      <.route_symbol route={@route} /> ({@route.name}) on trip {@trip_id}
     </div>
     <ul class="list-decimal">
       <li :for={stop <- @stops} class="text-sm text-zinc-500">
-        <%= stop.name %>
+        {stop.name}
         <div :if={Stop.accessible?(stop)} class="inline-flex items-center gap-0.5">
           <.icon
             type="icon-svg"
@@ -93,7 +93,7 @@ defmodule DotcomWeb.Components.TripPlanner.Leg do
     ~H"""
     <ul class="list-decimal">
       <li :for={step <- @steps} class="text-sm text-zinc-500">
-        <%= Step.walk_summary(step) %>
+        {Step.walk_summary(step)}
       </li>
     </ul>
     """
diff --git a/lib/dotcom_web/components/trip_planner/walking_leg.ex b/lib/dotcom_web/components/trip_planner/walking_leg.ex
new file mode 100644
index 0000000000..0b28db8887
--- /dev/null
+++ b/lib/dotcom_web/components/trip_planner/walking_leg.ex
@@ -0,0 +1,53 @@
+defmodule DotcomWeb.Components.TripPlanner.WalkingLeg do
+  @moduledoc """
+  A walking leg of a trip.
+  Includes a summary of the walk (time and distance) and a list of steps.
+  """
+
+  use Phoenix.Component
+
+  import MbtaMetro.Components.Accordion, only: [accordion: 1]
+  import MbtaMetro.Components.Icon, only: [icon: 1]
+  import MbtaMetro.Components.List, only: [list: 1]
+
+  alias OpenTripPlannerClient.Schema.Step
+
+  @doc """
+  Renders a walking leg.
+
+  Must be given a `leg` with a:
+    - `distance` (float) in miles
+    - `duration` (integer) in minutes
+    - `mode` with a list of `steps` (list of `Step` structs)
+  """
+
+  attr :leg, :map, required: true
+
+  def walking_leg(assigns) do
+    ~H"""
+    <hr class="my-2 border-t-solid border-slate-300" />
+    <.accordion>
+      <:heading>
+        <.icon name="person-walking" class="w-5 h-5 mr-1 fill-black" />
+        <div class="text-black">
+          <div class="text-base">
+            Walk
+          </div>
+          <div class="text-sm">
+            {@leg.duration} min, {@leg.distance} mi
+          </div>
+        </div>
+      </:heading>
+      <:content>
+        <.list class="w-full m-0 ps-0">
+          <:item :for={step <- @leg.mode.steps}>
+            <span class="text-sm">
+              {Step.walk_summary(step)}
+            </span>
+          </:item>
+        </.list>
+      </:content>
+    </.accordion>
+    """
+  end
+end
diff --git a/lib/dotcom_web/live/admin.ex b/lib/dotcom_web/live/admin.ex
index adcc9ede1e..8ae633fe2a 100644
--- a/lib/dotcom_web/live/admin.ex
+++ b/lib/dotcom_web/live/admin.ex
@@ -26,8 +26,8 @@ defmodule DotcomWeb.Live.Admin do
     <section style="display: grid; gap: .5rem; grid-template-columns: 1fr 1fr 1fr">
       <%= for feature <- @admin_features do %>
         <%= link to: feature.url, class: "btn btn-secondary", style: "white-space: inherit;" do %>
-          <header class="font-heading font-bold mb-3 text-2xl mt-0"><%= feature.title %></header>
-          <p class="mb-0"><%= feature.description %></p>
+          <header class="font-heading font-bold mb-3 text-2xl mt-0">{feature.title}</header>
+          <p class="mb-0">{feature.description}</p>
         <% end %>
       <% end %>
       <div class="btn btn-secondary disabled" style="white-space: inherit;">
diff --git a/lib/dotcom_web/live/admin/trip_plan_feedback.ex b/lib/dotcom_web/live/admin/trip_plan_feedback.ex
index 898f0e9a36..c19ecc7965 100644
--- a/lib/dotcom_web/live/admin/trip_plan_feedback.ex
+++ b/lib/dotcom_web/live/admin/trip_plan_feedback.ex
@@ -17,12 +17,12 @@ defmodule DotcomWeb.Live.Admin.TripPlanFeedback do
     <p>
       In March 2024, we started offering a feedback form for riders to complete after making plans via the trip planner. This button lets you download the comments, along with the list of itineraries being commented on and some context from the request. In the future this might allow some filtering by date, but for now the button will give you the entire dataset.
     </p>
-    <%= link(
+    {link(
       "Download #{Enum.count(@feedback)} #{Inflex.inflect("record", Enum.count(@feedback))} (.csv)",
       to: DotcomWeb.Router.Helpers.feedback_url(@socket, :download),
       class: "btn btn-primary",
       disabled: Enum.count(@feedback) == 0
-    ) %>
+    )}
     """
   end
 end
diff --git a/lib/dotcom_web/live/trip_planner.ex b/lib/dotcom_web/live/trip_planner.ex
index b33a61a56c..39506d62c4 100644
--- a/lib/dotcom_web/live/trip_planner.ex
+++ b/lib/dotcom_web/live/trip_planner.ex
@@ -46,13 +46,13 @@ defmodule DotcomWeb.Live.TripPlanner do
         form_values={@form_values}
       />
       <section :if={@submitted_values} class="mt-2 mb-6">
-        <p class="text-lg font-semibold mb-0"><%= submission_summary(@submitted_values) %></p>
-        <p><%= time_summary(@submitted_values) %></p>
+        <p class="text-lg font-semibold mb-0">{submission_summary(@submitted_values)}</p>
+        <p>{time_summary(@submitted_values)}</p>
         <.async_result :let={results} assign={@results}>
           <:failed :let={{:error, errors}}>
             <.error_container title="Unable to plan your trip">
               <p :for={%OpenTripPlannerClient.Error{message: message} <- errors} class="last:mb-0">
-                <%= message %>
+                {message}
               </p>
             </.error_container>
           </:failed>
@@ -64,7 +64,7 @@ defmodule DotcomWeb.Live.TripPlanner do
               <.feedback kind={:warning}>No trips found.</.feedback>
             <% else %>
               <.feedback kind={:success}>
-                Found <%= Enum.count(results) %> <%= Inflex.inflect("way", Enum.count(results)) %> to go.
+                Found {Enum.count(results)} {Inflex.inflect("way", Enum.count(results))} to go.
               </.feedback>
             <% end %>
           <% end %>
diff --git a/lib/dotcom_web/templates/alert/show.html.heex b/lib/dotcom_web/templates/alert/show.html.heex
index cb34431acb..ac64e57078 100644
--- a/lib/dotcom_web/templates/alert/show.html.heex
+++ b/lib/dotcom_web/templates/alert/show.html.heex
@@ -7,34 +7,34 @@
     </div>
     <div class="row">
       <div class="col-lg-3">
-        <%= DotcomWeb.PartialView.alert_time_filters(@alerts_timeframe,
+        {DotcomWeb.PartialView.alert_time_filters(@alerts_timeframe,
           method: :alert_path,
           item: @id
-        ) %>
+        )}
         <div class="hidden-md-down">
-          <%= render("_t-alerts.html") %>
+          {render("_t-alerts.html")}
         </div>
       </div>
       <div class="col-lg-8 col-lg-offset-1">
         <div class="m-alerts__mode-buttons">
-          <%= mode_buttons(@id) %>
+          {mode_buttons(@id)}
         </div>
 
         <%= if show_systemwide_alert? do %>
           <div class="m-alerts-header">
             <h2 class="m-alerts-header__name--systemwide">Systemwide</h2>
             <span class="m-alerts-header__icon">
-              <%= DotcomWeb.PartialView.SvgIconWithCircle.svg_icon_with_circle(%SvgIconWithCircle{
+              {DotcomWeb.PartialView.SvgIconWithCircle.svg_icon_with_circle(%SvgIconWithCircle{
                 icon: :t_logo,
                 aria_hidden?: true
-              }) %>
+              })}
             </span>
           </div>
           <div class="c-alert-group">
-            <%= render("_item.html",
+            {render("_item.html",
               alert: %{Alerts.Repo.by_id(@alert_banner.id) | priority: :system},
               date_time: @date_time
-            ) %>
+            )}
           </div>
         <% end %>
 
@@ -42,7 +42,7 @@
         <%= for {route_or_stop, alerts} <- @alert_groups do %>
           <div class="m-alerts-header">
             <%= link to: group_header_path(route_or_stop), class: "m-alerts-header__link" do %>
-              <h2 class="m-alerts-header__name"><%= group_header_name(route_or_stop) %></h2>
+              <h2 class="m-alerts-header__name">{group_header_name(route_or_stop)}</h2>
             <% end %>
             <%= if show_mode_icon?(route_or_stop) do %>
               <%= link to: group_header_path(route_or_stop), class: "m-alerts-header__icon" do %>
@@ -51,20 +51,20 @@
             <% end %>
           </div>
           <div>
-            <%= DotcomWeb.AlertView.group(
+            {DotcomWeb.AlertView.group(
               alerts: alerts,
               route: route_or_stop,
               date_time: @date_time
-            ) %>
+            )}
           </div>
         <% end %>
         <%= if Enum.empty?(@alert_groups) && !show_systemwide_alert? do %>
           <div class="m-alerts__notice--no-alerts">
-            There are no <%= timeframe %> <%= mode_name(@id) %> alerts at this time.
+            There are no {timeframe} {mode_name(@id)} alerts at this time.
           </div>
         <% end %>
         <div class="hidden-lg-up">
-          <%= render("_t-alerts.html") %>
+          {render("_t-alerts.html")}
         </div>
       </div>
     </div>
diff --git a/lib/dotcom_web/templates/error/error_layout.html.heex b/lib/dotcom_web/templates/error/error_layout.html.heex
index 2d82651ad4..62acec441a 100644
--- a/lib/dotcom_web/templates/error/error_layout.html.heex
+++ b/lib/dotcom_web/templates/error/error_layout.html.heex
@@ -1,21 +1,21 @@
 <div class="container error-page">
   <div class="font-small error-pre-title">
-    <%= @error_code <> " Error \u2022 " <> @error_type %>
+    {@error_code <> " Error \u2022 " <> @error_type}
   </div>
   <!-- This error title appears for XS-S screens -->
-  <div class="font-heading font-bold mt-11 mb-3 text-4xl error-title"><%= @error_title %></div>
+  <div class="font-heading font-bold mt-11 mb-3 text-4xl error-title">{@error_title}</div>
   <div class="error-page-flex">
     <div class="error-svg-container">
-      <%= svg(@error_code <> ".svg") %>
+      {svg(@error_code <> ".svg")}
     </div>
     <div class="error-details-container">
       <!-- This error title appears for MD-XL screens -->
       <div class="font-heading font-bold mt-11 mb-3 text-4xl error-title">
-        <%= @error_title %>
+        {@error_title}
       </div>
       <p class="error-paragraph">
-        <strong><%= @error_description %></strong>
-        <%= @error_instructions %>
+        <strong>{@error_description}</strong>
+        {@error_instructions}
       </p>
       <.algolia_autocomplete
         id="error-page"
diff --git a/lib/dotcom_web/templates/fare/proposed_sales_locations.html.heex b/lib/dotcom_web/templates/fare/proposed_sales_locations.html.heex
index 142b46225c..14e92ba719 100644
--- a/lib/dotcom_web/templates/fare/proposed_sales_locations.html.heex
+++ b/lib/dotcom_web/templates/fare/proposed_sales_locations.html.heex
@@ -8,17 +8,17 @@
         We're expanding our network of places where riders can get or load a CharlieCard and purchase passes.
       </p>
       <p>
-        Or, <%= link("see a map of all proposed sales locations",
+        Or, {link("see a map of all proposed sales locations",
           to:
             "https://massdot.maps.arcgis.com/apps/Viewer/index.html?appid=927f1be32b0243af9d9ff68ec1311ddb",
           target: "_blank"
-        ) %>.
+        )}.
       </p>
       <p>
-        <b>Note</b>: This list does not include current MBTA retailers. To see current retail locations, use our <%= link(
+        <b>Note</b>: This list does not include current MBTA retailers. To see current retail locations, use our {link(
           "retail sales location finder",
           to: fare_path(@conn, :show, "retail-sales-locations")
-        ) %>. All proposed locations are subject to site suitability, permitting, and retail availability.
+        )}. All proposed locations are subject to site suitability, permitting, and retail availability.
       </p>
 
       <h2 class="u-mb-2">Find Proposed Locations Near You</h2>
@@ -45,15 +45,15 @@
       <% else %>
         <div class="psl-types-buttons hidden">
           <%= for type <- psl_types do %>
-            <button class="psl-type-button" data-group={type}><%= type %></button>
+            <button class="psl-type-button" data-group={type}>{type}</button>
           <% end %>
         </div>
-        <%= render(DotcomWeb.FareView, "_nearby_locations.html",
+        {render(DotcomWeb.FareView, "_nearby_locations.html",
           conn: @conn,
           address: @address,
           locations: @nearby_proposed_locations,
           search_position: @search_position
-        ) %>
+        )}
       <% end %>
     <% end %>
     <div class="limited-width">
@@ -61,11 +61,11 @@
       <p>
         We want to make sure we’re building a retail network that works for you. You can share your feedback using the form below.
       </p>
-      <%= link("Let us know",
+      {link("Let us know",
         to: "https://mbta.qualtrics.com/jfe/form/SV_6A1WCh4mKnkM22y",
         target: "_blank",
         class: "c-call-to-action"
-      ) %>
+      )}
     </div>
   </div>
   <div class="col-md-4">
@@ -74,22 +74,22 @@
       <p>
         We're asking the public to help guide our decisions as we roll out the Fare Transformation project over the next several years.
       </p>
-      <%= link("Find out how to get involved",
+      {link("Find out how to get involved",
         to: cms_static_page_path(@conn, "/fares/fare-transformation/get-involved"),
         target: "_blank",
         class: "c-call-to-action"
-      ) %>
+      )}
     </div>
     <div class="m-schedule-page__schedule-notes u-mt-2">
       <h3 class="u-mt-0">Suggest a Retailer</h3>
       <p>
         Know a local store owner who might be interested in joining our retail network? Suggest a retailer and we'll reach out to them on your behalf.
       </p>
-      <%= link("Fill out the form",
+      {link("Fill out the form",
         to: "https://form.asana.com/?k=WXmGhGmZFkehGfely4967Q&d=15492006741476",
         target: "_blank",
         class: "c-call-to-action"
-      ) %>
+      )}
     </div>
   </div>
 </div>
diff --git a/lib/dotcom_web/templates/fare/retail_sales_locations.html.heex b/lib/dotcom_web/templates/fare/retail_sales_locations.html.heex
index e30b8dc1b1..4f705ae9bf 100644
--- a/lib/dotcom_web/templates/fare/retail_sales_locations.html.heex
+++ b/lib/dotcom_web/templates/fare/retail_sales_locations.html.heex
@@ -28,12 +28,12 @@
           Please enter an address that is within 100 miles of an MBTA service area.
         </p>
       <% else %>
-        <%= render("_nearby_locations.html",
+        {render("_nearby_locations.html",
           conn: @conn,
           address: @address,
           locations: @fare_sales_locations,
           search_position: @search_position
-        ) %>
+        )}
       <% end %>
     <% end %>
   </div>
@@ -43,22 +43,22 @@
       <p>
         Learn more about fare prices, pass types, and how to pay your fare on the T.
       </p>
-      <%= link("Learn more about MBTA fares",
+      {link("Learn more about MBTA fares",
         to: cms_static_page_path(@conn, "/fares"),
         target: "_blank",
         class: "c-call-to-action"
-      ) %>
+      )}
     </div>
     <div class="m-schedule-page__schedule-notes u-mt-2">
       <h3 class="u-mt-0">Suggest a Retailer</h3>
       <p>
         Know a local store owner who might be interested in joining our retail network? Suggest a retailer and we'll reach out to them on your behalf.
       </p>
-      <%= link("Fill out the form",
+      {link("Fill out the form",
         to: "https://form.asana.com/?k=WXmGhGmZFkehGfely4967Q&d=15492006741476",
         target: "_blank",
         class: "c-call-to-action"
-      ) %>
+      )}
     </div>
   </div>
 </div>
diff --git a/lib/dotcom_web/templates/layout/_new_header.html.heex b/lib/dotcom_web/templates/layout/_new_header.html.heex
index 071b6151e5..d9c7fce34d 100644
--- a/lib/dotcom_web/templates/layout/_new_header.html.heex
+++ b/lib/dotcom_web/templates/layout/_new_header.html.heex
@@ -21,12 +21,12 @@
       <a class="navbar-logo" href="/" data-nav="logo">
         <span class="sr-only">MBTA Home Page</span>
         <div class="svg-container" aria-hidden="true">
-          <%= svg("mbta-logo.svg") %>
-          <%= svg("mbta-name-and-logo.svg") %>
+          {svg("mbta-logo.svg")}
+          {svg("mbta-name-and-logo.svg")}
         </div>
       </a>
 
-      <%= render("_new_nav_desktop.html", assigns) %>
+      {render("_new_nav_desktop.html", assigns)}
       <div class="search-wrapper">
         <div class="search">
           <.algolia_autocomplete id="header-desktop" config_type="basic-config" />
@@ -46,5 +46,5 @@
       </button>
     </div>
   </div>
-  <%= render("_new_nav_mobile.html", assigns) %>
+  {render("_new_nav_mobile.html", assigns)}
 </header>
diff --git a/lib/dotcom_web/templates/layout/_new_nav_mobile.html.heex b/lib/dotcom_web/templates/layout/_new_nav_mobile.html.heex
index 28584448c6..3d988663a4 100644
--- a/lib/dotcom_web/templates/layout/_new_nav_mobile.html.heex
+++ b/lib/dotcom_web/templates/layout/_new_nav_mobile.html.heex
@@ -4,9 +4,9 @@
     <%= for {%{menu_section: menu_section, sub_menus: sub_menus}, index} <- Enum.with_index(nav_link_content()) do %>
       <nav aria-labelledby={"section-heading-#{menu_section}"} class="m-menu__section">
         <h2 id={"section-heading-#{menu_section}"} class="m-menu__section-heading">
-          <%= menu_section %>
+          {menu_section}
         </h2>
-        <%= DotcomWeb.PartialView.render(
+        {DotcomWeb.PartialView.render(
           "_accordion_ui_no_bootstrap.html",
           Map.merge(assigns, %{
             id: menu_section,
@@ -21,14 +21,14 @@
                 }
               end
           })
-        ) %>
+        )}
 
         <%= for %{sub_menu_section: sub_menu_section} <- sub_menus do %>
           <%= if sub_menu_section == "Most popular fares" do %>
-            <%= render("_new_nav_popular_fares.html") %>
+            {render("_new_nav_popular_fares.html")}
           <% end %>
           <%= if sub_menu_section == "Contact numbers" do %>
-            <%= render("_new_nav_contact_numbers.html") %>
+            {render("_new_nav_contact_numbers.html")}
           <% end %>
         <% end %>
       </nav>
diff --git a/lib/dotcom_web/templates/layout/admin.html.heex b/lib/dotcom_web/templates/layout/admin.html.heex
index 38c2cd8569..93dd2ae53c 100644
--- a/lib/dotcom_web/templates/layout/admin.html.heex
+++ b/lib/dotcom_web/templates/layout/admin.html.heex
@@ -7,11 +7,11 @@
 </marquee>
 <div class="container" style="background-color: white; min-height: 50vh; padding-top: 2rem">
   <%= if @socket.view !== DotcomWeb.Live.Admin do %>
-    <%= link([fa("arrow-left", class: "fa-fw"), "Back to admin panel"],
+    {link([fa("arrow-left", class: "fa-fw"), "Back to admin panel"],
       to: Helpers.live_path(@socket, DotcomWeb.Live.Admin),
       class: "btn btn-secondary btn-sm"
-    ) %>
+    )}
     <hr />
   <% end %>
-  <%= @inner_content %>
+  {@inner_content}
 </div>
diff --git a/lib/dotcom_web/templates/layout/preview.html.heex b/lib/dotcom_web/templates/layout/preview.html.heex
index d95c647bf8..a56b45f2d5 100644
--- a/lib/dotcom_web/templates/layout/preview.html.heex
+++ b/lib/dotcom_web/templates/layout/preview.html.heex
@@ -1,7 +1,7 @@
 <div style="margin: 0; padding: .5rem; text-align: center; background-color: #00ffce; background-image: linear-gradient(45deg, #00ffce 25%, #FFFAE9 25%, #FFFAE9 50%, #00ffce 50%, #00ffce 75%, #fff 75%, #FFFAE9 100%); background-size: 56.57px 56.57px; font-weight: bold;">
   Preview Version
 </div>
-<div class="container"><%= @inner_content %></div>
+<div class="container">{@inner_content}</div>
 <div style="transform: translateY(2rem); margin: 0; padding: .5rem; text-align: center; background-color: #00ffce; background-image: linear-gradient(45deg, #00ffce 25%, #FFFAE9 25%, #FFFAE9 50%, #00ffce 50%, #00ffce 75%, #fff 75%, #FFFAE9 100%); background-size: 56.57px 56.57px; font-weight: bold;">
   Preview Version
 </div>
diff --git a/lib/dotcom_web/templates/page/menu.html.heex b/lib/dotcom_web/templates/page/menu.html.heex
index 18865ac4dd..a8146a1368 100644
--- a/lib/dotcom_web/templates/page/menu.html.heex
+++ b/lib/dotcom_web/templates/page/menu.html.heex
@@ -8,7 +8,7 @@
     }
     class="page-section"
   >
-    <h2 id={"#{menu_section}-section"}><%= menu_section %></h2>
+    <h2 id={"#{menu_section}-section"}>{menu_section}</h2>
     <hr class="m-0" />
     <section aria-labelledby={"#{menu_section}-section"} class="row">
       <section
@@ -16,8 +16,8 @@
         aria-labelledby={"#{section_name}-section"}
         class="col-sm-4"
       >
-        <h3 id={"#{section_name}-section"} class="font-small mt-6"><%= section_name %></h3>
-        <%= Enum.map(links, &DotcomWeb.LayoutView.render_nav_link/1) %>
+        <h3 id={"#{section_name}-section"} class="font-small mt-6">{section_name}</h3>
+        {Enum.map(links, &DotcomWeb.LayoutView.render_nav_link/1)}
       </section>
     </section>
   </div>
diff --git a/lib/dotcom_web/templates/trip_plan/_leg_summary.html.heex b/lib/dotcom_web/templates/trip_plan/_leg_summary.html.heex
index a17444349a..b4cae8de83 100644
--- a/lib/dotcom_web/templates/trip_plan/_leg_summary.html.heex
+++ b/lib/dotcom_web/templates/trip_plan/_leg_summary.html.heex
@@ -1,23 +1,23 @@
 <div class="leg-summary">
-  <div><%= icon_for_route(@route) %></div>
+  <div>{icon_for_route(@route)}</div>
   <div>
     <strong class="u-pe-8">
-      Ride the <%= @branch_display %>
+      Ride the {@branch_display}
     </strong>
-    <%= "(#{@intermediate_stop_count} #{Inflex.inflect("Stop", @intermediate_stop_count)}, #{@itinerary_row.duration} min)" %>
+    {"(#{@intermediate_stop_count} #{Inflex.inflect("Stop", @intermediate_stop_count)}, #{@itinerary_row.duration} min)"}
     <%= if @itinerary_row.trip do %>
       <div class="text-sm">
         <%= if @itinerary_row.trip.name && @itinerary_row.trip.name != "" do %>
-          Train <%= @itinerary_row.trip.name %> <%= Routes.Route.direction_name(
+          Train {@itinerary_row.trip.name} {Routes.Route.direction_name(
             @route,
             @itinerary_row.trip.direction_id
           )
-          |> String.downcase() %>
+          |> String.downcase()}
         <% else %>
-          <%= Routes.Route.direction_name(@route, @itinerary_row.trip.direction_id) %>
+          {Routes.Route.direction_name(@route, @itinerary_row.trip.direction_id)}
         <% end %>
         <%= if @itinerary_row.trip.headsign && @itinerary_row.trip.headsign != "" do %>
-          towards <%= @itinerary_row.trip.headsign %>
+          towards {@itinerary_row.trip.headsign}
         <% end %>
       </div>
     <% end %>
@@ -27,7 +27,7 @@
       Details
       <%= if Map.get(assigns, :alerts?, false) do %>
         <span class="itinerary-has-alerts-icon">
-          <%= fa("exclamation-triangle") %>
+          {fa("exclamation-triangle")}
         </span>
       <% end %>
     </div>
diff --git a/lib/dotcom_web/templates/trip_plan/_mobile_trip_summary.html.heex b/lib/dotcom_web/templates/trip_plan/_mobile_trip_summary.html.heex
index 2865749bc9..286ef8882a 100644
--- a/lib/dotcom_web/templates/trip_plan/_mobile_trip_summary.html.heex
+++ b/lib/dotcom_web/templates/trip_plan/_mobile_trip_summary.html.heex
@@ -1,10 +1,10 @@
 <%= if @itineraries? do %>
   <div class="hidden-md-up hidden-no-js">
     <div class="planner-location-box-location">
-      <strong>Start from:</strong> <%= Query.location_name(assigns[:query], :from) %>
+      <strong>Start from:</strong> {Query.location_name(assigns[:query], :from)}
     </div>
     <div class="planner-location-box-location">
-      <strong>End here: </strong><%= Query.location_name(assigns[:query], :to) %>
+      <strong>End here: </strong>{Query.location_name(assigns[:query], :to)}
     </div>
     <a
       class="btn btn-primary trip-planner-edit-btn"
diff --git a/lib/dotcom_web/templates/trip_plan/_options.html.heex b/lib/dotcom_web/templates/trip_plan/_options.html.heex
index 4eb8223df7..c44ba660eb 100644
--- a/lib/dotcom_web/templates/trip_plan/_options.html.heex
+++ b/lib/dotcom_web/templates/trip_plan/_options.html.heex
@@ -1,8 +1,8 @@
 <div id="trip-planner-form" phx-hook="TripPlannerForm">
   <h2>When</h2>
-  <%= render("_time_inputs.html", assigns) %>
+  {render("_time_inputs.html", assigns)}
   <h2>Modes</h2>
-  <%= DotcomWeb.PartialView.render(
+  {DotcomWeb.PartialView.render(
     "_accordion_ui.html",
     Map.merge(assigns, %{
       multiselectable: true,
@@ -16,6 +16,6 @@
         }
       ]
     })
-  ) %>
-  <%= render("_optimize_for.html", Map.merge(assigns, %{form: @parent_form})) %>
+  )}
+  {render("_optimize_for.html", Map.merge(assigns, %{form: @parent_form}))}
 </div>
diff --git a/lib/dotcom_web/templates/trip_plan/_time_inputs.html.heex b/lib/dotcom_web/templates/trip_plan/_time_inputs.html.heex
index 7dc0520f88..b6c609803f 100644
--- a/lib/dotcom_web/templates/trip_plan/_time_inputs.html.heex
+++ b/lib/dotcom_web/templates/trip_plan/_time_inputs.html.heex
@@ -58,6 +58,6 @@
     </div>
   </fieldset>
   <div class="error-container">
-    <%= date_error(@errors) %>
+    {date_error(@errors)}
   </div>
 </div>
diff --git a/lib/dotcom_web/templates/trip_plan/index.html.heex b/lib/dotcom_web/templates/trip_plan/index.html.heex
index e75dac3100..fb5a03f6cb 100644
--- a/lib/dotcom_web/templates/trip_plan/index.html.heex
+++ b/lib/dotcom_web/templates/trip_plan/index.html.heex
@@ -1,7 +1,7 @@
 <div class="container">
   <h1 class="trip-plan-title">Trip Planner</h1>
   <div class="trip-plan-container">
-    <%= render("_sidebar.html", assigns) %>
+    {render("_sidebar.html", assigns)}
     <div class="trip-plan-body">
       <link rel="stylesheet" href={static_url(@conn, "/css/map.css")} />
       <%= case assigns[:query] do %>
@@ -13,9 +13,9 @@
             phx-hook="ScrollIntoView"
           >
             <% l = length(@itineraries) %>
-            <%= "We found #{l} #{Inflex.inflect("trip", l)} for you" %>
+            {"We found #{l} #{Inflex.inflect("trip", l)} for you"}
           </p>
-          <p class="instructions page-section"><%= itinerary_explanation(@query, @modes) %></p>
+          <p class="instructions page-section">{itinerary_explanation(@query, @modes)}</p>
           <% itinerary_data = itinerary_html(@itineraries, %{conn: @conn, expanded: @expanded}) %>
           <% metadata = trip_plan_metadata(@conn) %>
           <script id="js-tp-itinerary-data" type="text/plain">
diff --git a/lib/dotcom_web/templates/vote/show.html.heex b/lib/dotcom_web/templates/vote/show.html.heex
index 1438ce03b4..44db0cfd62 100644
--- a/lib/dotcom_web/templates/vote/show.html.heex
+++ b/lib/dotcom_web/templates/vote/show.html.heex
@@ -34,13 +34,13 @@
 
       <div class="u-highlight-gray border border-silver-100 rounded-md flex flex-col p-6">
         <div class="font-bold text-lg mb-2">
-          <%= @polling_location_name %>
+          {@polling_location_name}
         </div>
         <div class="mb-6">
-          <%= @polling_location["address"]["line1"] %>
+          {@polling_location["address"]["line1"]}
           <br />
-          <%= @polling_location["address"]["city"] %>, <%= @polling_location["address"]["state"] %>
-          <%= @polling_location["address"]["zip"] %>
+          {@polling_location["address"]["city"]}, {@polling_location["address"]["state"]}
+          {@polling_location["address"]["zip"]}
         </div>
         <a class="btn btn-primary" href={@trip_plan_path}>
           Plan your trip
@@ -83,11 +83,11 @@
         Our user guides can help you learn how to navigate the system,
         get to local events, use accessibility features, and more.
       </p>
-      <%= link("View all guides",
+      {link("View all guides",
         to: cms_static_page_path(@conn, "/guides"),
         target: "_blank",
         class: "c-call-to-action"
-      ) %>
+      )}
     </div>
   </div>
 </div>
diff --git a/mix.exs b/mix.exs
index c8628d1840..b53d5e5b09 100644
--- a/mix.exs
+++ b/mix.exs
@@ -105,10 +105,8 @@ defmodule DotCom.Mixfile do
       {:inflex, "2.1.0"},
       {:jason, "1.4.4", override: true},
       {:logster, "1.1.1"},
-      # Mail kept at 0.3.1 as we experienced inconsistent photo attachment and
-      # email encoding success with later version
       {:mail, "0.3.1"},
-      {:mbta_metro, "0.0.60"},
+      {:mbta_metro, "0.0.64"},
       {:mock, "0.3.8", [only: :test]},
       {:mox, "1.2.0", [only: :test]},
       {:nebulex, "2.6.4"},
diff --git a/mix.lock b/mix.lock
index dc7d4e43cc..922cad6063 100644
--- a/mix.lock
+++ b/mix.lock
@@ -55,7 +55,7 @@
   "makeup_elixir": {:hex, :makeup_elixir, "1.0.0", "74bb8348c9b3a51d5c589bf5aebb0466a84b33274150e3b6ece1da45584afc82", [:mix], [{:makeup, "~> 1.0", [hex: :makeup, repo: "hexpm", optional: false]}, {:nimble_parsec, "~> 1.2.3 or ~> 1.3", [hex: :nimble_parsec, repo: "hexpm", optional: false]}], "hexpm", "49159b7d7d999e836bedaf09dcf35ca18b312230cf901b725a64f3f42e407983"},
   "makeup_erlang": {:hex, :makeup_erlang, "1.0.1", "c7f58c120b2b5aa5fd80d540a89fdf866ed42f1f3994e4fe189abebeab610839", [:mix], [{:makeup, "~> 1.0", [hex: :makeup, repo: "hexpm", optional: false]}], "hexpm", "8a89a1eeccc2d798d6ea15496a6e4870b75e014d1af514b1b71fa33134f57814"},
   "makeup_html": {:hex, :makeup_html, "0.1.2", "19d4050c0978a4f1618ffe43054c0049f91fe5feeb9ae8d845b5dc79c6008ae5", [:mix], [{:makeup, "~> 1.2", [hex: :makeup, repo: "hexpm", optional: false]}], "hexpm", "b7fb9afedd617d167e6644a0430e49c1279764bfd3153da716d4d2459b0998c5"},
-  "mbta_metro": {:hex, :mbta_metro, "0.0.60", "59ec399f631ff521d978c3316028c3eb0e9255503138055d166ce0df20e366ff", [:mix], [{:floki, "~> 0.36", [hex: :floki, repo: "hexpm", optional: false]}, {:heroicons, "0.5.6", [hex: :heroicons, repo: "hexpm", optional: true]}, {:jason, "1.4.4", [hex: :jason, repo: "hexpm", optional: false]}, {:phoenix, "1.7.14", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_live_view, "1.0.0-rc.6", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}, {:phoenix_storybook, "0.6.4", [hex: :phoenix_storybook, repo: "hexpm", optional: false]}, {:timex, "3.7.11", [hex: :timex, repo: "hexpm", optional: false]}], "hexpm", "d962eb850f64fc82331ede365046311926dd86cb2274f21e63b8ecc85dbb2843"},
+  "mbta_metro": {:hex, :mbta_metro, "0.0.64", "49adcdb0b85a71cdcddae29c929cb91618fa5166cf1e413568593712fe098058", [:mix], [{:floki, "~> 0.36", [hex: :floki, repo: "hexpm", optional: false]}, {:heroicons, "0.5.6", [hex: :heroicons, repo: "hexpm", optional: true]}, {:jason, "1.4.4", [hex: :jason, repo: "hexpm", optional: false]}, {:phoenix, "1.7.14", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_live_view, "1.0.0-rc.6", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}, {:phoenix_storybook, "0.6.4", [hex: :phoenix_storybook, repo: "hexpm", optional: false]}, {:timex, "3.7.11", [hex: :timex, repo: "hexpm", optional: false]}], "hexpm", "e9f831059cddfe9146752523583de959ab2a79bd95f9998809182fa4302c2bc2"},
   "meck": {:hex, :meck, "0.9.2", "85ccbab053f1db86c7ca240e9fc718170ee5bda03810a6292b5306bf31bae5f5", [:rebar3], [], "hexpm", "81344f561357dc40a8344afa53767c32669153355b626ea9fcbc8da6b3045826"},
   "metrics": {:hex, :metrics, "1.0.1", "25f094dea2cda98213cecc3aeff09e940299d950904393b2a29d191c346a8486", [:rebar3], [], "hexpm", "69b09adddc4f74a40716ae54d140f93beb0fb8978d8636eaded0c31b6f099f16"},
   "mime": {:hex, :mime, "2.0.6", "8f18486773d9b15f95f4f4f1e39b710045fa1de891fada4516559967276e4dc2", [:mix], [], "hexpm", "c9945363a6b26d747389aac3643f8e0e09d30499a138ad64fe8fd1d13d9b153e"},
@@ -81,7 +81,7 @@
   "phoenix_html_helpers": {:hex, :phoenix_html_helpers, "1.0.1", "7eed85c52eff80a179391036931791ee5d2f713d76a81d0d2c6ebafe1e11e5ec", [:mix], [{:phoenix_html, "~> 4.0", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:plug, "~> 1.5", [hex: :plug, repo: "hexpm", optional: true]}], "hexpm", "cffd2385d1fa4f78b04432df69ab8da63dc5cf63e07b713a4dcf36a3740e3090"},
   "phoenix_live_dashboard": {:hex, :phoenix_live_dashboard, "0.8.4", "4508e481f791ce62ec6a096e13b061387158cbeefacca68c6c1928e1305e23ed", [:mix], [{:ecto, "~> 3.6.2 or ~> 3.7", [hex: :ecto, repo: "hexpm", optional: true]}, {:ecto_mysql_extras, "~> 0.5", [hex: :ecto_mysql_extras, repo: "hexpm", optional: true]}, {:ecto_psql_extras, "~> 0.7", [hex: :ecto_psql_extras, repo: "hexpm", optional: true]}, {:ecto_sqlite3_extras, "~> 1.1.7 or ~> 1.2.0", [hex: :ecto_sqlite3_extras, repo: "hexpm", optional: true]}, {:mime, "~> 1.6 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:phoenix_live_view, "~> 0.19 or ~> 1.0", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}, {:telemetry_metrics, "~> 0.6 or ~> 1.0", [hex: :telemetry_metrics, repo: "hexpm", optional: false]}], "hexpm", "2984aae96994fbc5c61795a73b8fb58153b41ff934019cfb522343d2d3817d59"},
   "phoenix_live_reload": {:hex, :phoenix_live_reload, "1.5.3", "f2161c207fda0e4fb55165f650f7f8db23f02b29e3bff00ff7ef161d6ac1f09d", [:mix], [{:file_system, "~> 0.3 or ~> 1.0", [hex: :file_system, repo: "hexpm", optional: false]}, {:phoenix, "~> 1.4", [hex: :phoenix, repo: "hexpm", optional: false]}], "hexpm", "b4ec9cd73cb01ff1bd1cac92e045d13e7030330b74164297d1aee3907b54803c"},
-  "phoenix_live_view": {:hex, :phoenix_live_view, "1.0.0-rc.7", "d2abca526422adea88896769529addb6443390b1d4f1ff9cbe694312d8875fb2", [:mix], [{:floki, "~> 0.36", [hex: :floki, repo: "hexpm", optional: true]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix, "~> 1.6.15 or ~> 1.7.0", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 3.3 or ~> 4.0", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:phoenix_template, "~> 1.0", [hex: :phoenix_template, repo: "hexpm", optional: false]}, {:phoenix_view, "~> 2.0", [hex: :phoenix_view, repo: "hexpm", optional: true]}, {:plug, "~> 1.15", [hex: :plug, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "b82a4575f6f3eb5b97922ec6874b0c52b3ca0cc5dcb4b14ddc478cbfa135dd01"},
+  "phoenix_live_view": {:hex, :phoenix_live_view, "1.0.0", "3a10dfce8f87b2ad4dc65de0732fc2a11e670b2779a19e8d3281f4619a85bce4", [:mix], [{:floki, "~> 0.36", [hex: :floki, repo: "hexpm", optional: true]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix, "~> 1.6.15 or ~> 1.7.0", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 3.3 or ~> 4.0", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:phoenix_template, "~> 1.0", [hex: :phoenix_template, repo: "hexpm", optional: false]}, {:phoenix_view, "~> 2.0", [hex: :phoenix_view, repo: "hexpm", optional: true]}, {:plug, "~> 1.15", [hex: :plug, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "254caef0028765965ca6bd104cc7d68dcc7d57cc42912bef92f6b03047251d99"},
   "phoenix_pubsub": {:hex, :phoenix_pubsub, "2.1.3", "3168d78ba41835aecad272d5e8cd51aa87a7ac9eb836eabc42f6e57538e3731d", [:mix], [], "hexpm", "bba06bc1dcfd8cb086759f0edc94a8ba2bc8896d5331a1e2c2902bf8e36ee502"},
   "phoenix_storybook": {:hex, :phoenix_storybook, "0.6.4", "d7bfdf6a20214251ff7453cbcb9de5f6f8a7db606f9c21846a87ba09058d8f0e", [:mix], [{:earmark, "~> 1.4", [hex: :earmark, repo: "hexpm", optional: false]}, {:heroicons, "~> 0.5", [hex: :heroicons, repo: "hexpm", optional: true]}, {:jason, "~> 1.3", [hex: :jason, repo: "hexpm", optional: true]}, {:makeup_eex, "~> 0.1.0", [hex: :makeup_eex, repo: "hexpm", optional: false]}, {:phoenix, "~> 1.7.0", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_html_helpers, "~> 1.0", [hex: :phoenix_html_helpers, repo: "hexpm", optional: false]}, {:phoenix_live_view, "> 0.18.7", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}, {:phoenix_view, "~> 2.0", [hex: :phoenix_view, repo: "hexpm", optional: false]}], "hexpm", "a63669c010e638882d287aae9c2cfd4a2c64d68e05f85403e213101283a74d3f"},
   "phoenix_template": {:hex, :phoenix_template, "1.0.4", "e2092c132f3b5e5b2d49c96695342eb36d0ed514c5b252a77048d5969330d639", [:mix], [{:phoenix_html, "~> 2.14.2 or ~> 3.0 or ~> 4.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}], "hexpm", "2c0c81f0e5c6753faf5cca2f229c9709919aba34fab866d3bc05060c9c444206"},
diff --git a/test/dotcom_web/components_test.exs b/test/dotcom_web/components_test.exs
index 7bb528357e..ec6d9675bd 100644
--- a/test/dotcom_web/components_test.exs
+++ b/test/dotcom_web/components_test.exs
@@ -43,7 +43,7 @@ defmodule DotcomWeb.ComponentsTest do
       str =
         rendered_to_string(~H"""
         <.error_container title={assigns.title}>
-          <%= assigns.content %>
+          {assigns.content}
         </.error_container>
         """)
 
@@ -51,7 +51,7 @@ defmodule DotcomWeb.ComponentsTest do
       assert str =~ assigns.content
 
       assert rendered_to_string(~H"""
-             <.error_container><%= assigns.content %></.error_container>
+             <.error_container>{assigns.content}</.error_container>
              """) =~ assigns.content
     end
   end