feat: 注文手続きで配送方法・支払い方法の保存と復元を追加 (#6819)

.github/workflows/e2e-test.yml

@@ -30,6 +30,9 @@ jobs:
           - front-product
           - front-customer
           - front-other
+          - front-order
+          - front-mypage
+          - front-invoice
         include:
           - db: pgsql
             database_url: postgres://postgres:password@127.0.0.1:5432/eccube_db

e2e/tests/front-order.spec.ts

@@ -760,3 +760,109 @@ test.describe('Front Order (EF03)', () => {
     await expect(page.locator('.ec-cartRow__name').first()).toContainText('チェリーアイスサンド');
   });
 });
+
+/**
+ * 配送方法・支払い方法の保存と復元 (#6819)。
+ *
+ * 保存（注文確定）→ 情報ボックス表示 → 手動復元のユーザージャーニーを検証する。
+ * ゲスト除外・複数配送先・非公開時の警告などのバリエーションは
+ * PHPUnit の機能テスト（ShoppingControllerPreferredShippingPaymentTest）でカバーする。
+ *
+ * 2 つのテストは保存→復元の順序に依存するため serial で実行する。
+ */
+test.describe.serial('Front Order 配送方法・支払い方法の保存と復元 (#6819)', () => {
+
+  /**
+   * Helper: カートに商品を入れ、レジに進んで /shopping まで遷移する。
+   */
+  async function goToShopping(page: import('@playwright/test').Page) {
+    await addProductToCartAndGoToCart(page, 1);
+    await page.locator('a.ec-blockBtn--action', { hasText: 'レジに進む' }).click();
+    await page.waitForLoadState('load');
+    await expect(page).toHaveURL(/\/shopping$/);
+  }
+
+  /**
+   * Helper: 支払方法のラジオを選択する。
+   * data-trigger="change" によりフォームが /shopping/redirect_to へ送信され、画面がリロードされる。
+   */
+  async function selectPayment(page: import('@playwright/test').Page, label: string) {
+    const radio = page.getByRole('radio', { name: label });
+    if (await radio.isChecked()) {
+      return;
+    }
+    await Promise.all([
+      page.waitForResponse((resp) => resp.url().includes('/shopping/redirect_to')),
+      radio.check(),
+    ]);
+    await page.waitForLoadState('load');
+    await expect(page.getByRole('radio', { name: label })).toBeChecked();
+  }
+
+  test.afterEach(async ({ page }) => {
+    await clearCart(page);
+  });
+
+  test('保存チェックボックスONで注文すると次回の注文手続きに保存設定が表示される', async ({ page }) => {
+    await loginAsTestCustomer(page);
+    await goToShopping(page);
+
+    // 保存対象を明確にするため支払方法を「銀行振込」に変更する
+    await selectPayment(page, '銀行振込');
+
+    // 確認画面へ
+    await page.locator('.ec-blockBtn--action', { hasText: '確認する' }).click();
+    await page.waitForLoadState('load');
+    await expect(page).toHaveURL(/\/shopping\/confirm/);
+
+    // 保存チェックボックスが表示され、初期値は OFF
+    const checkbox = page.locator('input[name="_shopping_order[save_preferred_shipping_payment]"]');
+    await expect(checkbox).toBeVisible();
+    await expect(checkbox).not.toBeChecked();
+    const checkboxArea = page.locator('.ec-totalBox__preferred');
+    await expect(checkboxArea).toContainText('この配送方法と支払い方法を保存する');
+    await expect(checkboxArea).toContainText('次回の注文時にワンクリックで設定できます');
+
+    // ON にして注文する
+    await checkbox.check();
+    await page.locator('.ec-blockBtn--action', { hasText: '注文する' }).click();
+    await page.waitForLoadState('load');
+    await expect(page).toHaveURL(/\/shopping\/complete/);
+    await expect(page.locator('.ec-pageHeader h1')).toContainText('ご注文完了');
+
+    // 再度購入フローへ進むと、お客様情報の直後に情報ボックスが表示される
+    await goToShopping(page);
+    const box = page.locator('.ec-orderPreferred');
+    await expect(box).toBeVisible();
+    await expect(box).toContainText('保存された設定があります');
+    await expect(box).toContainText('配送方法: サンプル業者');
+    await expect(box).toContainText('支払い方法: 銀行振込');
+    await expect(box.locator('button', { hasText: 'この設定を使用する' })).toBeVisible();
+  });
+
+  test('「この設定を使用する」で保存された設定が復元され合計が再計算される', async ({ page }) => {
+    await loginAsTestCustomer(page);
+    await goToShopping(page);
+
+    // 前のテストで保存済みのため情報ボックスが表示される
+    const box = page.locator('.ec-orderPreferred');
+    await expect(box).toBeVisible();
+
+    // 保存値(銀行振込)と異なる支払方法を選択しておく
+    await selectPayment(page, '郵便振替');
+
+    // 復元ボタンをクリックすると /shopping に戻り、成功メッセージが表示される
+    await box.locator('button', { hasText: 'この設定を使用する' }).click();
+    await page.waitForLoadState('load');
+    await expect(page).toHaveURL(/\/shopping$/);
+    await expect(page.locator('.ec-cartRole')).toContainText('保存された設定を適用しました');
+
+    // 支払方法・配送方法が保存値に復元される
+    await expect(page.getByRole('radio', { name: '銀行振込' })).toBeChecked();
+    const selectedDelivery = page.locator('select[name="_shopping_order[Shippings][0][Delivery]"] option:checked');
+    await expect(selectedDelivery).toHaveText('サンプル業者');
+
+    // 合計金額(送料込み)が表示されている
+    await expect(page.locator('.ec-totalBox__paymentTotal')).toContainText('￥');
+  });
+});

html/template/default/assets/scss/project/_15.1.cart.scss

@@ -38,6 +38,14 @@ Styleguide 15.1
       display: inline-block;
     }
   }
+  & &__success{
+    width: 100%;
+    text-align: center;
+    .ec-alert-success {
+      max-width: 80%;
+      display: inline-block;
+    }
+  }
   & &__totalText{
     margin-bottom: 0;
     padding: 16px 0 6px;
@@ -437,6 +445,34 @@ Styleguide 15.1.6
   }
 }
 
+.ec-alert-success {
+  width: 100%;
+  padding: 10px;
+  text-align: center;
+  background: #5cb85c;
+  margin-bottom: 20px;
+
+  & &__inner {
+    display: inline-block;
+
+    &__item {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+    }
+  }
+
+  & &__text {
+    display: inline-block;
+    font-size: 16px;
+    font-weight: bold;
+    color: #fff;
+    position: relative;
+    flex: 1;
+    word-break: break-all;
+  }
+}
+