Merge pull request #538 from hackdays-io/feature/front-stripe-support

Feature/front stripe support
hackdays-io · Mar 17, 2024 · e052dfe · e052dfe
2 parents c0d7d6f + 4690faf
commit e052dfe
Show file tree

Hide file tree

Showing 8 changed files with 149 additions and 16,660 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/src/components/navbar.tsx b/frontend/src/components/navbar.tsx
@@ -161,6 +161,22 @@ const Navbar = () => {
           display={{ base: "none", md: "flex" }}
         >
           <Spacer />
+          <Box marginLeft={3} cursor="pointer">
+            <NextLink href="/purchase-points/purchase">
+              <a>
+                <Button
+                  bg="mint.subtle"
+                  color="mint.font"
+                  borderRadius={"16px"}
+                  variant="solid"
+                  size="md"
+                  mr={4}
+                >
+                  {t.PURCHASE}
+                </Button>
+              </a>
+            </NextLink>
+          </Box>
           <a
             href="https://s.c4j.jp/summit-nft"
             target="_blank"

diff --git a/frontend/src/locales/en.ts b/frontend/src/locales/en.ts
@@ -5,6 +5,7 @@ export default {
   EVENTGROUPS: "Event Groups",
   EVENTS: "Recent Events List",
   RECENT_EVENTS: "Recent Events",
+  PURCHASE: "Purchase points",
   HELP: "HELP",
   SIGN_IN: "Sign In",
   SIGN_OUT: "Sign Out",
@@ -221,4 +222,12 @@ export default {
   ABOUT_METADATA_DESCRIPTION: "description: Description of the NFT",
   ABOUT_METADATA_TRAITS:
     "traits: Event group ID, event name, number of participations required to get the NFT",
+
+    //Purchace points
+    POINTS_TO_BE_PURCHASED:"Enter the number of points to be purchased",
+    PAYMENT:"Payment",
+    INCORRECT_INPUT:"Input values are not numerical.",
+    PAYMENT_COMPLETED:"Payment has been completed.",
+    POINTS_IN_PROGRESS:"Settlement and the awarding of points are in progress.",
+    POINTS_AWARDED:"Points awarded!",
 };
diff --git a/frontend/src/locales/ja.ts b/frontend/src/locales/ja.ts
@@ -5,6 +5,7 @@ export default {
   EVENTGROUPS: "イベントグループ",
   EVENTS: "イベント一覧",
   RECENT_EVENTS: "最近のイベント",
+  PURCHASE: "ポイント購入",
   HELP: "ヘルプ",
   SIGN_IN: "ログイン",
   CONNECT: "接続",
@@ -221,4 +222,11 @@ export default {
   ABOUT_METADATA_DESCRIPTION: "description: NFTの説明",
   ABOUT_METADATA_TRAITS:
     "traits: イベントグループID、イベント名、NFTを取得するために必要な参加回数",
+
+  //Purchace points
+  POINTS_TO_BE_PURCHASED:"購入するポイント数を入力",
+  PAYMENT:"お支払い",
+  INCORRECT_INPUT:"入力値は数値ではありません",
+  POINTS_IN_PROGRESS:"決済とポイントの付与を実行中です。",
+  POINTS_AWARDED:"ポイントが付与されました！",
 };
diff --git a/frontend/src/pages/api/points/checkout.ts b/frontend/src/pages/api/points/checkout.ts
@@ -40,7 +40,7 @@ export default async function handler(
       },
     ],
     // todo: 購入後のリダイレクト先URLをちゃんと設定
-    success_url: "http://localhost:3000",
+    success_url: "http://localhost:3000/purchase-points/paid",
     metadata,
   });
 

