[PM-31770] Fix Send expires text formatting (#18926)

* [PM-31770] Fix Send expires text formatting

* Address PR review comments

apps/web/src/app/tools/send/send-access/send-view.component.html

@@ -9,12 +9,7 @@
 
 @if (loading()) {
   <div class="tw-text-center">
-    <i
-      class="bwi bwi-spinner bwi-spin bwi-2x tw-text-muted"
-      title="{{ 'loading' | i18n }}"
-      aria-hidden="true"
-    ></i>
-    <span class="tw-sr-only">{{ "loading" | i18n }}</span>
+    <bit-spinner></bit-spinner>
   </div>
 } @else {
   @if (unavailable()) {
@@ -47,7 +42,11 @@
         }
       }
       @if (expirationDate()) {
-        <p class="tw-text-center tw-text-muted">Expires: {{ expirationDate() | date: "medium" }}</p>
+        @let formattedExpirationTime = expirationDate() | date: "shortTime";
+        @let formattedExpirationDate = expirationDate() | date: "mediumDate";
+        <p class="tw-text-center tw-text-muted tw-text-sm">
+          {{ "sendExpiresOn" | i18n: formattedExpirationTime : formattedExpirationDate }}
+        </p>
       }
     </div>
   }

apps/web/src/app/tools/send/send-access/send-view.component.ts

@@ -21,7 +21,11 @@ import { SendAccessResponse } from "@bitwarden/common/tools/send/models/response
 import { SendAccessView } from "@bitwarden/common/tools/send/models/view/send-access.view";
 import { SendApiService } from "@bitwarden/common/tools/send/services/send-api.service.abstraction";
 import { SendType } from "@bitwarden/common/tools/send/types/send-type";
-import { AnonLayoutWrapperDataService, ToastService } from "@bitwarden/components";
+import {
+  AnonLayoutWrapperDataService,
+  SpinnerComponent,
+  ToastService,
+} from "@bitwarden/components";
 import { KeyService } from "@bitwarden/key-management";
 
 import { SharedModule } from "../../../shared";
@@ -32,7 +36,7 @@ import { SendAccessTextComponent } from "./send-access-text.component";
 @Component({
   selector: "app-send-view",
   templateUrl: "send-view.component.html",
-  imports: [SendAccessFileComponent, SendAccessTextComponent, SharedModule],
+  imports: [SendAccessFileComponent, SendAccessTextComponent, SharedModule, SpinnerComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SendViewComponent implements OnInit {

apps/web/src/locales/en/messages.json

@@ -12948,5 +12948,19 @@
   },
   "paymentMethodUpdateError": {
     "message": "There was an error updating your payment method."
+  },
+  "sendExpiresOn": {
+    "message": "This Send expires at $TIME$ on $DATE$",
+    "placeholders": {
+      "time": {
+        "content": "$1",
+        "example": "10:00 AM"
+      },
+      "date": {
+        "content": "$2",
+        "example": "Jan 1, 1970"
+      }
+    },
+    "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   }
 }