Merge pull request #99 from twin-te/takonasu/#94

各種問題修正

components/MobileHeader.tsx

@@ -36,9 +36,9 @@ const MobileHeader: React.FC<Props> = ({ isLogin, handleLogin, handleLogout }) =
 		<header>
 			<div className={styles.navbar}>
 				<button onClick={() => toggleDrawer(true)} className={`navbar-burger ${styles.navbarBurger}`}>
-					<span aria-hidden="true"></span>
-					<span aria-hidden="true"></span>
-					<span aria-hidden="true"></span>
+					<div aria-hidden="true" />
+					<div aria-hidden="true" />
+					<div aria-hidden="true" />
 				</button>
 				<Link href="/" passHref>
 					<Image

components/RadioButton.tsx

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+import styles from '../styles/components/RadioButton.module.scss';
+
+type Props = {
+	defaultChecked: boolean;
+	name: string;
+	id: string;
+	value: string;
+	onChange: (inputValue: string) => void;
+	children: ReactNode;
+};
+
+export const RadioButton: React.FC<Props> = ({ defaultChecked, name, id, value, onChange, children }) => {
+	return (
+		<div className={styles.radioLabel}>
+			<input
+				className={styles.radioInput}
+				defaultChecked={defaultChecked}
+				type="radio"
+				name={name}
+				id={id}
+				value={value}
+				onChange={(event) => onChange(event.target.value)}
+			/>
+			<label htmlFor={id} className={styles.radioText}>
+				{children}
+			</label>
+		</div>
+	);
+};
+
+export default RadioButton;

package.json

@@ -13,13 +13,13 @@
     "@stripe/stripe-js": "^1.27.0",
     "axios": "^0.26.1",
     "bulma": "^0.9.3",
-    "bulma-checkradio": "^2.1.3",
     "bulma-toast": "^2.4.1",
     "dayjs": "^1.11.1",
     "next": "12.1.4",
     "next-seo": "^5.4.0",
     "react": "18.0.0",
     "react-dom": "18.0.0",
+    "react-icons": "^4.3.1",
     "react-input-slider": "^6.0.1",
     "react-modal": "^3.14.4",
     "react-modern-drawer": "^1.1.1",

pages/index.tsx

