technote-space / frourio-demo

---

frourio-demo's Issues

[Server] Stripe の Webhook でキャプチャの失敗を補足

Please describe your suggestion: 提案の概要

カード番号 4000000000005126 でテストできるパターン

Charge succeeds but refunding a captured charge fails asynchronously with a failure_reason of expired_or_canceled_card. Note that because refund failures are asynchronous, the refund will appear to be successful at first and will only have the failed status on subsequent fetches. We also notify you of refund failures using the charge.refund.updated webhook event.

• 入室時にキャプチャしておりエラー時はステータスの変更を行っていない
• エラーは Slack の飛ばしている

ので現状でも一応問題はなさそう（要確認）
ただ失敗時のエラーはおそらく英語なので適切なエラー表示にしたほうがよい

Describe the solution you'd like: 考えうる解決方法

できれば別のクレジットカードを使用するための機能を追加したい

Describe alternatives you've considered: 考えうる代替案

このエラーが通知された場合はマニュアル対応

Additional context: 補足

試行回数だけは Stripe 確認前に変更しているので要修正

PWA

https://github.com/shadowwalker/next-pwa#readme

特権管理者

• rolesを使用して管理者を管理する権限の追加
• 管理者を管理するページの追加

README 更新

要件の修正

諸々追記

構成の修正

React Context によるSPAは管理画面
フロントは react-router-domによるルーティング

monit による監視

起動時に pid ファイル作成

CI設定

テスト追加

ゲスト用機能の実装

採用技術

next.js

要件

• ユーザー登録
• ユーザー情報入力
• ユーザーには売り上げ情報を見せないようブロック

機能

• 新規登録
• ログイン
• 予約登録 => 予約番号
• 予約確認
  • 予約中
  • 過去の履歴

その他要件

OAuth認証

余裕があれば

• 会員登録なしでの予約
  • 予約番号での確認・キャンセル
• CMS機能
  • LP
  • 部屋の紹介ページ
  • お知らせ等
  • Gutenberg を WordPress 以外で使えるか試してみたい

セットアップ方法ドキュメント修正

admin と front のセットアップ方法を分けて記述

入室処理

入室方法

QRコード

1. 入室用URLを生成（予約コード＋αから）
2. QR コード化
   https://github.com/soldair/node-qrcode
3. 検証用APIで検証
4. OKなら入室

テンキー

1. 入室用番号を発行（ランダム）
2. lock アプリ（新しく作成）に入力
3. OKなら入室
4. NG が３回で新しく発行

入室情報の有効期限

当日昼１２時~翌日１２時まで

入室情報の送信時間

連泊時

昼１２時に新しい情報を送信

チェックイン時

• 予約完了時
• チェックイン前日12時

=> 連泊に合わせてチェックイン前日12時

メールアドレスの確認

auth0 での登録時のメールは確認不要
(email_verifiedによってはチェックしたほうがいいかもしれないが面倒なので)

アカウントページでの更新時にメールアドレスは仮の変更にしておく
送信されたメールのURLが踏まれた時点で更新する

[Front] 利用者情報に変更がない場合に「お客様の登録情報を更新する」を表示させない

Please describe your suggestion: 提案の概要

ログイン済みのユーザが予約する場合、変更がなくても利用者情報入力時及び確認時に「お客様の登録情報を更新する」が表示されているが、実際には変更がないので表示は不要

Describe the solution you'd like: 考えうる解決方法

利用者情報に変更がない場合に「お客様の登録情報を更新する」を表示しないようにする

Describe alternatives you've considered: 考えうる代替案

今のままでも問題があるわけではない

Additional context: 補足

チェックアウト時間の指定

チェックアウトの選択時に時間も指定できるようにする

Search コンポーネントを何回も開くと重くなる

フロントからは過去の予約をできないようにする

バリデーション追加

createMany による seeder 高速化

https://github.com/prisma/prisma/releases/tag/2.16.0