diff --git a/frontend/src/pages/purchase-points/paid.tsx b/frontend/src/pages/purchase-points/paid.tsx
@@ -0,0 +1,21 @@
+import { Container, Text } from "@chakra-ui/react";
+import { useAddress } from "@thirdweb-dev/react";
+import React, { FC } from "react";
+import { useLocale } from "src/hooks/useLocale";
+
+const PurchasePointPaid: FC = () => {
+  const address = useAddress();
+  const { t } = useLocale();
+
+  return (
+    <Container maxWidth={1000} mt={{ base: 5, md: 10 }}>
+      {address && (
+        <>
+          <Text pb={5}>{t.POINTS_IN_PROGRESS}</Text>
+        </>
+      )}
+    </Container>
+  );
+};
+
+export default PurchasePointPaid;
diff --git a/frontend/src/pages/purchase-points/purchase.tsx b/frontend/src/pages/purchase-points/purchase.tsx
@@ -0,0 +1,86 @@
+import { Container, Button, useDisclosure, Input, Text, Flex } from "@chakra-ui/react";
+import { useAddress } from "@thirdweb-dev/react";
+import React, { FC, useCallback, useState  } from "react";
+import { useLocale } from "src/hooks/useLocale";
+import { ConnectWalletModal } from "./../../components/molecules/web3/ConnectWalletModal";
+
+const User: FC = () => {
+  const address = useAddress();
+  const { t } = useLocale();
+  const { onClose } = useDisclosure();
+  const {
+    isOpen: isConnectWalletOpen,
+    onOpen: onConnectWalletOpen,
+    onClose: onConnectWalletClose,
+  } = useDisclosure();
+  const [connecting, setConnecting] = useState<boolean>(false);
+  const [value, setValue] = useState('');
+  const [isValid, setIsValid] = useState(true);
+  const [valueURL, setValueURL] = useState('');
+
+  const handleOpenConnectWallet = useCallback(() => {
+    onConnectWalletOpen();
+    onClose();
+  }, [onConnectWalletOpen, onClose]);
+
+  const handlePayment = async () => {
+    const isNumeric = /^-?\d*\.?\d+$/.test(value);
+    setIsValid(isNumeric);
+    if(isNumeric){
+      try {
+        const response = await fetch(`/api/points/checkout?amount=${value}&signature=${address}`);
+        const data = await response.json();
+        // データを処理する
+        console.log(data.sessionURL);
+        setValueURL(data.sessionURL);
+        window.location.href = data.sessionURL;
+      } catch (error) {
+        console.error('Error:', error);
+      }
+    }
+  };
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => setValue(event.target.value);
+
+  return (
+    <Container maxWidth={1000} mt={{ base: 5, md: 10 }}>
+        {address ?
+            <>
+
+
+                  <Text pb={5}>{t.PURCHASE}</Text>
+                  <Flex mb={5}>
+                      <Input w={500} value={value} onChange={handleChange} placeholder={t.POINTS_TO_BE_PURCHASED}/>
+                      <Text pl={1}>pt</Text>
+                  </Flex>
+                  {!isValid && <Text pb={5} color="red">{t.INCORRECT_INPUT}</Text>}
+                  <Button
+                      backgroundColor="yellow.900"
+                      color="white"
+                      onClick={handlePayment}
+                  >
+                      {t.PAYMENT}
+                  </Button>
+
+            </>
+            : 
+            <Button
+                backgroundColor="yellow.900"
+                color="white"
+                onClick={handleOpenConnectWallet}
+            >
+                {t.SIGN_IN}
+            </Button>
+        }
+        {(!address || connecting) && (
+            <ConnectWalletModal
+                setConnecting={setConnecting}
+                onClose={onConnectWalletClose}
+                isOpen={isConnectWalletOpen}
+            />
+        )}
+    </Container>
+  );
+};
+
+export default User;
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -7439,16 +7439,16 @@ react-focus-lock@^2.9.4:
     use-sidecar "^1.1.2"
 
 react-hook-form@^7.33.1:
-  version "7.51.0"
-  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.51.0.tgz#757ae71b37c26e00590bd3788508287dcc5ecdaf"
-  integrity sha512-BggOy5j58RdhdMzzRUHGOYhSz1oeylFAv6jUSG86OvCIvlAvS7KvnRY7yoAf2pfEiPN7BesnR0xx73nEk3qIiw==
+  version "7.51.1"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.51.1.tgz#3ce5f8b5ef41903b4054a641cef8c0dc8bf8ae85"
+  integrity sha512-ifnBjl+kW0ksINHd+8C/Gp6a4eZOdWyvRv0UBaByShwU8JbVx5hTcTWEcd5VdybvmPTATkVVXk9npXArHmo56w==
 
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-remove-scroll-bar@^2.3.3, react-remove-scroll-bar@^2.3.4:
+react-remove-scroll-bar@^2.3.3, react-remove-scroll-bar@^2.3.6:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.6.tgz#3e585e9d163be84a010180b18721e851ac81a29c"
   integrity sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==
@@ -7468,11 +7468,11 @@ [email protected]:
     use-sidecar "^1.1.2"
 
 react-remove-scroll@^2.5.6:
-  version "2.5.7"
-  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.5.7.tgz#15a1fd038e8497f65a695bf26a4a57970cac1ccb"
-  integrity sha512-FnrTWO4L7/Bhhf3CYBNArEG/yROV0tKmTv7/3h9QCFvH6sndeFf1wPqOcbFVu5VAulS5dV1wGT3GZZ/1GawqiA==
+  version "2.5.9"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.5.9.tgz#6a38e7d46043abc2c6b0fb39db650b9f2e38be3e"
+  integrity sha512-bvHCLBrFfM2OgcrpPY2YW84sPdS2o2HKWJUf1xGyGLnSoEnOTOBpahIarjRuYtN0ryahCeP242yf+5TrBX/pZA==
   dependencies:
-    react-remove-scroll-bar "^2.3.4"
+    react-remove-scroll-bar "^2.3.6"
     react-style-singleton "^2.2.1"
     tslib "^2.1.0"
     use-callback-ref "^1.3.0"