@@ -15,7 +15,7 @@ const Home: NextPage = () => {
 
 				<p>
 					いつもTwin:teをご利用いただきありがとうございます。
-					Twin:teはおかげさまで2021年2月で2周年を迎え、筑波大学生の過半数に利用していただいている状況となりました。
+					Twin:teはおかげさまで2022年2月で3周年を迎え、筑波大学生の過半数に利用していただいている状況となりました。
 				</p>
 				<p>
 					当初よりTwin:teは「<span className="has-text-weight-bold">広告なしで無料の筑波大学生専用時間割アプリ</span>
@@ -64,7 +64,7 @@ const Home: NextPage = () => {
 				<p>
 					希望する場合、寄付していただいた方のお名前とリンク（マイページで登録できます）を寄付者一覧のページに記載いたします。
 					<br />
-					また、総額3000円以上寄付していただいた方には返礼品をお送りする予定です。寄付後、info@twinte.netまでマイページの表示名と寄付金額とともにメールでご連絡ください。
+					また返礼品をご用意しております。寄付後、ご希望の方はinfo@twinte.net宛にマイページに表示されるIDと合計寄付金額・ご希望の品をご記入の上ご連絡ください。
 				</p>
 				<h2 className="title">安全性について</h2>
 				<p>

pages/mypage.tsx

@@ -12,6 +12,7 @@ import { useState } from 'react';
 import styles from '../styles/pages/MyPage.module.scss';
 import EditUserInfoModal from '../components/EditUserInfoModal';
 import { toast } from 'bulma-toast';
+import { MdEdit } from 'react-icons/md';
 
 const MyPage: NextPage = () => {
 	const isLogin = useLoginStatus();
@@ -53,7 +54,10 @@ const MyPage: NextPage = () => {
 						<div className="card">
 							<h2 className={`title ${styles.title}`}>ユーザー情報</h2>
 							<button className={`button is-text ${styles.editButton}`} onClick={() => setIsEditUserModalOpen(true)}>
-								編集する
+								<span className={styles.editIcon}>
+									<MdEdit size="1.5rem" color="#929292" />
+								</span>
+								編集
 							</button>
 							<EditUserInfoModal
 								isOpen={isEditUserModalOpen}

pages/register.tsx

@@ -11,6 +11,7 @@ import {
 } from '../usecases/stripe';
 import { NextSeo } from 'next-seo';
 import { SweetModal } from '../components/SweetAlert';
+import { RadioButton } from '../components/RadioButton';
 
 const Register: NextPage = () => {
 	const isLogin = useLoginStatus();
@@ -31,14 +32,39 @@ const Register: NextPage = () => {
 		}
 	};
 	const confirmRegistSubscription = async () => {
-		const result = await SweetModal.fire({
+		await SweetModal.fire({
 			title: 'ログインをしてください。',
 			text: '継続的な寄付をするには、右上のログインボタンよりログインをしてください。',
 			showCancelButton: false,
 			confirmButtonText: 'はい'
 		});
 	};
 
+	const radioButtons = () => {
+		const subscriptions = [
+			{ planId: stripeSubscription200yenID, label: '200円/月' },
+			{ planId: stripeSubscription500yenID, label: '500円/月' },
+			{ planId: stripeSubscription1000yenID, label: '1000円/月' }
+		];
+		return subscriptions.map((plan, index) => {
+			return (
+				<div key={index} className="field has-text-weight-bold">
+					<RadioButton
+						defaultChecked={index === 0}
+						name="priceChoice"
+						id={`plan_${index}`}
+						value={plan.planId}
+						onChange={(inputValue) => {
+							setSubscriptionID(inputValue);
+						}}
+					>
+						{plan.label}
+					</RadioButton>
+				</div>
+			);
+		});
+	};
+
 	return (
 		<>
 			<NextSeo title="寄付・サブスク登録" />
@@ -79,6 +105,9 @@ const Register: NextPage = () => {
 					</span>
 					運営することができます。
 				</p>
+				<p className={styles.priceNotification}>
+					※手数料を差し引くとTwin:teには{donationPrices[donationPriceIndex] * 0.964}円寄付されます。
+				</p>
 				<button
 					className={`button is-fullwidth is-primary ${styles.buttons}`}
 					onClick={() => {
@@ -96,44 +125,7 @@ const Register: NextPage = () => {
 					<br />
 					月ごとにお支払いいただく金額を下記から選択し、「登録する」ボタンを押すと、決済ページへ移動します。
 				</p>
-				<div style={{ margin: '2rem 0 2rem 0' }} className="field">
-					<div className="field has-text-weight-bold">
-						<input
-							className="is-checkradio"
-							type="radio"
-							name="priceChoice"
-							id="radio1"
-							onChange={() => {
-								setSubscriptionID(stripeSubscription200yenID);
-							}}
-						/>
-						<label htmlFor="radio1">200円/月</label>
-					</div>
-					<div className="field has-text-weight-bold">
-						<input
-							className="is-checkradio"
-							type="radio"
-							name="priceChoice"
-							id="radio2"
-							onChange={() => {
-								setSubscriptionID(stripeSubscription500yenID);
-							}}
-						/>
-						<label htmlFor="radio2">500円/月</label>
-					</div>
-					<div className="field has-text-weight-bold">
-						<input
-							className="is-checkradio"
-							type="radio"
-							name="priceChoice"
-							id="radio3"
-							onChange={() => {
-								setSubscriptionID(stripeSubscription1000yenID);
-							}}
-						/>
-						<label htmlFor="radio3">1000円/月</label>
-					</div>
-				</div>
+				<div className={`field ${styles.radioButtonField}`}>{radioButtons()}</div>
 				<button
 					className={`button is-fullwidth is-primary ${styles.buttons}`}
 					onClick={() => {

styles/components/MobileHeader.module.scss

@@ -10,9 +10,13 @@
     .navbarBurger {
         margin: auto 0;
         height: 40px;
-
-        span {
+        div {
+            transform: translate(-5px,5px);
             background-color: #ffffff;
+            height:3px;
+            width:30px;
+            margin:auto;
+            margin-bottom:10px;
         }
     }
 

styles/components/RadioButton.module.scss

@@ -0,0 +1,32 @@
+@import "../variables.scss";
+
+.radioLabel {
+    display: block;
+  }
+
+  .radioInput{
+    display: none;
+  }
+
+  .radioText:before {
+    content: "";
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    margin-right: 6px;
+    border-width: 2px;
+    border-style: solid;
+    border-radius: 50%;
+    padding: 3px;
+    background-clip: content-box;
+    transform: translateY(3.5px);
+  }
+
+  .radioInput:not(:checked) + .radioText:before {
+    border-color: #72767b;
+  }
+
+  .radioInput:checked + .radioText:before {
+    border-color: $primary;
+    background-color: $primary;
+  }

styles/globals.scss

@@ -2,7 +2,6 @@
 @import "./variables.scss";
 // Import Bulma styles
 @import "../node_modules/bulma/bulma.sass";
-@import '../node_modules/bulma-checkradio/dist/css/bulma-checkradio.min.css';
 
 html,
 body {

styles/pages/MyPage.module.scss

@@ -5,11 +5,18 @@
         position: absolute;
         top: 2rem;
         right: 2rem;
-        text-decoration: none
+        text-decoration: none;
+        color: #929292
     }
 
     .title {
         border-left: 5px solid $primary;
         padding-left: 1rem;
     }
+
+
+    .editIcon{
+        margin-right: 5px;
+        transform: translateY(3px);
+     }
 }

styles/pages/Register.module.scss

@@ -5,6 +5,14 @@
     padding: initial;
 }
 
+.priceNotification{
+   color: #9A9A9A;
+}
+
+.radioButtonField{
+   margin: 2rem 0 2rem 0;
+}
+
 .price{
    font-style: normal;
    font-weight: bold;

yarn.lock

@@ -610,13 +610,6 @@ braces@^3.0.2, braces@~3.0.2:
   dependencies:
     fill-range "^7.0.1"
 
-bulma-checkradio@^2.1.3:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/bulma-checkradio/-/bulma-checkradio-2.1.3.tgz#e3e1fe086cc5b522d1a13801a60c440b433b8112"
-  integrity sha512-8OmZ7PURyftNLGXSTNAYNTJHIe0OkoH/8z9iWfSXGxiv3AlrKneMtiVpBKofXsvc9ZHBUI1YjefiW5WFhgFgAQ==
-  dependencies:
-    bulma "^0.9.3"
-
 bulma-toast@^2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/bulma-toast/-/bulma-toast-2.4.1.tgz#1e0ea72a810af2cc11a5c39cf4051567f5c29434"
@@ -1860,6 +1853,11 @@ react-dom@18.0.0:
     loose-envify "^1.1.0"
     scheduler "^0.21.0"
 
+react-icons@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.3.1.tgz#2fa92aebbbc71f43d2db2ed1aed07361124e91ca"
+  integrity sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==
+
 react-input-slider@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/react-input-slider/-/react-input-slider-6.0.1.tgz#e866993796e9c25366f7960e7f6bd7c1838316ca"