Adds middle name to AddressCard display

magento · Dec 7, 2020 · fc73ce7 · fc73ce7
1 parent 4cad770
commit fc73ce7
Show file tree

Hide file tree

Showing 3 changed files with 118 additions and 1 deletion.
diff --git a/.../venia-ui/lib/components/AddressBookPage/__tests__/__snapshots__/addressCard.spec.js.snap b/.../venia-ui/lib/components/AddressBookPage/__tests__/__snapshots__/addressCard.spec.js.snap
@@ -241,3 +241,101 @@ exports[`renders a non-default address 1`] = `
   </div>
 </div>
 `;
+
+exports[`renders an address with a middle name 1`] = `
+<div
+  className="root"
+>
+  <div
+    className="contentContainer"
+  >
+    <span
+      className="defaultBadge"
+    >
+      <mock-FormattedMessage
+        defaultMessage="Default"
+        id="addressCard.defaultText"
+      />
+    </span>
+    <span
+      className="name"
+    >
+      Philip MIDDLE Fry
+    </span>
+    <span
+      className="streetRow"
+    >
+      111 57th Street
+    </span>
+    <span
+      className="streetRow"
+    >
+      Suite 1000
+    </span>
+    <span
+      className="additionalAddress"
+    >
+      New New York, New York 10019
+    </span>
+    <span
+      className="country"
+    >
+      United States
+    </span>
+    <span
+      className="telephone"
+    >
+      <mock-FormattedMessage
+        id="addressBookPage.telephone"
+        values={
+          Object {
+            "telephone": "+12345678909",
+          }
+        }
+      />
+    </span>
+  </div>
+  <div
+    className="actionContainer"
+  >
+    <button
+      className="root_normalPriority"
+      disabled={false}
+      type="button"
+    >
+      <span
+        className="content"
+      >
+        <span
+          className="root"
+        >
+          <svg
+            className="icon"
+            fill="none"
+            height={16}
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            viewBox="0 0 24 24"
+            width={16}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"
+            />
+          </svg>
+        </span>
+        <span
+          className="actionLabel"
+        >
+          <mock-FormattedMessage
+            defaultMessage="Edit"
+            id="addressBookPage.editAddress"
+          />
+        </span>
+      </span>
+    </button>
+  </div>
+</div>
+`;
diff --git a/packages/venia-ui/lib/components/AddressBookPage/__tests__/addressCard.spec.js b/packages/venia-ui/lib/components/AddressBookPage/__tests__/addressCard.spec.js
@@ -31,3 +31,19 @@ test('renders a non-default address', () => {
 
     expect(tree.toJSON()).toMatchSnapshot();
 });
+
+test('renders an address with a middle name', () => {
+    // Arrange.
+    const myAddress = {
+        ...mockAddress,
+        middlename: 'MIDDLE'
+    };
+
+    // Act.
+    const tree = createTestInstance(
+        <AddressCard address={myAddress} countryName="United States" />
+    );
+
+    // Assert.
+    expect(tree.toJSON()).toMatchSnapshot();
+});
diff --git a/packages/venia-ui/lib/components/AddressBookPage/addressCard.js b/packages/venia-ui/lib/components/AddressBookPage/addressCard.js
@@ -16,6 +16,7 @@ const AddressCard = props => {
         country_code,
         default_shipping,
         firstname,
+        middlename = '',
         lastname,
         postcode,
         region: { region },
@@ -42,7 +43,9 @@ const AddressCard = props => {
         </span>
     ) : null;
 
-    const nameString = `${firstname} ${lastname}`;
+    const nameString = [firstname, middlename, lastname]
+        .filter(name => !!name)
+        .join(' ');
     const additionalAddressString = `${city}, ${region} ${postcode}`;
 
     const deleteButtonElement = !default_shipping ? (