購入者にも特別単価を設定できるようにする(フロント)

記事の購入者も一覧に表示されるようになるため、画面の見せ方について2つの案で画面イメージを作成しました。

2つの案

案A:ランキングをやめる案B:タブで分ける
画面紹介者と購入者を1つの一覧に並べる「紹介者ランキング」と「購入者」をタブで切り替える
順位表示しない紹介者ランキングのタブだけに表示
ページ名特別単価設定紹介者・購入者
APIの変更不要(今のAPI対応のまま)必要(購入者だけの一覧を返す)

補足:紹介者ランキングのAPIは、もともと売上の多い順に20件ずつページを分けて返す形です。今回のAPI対応で、購入者も同じ一覧に入ります。そのため、紹介者と購入者を分けて表示する場合は、APIで分けて返す形にする必要があります。

案A:ランキングをやめるAPI変更なし

紹介者と購入者を1つの一覧に並べ、順位は表示しません。並び順はAPIが返す順のまま(売上の多い順)で、フロントでは並べ替えていません。紹介者の順位を見る画面はなくなります。

案A 特別単価設定の一覧。順位なしで紹介者と購入者が並ぶ
青い枠がページ名の変更箇所です。

デモ:購入者に特別単価を設定する

変更する文言

場所現在案
ページ名(タブ・サイドバー・見出し)紹介者ランキング特別単価設定
マイ記事のメニュー紹介者ランキングを見る特別単価を設定する
0件のときの見出し紹介者ランキングはありません特別単価を設定できるユーザーはいません
0件のときの案内販売した記事が他のユーザーに紹介されると、ここで確認することができます。記事が購入されたり、紹介で売れたりすると、ここに表示されます。
ページ下部の注記※特定のユーザーに対して特別単価を設定することで、紹介料の割合を最大10%まで上乗せすることができます。※紹介者や記事を購入したユーザーに対して特別単価を設定することで、紹介料の割合を最大10%まで上乗せすることができます。
一覧の取得に失敗したときサーバーエラーにつき紹介者ランキングの取得に失敗しました。…サーバーエラーにつき特別単価を設定できるユーザーの取得に失敗しました。…
順位1位、2位…表示しない

案B:タブで分けるAPI変更あり

紹介者ランキングのタブは今の画面と同じです。購入者のタブは順位を付けず、特別単価だけを並べます。

案B 紹介者ランキングのタブ。今と同じく順位付きで紹介者だけが並ぶ
紹介者ランキングのタブ
案B 購入者のタブ。順位なしで購入者と特別単価が並ぶ
購入者のタブ(並び順はAPIが返す順のまま。試作のAPIでは新しく購入した順)

デモ:購入者のタブから特別単価を設定する

変更する文言

場所現在案
ページ名(タブ・サイドバー・見出し)紹介者ランキング紹介者・購入者
マイ記事のメニュー紹介者ランキングを見る紹介者・購入者を見る
ページ内のタブ(なし)紹介者ランキング / 購入者
購入者タブの0件表示(なし)購入者はいません
記事が購入されると、ここで確認することができます。
購入者タブの注記(なし)※購入者に特別単価を設定すると、その購入者の紹介で記事が売れたときに、紹介料の割合を最大10%まで上乗せすることができます。
一覧の取得に失敗したときサーバーエラーにつき紹介者ランキングの取得に失敗しました。…サーバーエラーにつき一覧の取得に失敗しました。…

APIは、購入者だけの一覧を返す形に変える必要があります(設定の権限まわりは今のAPI対応をそのまま使えます)。今回はローカルで仮に作って動かしています。