郵便番号から住所自動入力

https://github.com/kmdsbng/zipcode_jp

ダークモードの切り替え機能

Stripeによる決済

• 予約時Stripeで与信をとる
• 入室が発生したタイミングで自動決済
• 期間中利用が無かった場合は最終日に予約した金額の8割を自動決済
• マイページに Stripeに登録されたカードの確認・削除方法を追加

予約登録画面で FullCalendar を使用する

material table の date picker をそのまま使用しているが予約可能な日付等がわからないため FullCalendar を使用して他の予約を表示したり選択不可にしたりする

Formikの置き換え

https://qiita.com/marin_a__/items/eee408c5e99d5b53416e

メールのサニタイズ処理

replace する値のサニタイズ

異常系：メール送信

再送処理

DB に送信に必要な値をqueue
cron でqueue を処理
しきい値以上失敗が続いたメールは破棄し、失敗時の処理を実行

失敗時の処理

予約完了

予約をキャンセル

予約キャンセル

特になし

日本語化

• material-table
• validation

CSRF

https://github.com/fastify/fastify-csrf
https://dai7igarashi.hatenablog.com/entry/2018/08/30/232138

PurgeCSS

https://purgecss.com/guides/next.html#next-js-plugin-next-js-9-3

e2e テスト

TestCafe とか使ってみたい

ゲスト予約時にメールアドレス必須

ログインしている場合と異なりメールアドレスはない状態
メールアドレスの入力を追加
メールアドレスの確認を必要とするかどうかは #86

Electronによるアプリ化

サーバなしでも動作させられるように

スクリーンショットの追加

README に gif で

支払い完了メール

• チェックイン時
• キャンセル時

admin と guest 用サイト構成

src => admin
新しく front ディレクトリ作成

それぞれで next.js
別 port

サーバ移行

自前でホスティング
Herokuは無料だけどコールドスタートが遅いので

license text の マークダウン表示

いくつかのライセンスが md 形式だったので
# とか入ってたら変換？
テキスト形式も含めて変換しても問題なさそうならすべてとりあえず変換

https://github.com/markedjs/marked
https://github.com/cwjohan/markdown-to-html

利用規約やプライバシーポリシー等

中身適当でとりあえず作成

cron処理

https://github.com/node-cron/node-cron

• 入室情報送信
• 異常系処理（#111）

多言語化

https://suzukalight.com/2019-09-09-react-i18next/

エラーの通知

https://frourio.io/docs/advanced/error-handling

Slack 等に通知

メール送信

• 予約完了
• キャンセル
• ...

仕様についての記述追加

かんたんな仕様
テーブル構成
使用技術
等

ドキュメント整理

予約番号の発行

ユニークかつ推測しにくい長さ
主にゲスト予約への対応

Transactions

https://www.prisma.io/docs/concepts/components/prisma-client/transactions

デモ用サーバ用意

Electron は色々警告出ちゃうのでブラウザで動作するようにサーバを用意

画像送信前に圧縮

https://stackoverflow.com/questions/61740953/reactjs-resize-image-before-upload

prisma seed

https://github.com/prisma/prisma/releases/tag/2.15.0

2.15.0 で seeding がサポートされた
しかしまだ tscofig の paths には対応していないようなので修正待ち

prisma/seeds/seeder.ts は prisma/seed.ts に移動しておく

ゲスト予約

ログインしていない状態でも予約可能にしたい

related #88

予約の入力方法改善

とりあえず予約作成できればいいという状態なのでフローを改善

1. 部屋選択 → 人数、宿泊日選択 → 顧客情報入力 → 確認のフロー
2. バリデーションエラー時に入力に戻す

半角カタカナ、数字等を許可

全角に変換して保存
https://github.com/niwaringo/moji

• カタカナのバリデーションを修正
• 全角、半角にサーバ側で変換して保存

メールの非同期送信

別プロセスで送信