24日目にLINEミニアプリが完成する初心者 ―― Day21. クーポン表示機能を実装

Last updated at 2024-12-21Posted at 2024-12-20

前回は「24 日目に LINE ミニアプリが完成する初心者 ―― Day20. 二次元コードリーダーを表示する」と題して、二次元コードリーダーについて学習していました。

今回は二次元コードリーダーの実践編として、クーポンを表示してみたいと思います。

クーポンを作成

今回は二次元コードリーダーで"HONOLULU_COOKIES"という文字列を読み取った時だけ、ホノルルクッキープレゼントのクーポンを表示する実装にして行きたいと思います。

コンポーネントの作成

はじめにクーポン用のコンポーネントを作成して行きます。

クーポンを使うボタンを下に表示しています。

src/nextjs/components/ui/Coupon/Coupon.tsx

import {
  Card,
  CardContent,
  CardHeader,
  CardMedia,
  Typography,
} from "@mui/material";
import Button from "../Button/Button";

export default function Coupon() {
  return (
    <Card className="w-11/12 bg-red-100 p-8">
      <CardHeader title="ホノルルクッキープレゼント！" />
      <CardMedia
        component="img"
        height="194"
        image="/honolulu_cookies.png"
        alt="Paella dish"
      />
      <CardContent>
        <Typography>
          本クーポン提示で、ホノルルクッキーを
          <br />
          プレゼントさせていただきます。
          <br />
          （お一人様一回限り）
        </Typography>
      </CardContent>
      <Button label="クーポン使う" />
    </Card>
  );
}

作ったコンポーネントはこのようになりました。

モーダルの追加

作ったコンポーネントをモーダルとして表示できるように追加して行きます。

モーダルはuseStateを使って管理します。

src/nextjs/pages/index.tsx

import { useState } from "react";
import Head from "next/head";
import liff from "@line/liff";
import { Modal } from "@mui/material";
import { Button, Coupon } from "@/components/ui";

export default function Home() {
  const [text, setText] = useState("ここにテキストが表示されます");
  const [open, setOpen] = useState<boolean>(true);

  const handleClick = () => {
    liff
      .scanCodeV2()
      .then((result) => {
        setText(result.value);
      })
      .catch((error) => {
        console.log("error", error);
      });
  };

  return (
    <div>
      <Head>
        <title>Mahalo Living</title>
      </Head>
      <div className="home">
        <h1 className="home__title">Mahalo Living</h1>
      </div>
      <div className="text-center">
        <Button
          label="二次元コードリーダー"
          onClick={() => handleClick()}
          width="w-1/2"
        />
        <h1 className="text-3xl font-medium text-center p-12">{text}</h1>
        <Modal
          open={open}
          onClose={() => setOpen(false)}
          className="flex items-center"
        >
          <div className="flex justify-center">
            <Coupon onClose={setOpen} />
          </div>
        </Modal>
      </div>
    </div>
  );
}

上記のコードではCouponにsetOpenを渡していますが、まだCoupon側で受け取る設定が設定ができていないため、以下の通り追加を行って行きます。

src/nextjs/components/ui/Coupon/Coupon.tsx

export default function Coupon({ onClose }: {onClose: Dispatch<SetStateAction<boolean>>}) {
  return (
    <Card className="w-11/12 bg-red-100 p-8">

      {/* 中略 */}

      <Button label="クーポン使う" onClick={() => onClose(false)} />
    </Card>
  );
}

クーポンコードの判定ロジック追加

ここまでの実装ではクーポンコードに応じたモーダルオープンが実装出来ていないため追加を行って行きます。

handleClickのthenにロジックを追加します。

src/nextjs/pages/index.tsx

  const handleClick = () => {
    liff
      .scanCodeV2()
      .then((result) => {
        if (result.value === "HONOLULU_COOKIES") {
          setText("クーポンを取得しました");
          setOpen(true);
        } else {
          setText("クーポンが取得できませんでした");
        }
      })
      .catch((error) => {
        console.log("error", error);
      });
  };