gistfile1.txt

"use client";
import 'core-js/stable';

import { motion } from "framer-motion";
import { CalendarDays, CheckIcon, CreditCard, MapPin } from "lucide-react";
import Link from "next/link";
import Button from "../Button";
import React from "react";
import QRCode from "qrcode.react";
import { useOpenPix } from '@openpix/react';

type FormRegisterProps = {
  top: {
    topNumber: number;
    description: string;
    date: string;
    local: string;
    paymentMethods: string[];
    isOpen: boolean;
    link: string;
  };
};

const includedFeatures = [
  'Private forum access',
  'Member resources',
  'Entry to annual conference',
  'Official member t-shirt',
]

export default function DinnerRegister({ top }: FormRegisterProps) {


  // React.useEffect(() => {
  //   console.log('useEffect');
  //   window.$openpix.push([
  //     'charge',
  //     {
  //       modal: false,
  //       // restante dos parâmetros relacionados ao pix
  //       // ...
  //       key: 'pixKey - cpf/email/phone',
  //       value: 1000,
  //       name: 'Merchant Name',
  //       reference: 'Description name',
  //     },
  //   ]);
  // }, []);

  const [charge, setCharge] = React.useState(null);
  
  const onPay = (charge) => {
    // TODO do something
    console.log('charge was paid');
  }

  const { chargeCreate } = useOpenPix({
    
    appID: process.env.NEXT_PUBLIC_PIX_APP_ID,
    onPay,
  });

  const newCharge = async () => {
    const payload = {
      correlationID: 'myCorrelationID-19',
      value: 1, // one cent
      comment: 'Donate',
    }

    const { charge, error } = await chargeCreate(payload);
    console.log('charge', charge);
    console.log('error', error);

    if (error) {
      setError(error);
      return;
    }

    setCharge(charge);
  }

  // function newCharge() {
  //   window.$openpix = window.$openpix || [];

  //   window.$openpix.push(['config', {
  //     appID: process.env.NEXT_PUBLIC_PIX_APP_ID,
  //   }]);

  //   window.$openpix.push([
  //     'pix',
  //     {
  //       // modal: false,
  //       value: 1,
  //       correlationID: 'randomCorrelationID1',
  //       description: 'product Ab',
  //       additionalInfo: [
  //         {
  //           key: 'Product',
  //           value: 'Pencil',
  //         },
  //         {
  //           key: 'Order',
  //           value: '1748',
  //         },
  //       ],
  //     },
  //   ]);
  // }

  // if (charge) {
    if(charge) {
      console.log(charge.paymentLinkUrl)
    return <iframe 
    src={charge.paymentLinkUrl}  width="372"
    height="555"
    allow="clipboard-read; clipboard-write" />;
    // return (
    //   <div 
    //   id='#openpix-order' 
    //   data-appid={process.env.NEXT_PUBLIC_PIX_APP_ID}
    //   data-correlationid={"myCorrelationID-10"} 
    // />
    // )
    // return (
    //   <QRCode
    //     size={200}
    //     renderAs={'svg'}
    //     value={charge.brCode}
    //     includeMargin={false}
    //   />
    // );
  }


  return (
    <motion.div
      initial={{ opacity: 0, y: -10 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ delay: 0.07, duration: 0.6 }}
      className="px-4 bg-gray-950/30 hover:bg-gray-950 bg-contain text-center flex-col-reverse flex w-full relative bg-no-repeat bg-center justify-center items-center h-full"
    >
      <div className=" w-full md:min-w-[80%] md:px-4 py-7 sm:py-14 z-10 font-nexa">
        <div className="mb-8 border-b-2 border-primaryLigth pb-4 sm:mx-10">
          <h1 className="md:text-xxlg text-xlg font-nexa_boldItalic">
            Jantar Família dos Lengedários 
          </h1>
          <h2 className="md:text-xl text-lg text-primary font-bold mt-2">
           Amor Humildade União
          </h2>
        </div>

        <div className="my-10 flex flex-col w-full gap-4 text-sm sm:text-lg font-bold text-primary">
          <div className="flex items-center gap-4">
            <CalendarDays className="w-4 sm:w-6" />
            <span className="text-white">{top.date}</span>
          </div>

          <div className="flex items-center gap-4">
            <MapPin className="w-4 sm:w-6" />
            <span className="text-white">{top.local}</span>
          </div>
        </div>

        <div className="my-10 w-full">
          <div className="flex items-center gap-4 text-sm sm:text-lg font-bold text-primary">
            <CreditCard className="w-4 sm:w-6" />
            <p className="text-white uppercase">PIX</p>
          </div>

          <ul className="flex flex-col mt-4 text-sm sm:text-base">
            {top.paymentMethods.map((method, i) => (
              <li className="text-start mt-1 ml-0 sm:ml-10 uppercase" key={i}>
                <span className="text-primary">-</span> R$ {method}
              </li>
            ))}
          </ul>
        </div>

        {/* <div>
        <input
          className={`w-full rounded-md border border-transparent p-3 text-lg tracking-wider shadow-md outline-none focus:border-blue-600 bg-gray-100 text-black placeholder:text-gray-400`}
        
        />
        </div> */}

        <div className="border-b border-gray-900/10 pb-12">
          <h2 className="text-base font-semibold leading-7 text-gray-900">INSCRIÇÃO</h2>
          <p className="mt-1 text-sm leading-6 text-gray-600">Sejam bem vindos AHU!.</p>

          <div className="col-span-full mt-4">
              <label htmlFor="street-address" className="block text-sm font-medium leading-6 text-gray-900">
                Nr do Legendário Anfitrião (quem lhe convidou?)
              </label>
              <div className="mt-2">
                <input
                  type="text"
                  name="street-address"
                  id="street-address"
                  placeholder="44378"
                  className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                />
              </div>
            </div>

          <div className="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
            <div className="sm:col-span-3">
              <label htmlFor="first-name" className="block text-sm font-medium leading-6 text-gray-900">
                Seu nome completo
              </label>
              <div className="mt-2">
                <input
                  type="text"
                  name="first-name"
                  id="first-name"
                  autoComplete="given-name"
                  className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                />
              </div>

              
            </div>

            <div className="sm:col-span-3">
              <label htmlFor="first-name" className="block text-sm font-medium leading-6 text-gray-900">
                CPF
              </label>
              <div className="mt-2">
                <input
                  type="text"
                  name="first-name"
                  id="first-name"
                  autoComplete="given-name"
                  className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                />
              </div>
            </div>

            <div className="sm:col-span-6">
              <label htmlFor="email" className="block text-sm font-medium leading-6 text-gray-900">
                Email
              </label>
              <div className="mt-2">
                <input
                  id="email"
                  name="email"
                  type="email"
                  autoComplete="email"
                  className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                />
              </div>
            </div>

            <div className="sm:col-span-3">
              <label htmlFor="country" className="block text-sm font-medium leading-6 text-gray-900">
                Quantidade Adultos
              </label>
              <div className="mt-2">
                <select
                  id="quantity-adults"
                  name="quantity-adults"
                  className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:max-w-xs sm:text-sm sm:leading-6"
                >
                  <option>1</option>
                  <option>2</option>
                  <option>4</option>
                  <option>5</option>
                  <option>6</option>
                  <option>7</option>
                </select>
              </div>
            </div>

            <div className="sm:col-span-3">
              <label htmlFor="country" className="block text-sm font-medium leading-6 text-gray-900">
                Quantidade Crianças
              </label>
              <div className="mt-2">
                <select
                  id="quantity-kids"
                  name="quantity-kids"
                  className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:max-w-xs sm:text-sm sm:leading-6"
                >
                  <option>0</option>
                  <option>1</option>
                  <option>2</option>
                  <option>4</option>
                  <option>5</option>
                  <option>6</option>
                  <option>7</option>
                </select>
              </div>
            </div>

            <div className="sm:col-span-6">
            <div className="p-8 sm:p-10 lg:flex-auto">
            <h3 className="text-2xl font-bold tracking-tight text-gray-900">Informações</h3>
            <p className="mt-6 text-base leading-7 text-gray-600">
              O ticket aparecerá aqui na tela para você tirar um print, mas também irá para o seu email. Qualquer dúvida entre em contato conosco.
            </p>
            <div className="mt-10 flex items-center gap-x-4">
              <h4 className="flex-none text-sm font-semibold leading-6 text-indigo-600">O que está incluso</h4>
              <div className="h-px flex-auto bg-gray-100" />
            </div>
            <ul
              role="list"
              className="mt-8 grid grid-cols-1 gap-4 text-sm leading-6 text-gray-600 sm:grid-cols-2 sm:gap-6"
            >
              {/* {includedFeatures.map((feature) => (
                <li key={feature} className="flex gap-x-3">
                  <CheckIcon className="h-6 w-5 flex-none text-indigo-600" aria-hidden="true" />
                  {feature}
                </li>
              ))} */}
              <li key={1} className="flex gap-x-3">
                  <CheckIcon className="h-6 w-5 flex-none text-indigo-600" aria-hidden="true" />
                  3 ingressos adultos
                </li>
                <li key={1} className="flex gap-x-3">
                  <CheckIcon className="h-6 w-5 flex-none text-indigo-600" aria-hidden="true" />
                  2 ingressos crianças
                </li>
            </ul>
          </div>
            <p className="mt-6 flex items-baseline justify-center gap-x-2">
                  <span className="text-5xl font-bold tracking-tight text-gray-900">R$ 349,00</span>
                </p>
                </div>

            

            

            
          </div>
        </div>

        <Button isLink isFull isDisabled={!top.isOpen} path={top.link}>
          Pagar
        </Button>

        <button type='button' onClick={newCharge}>
        Create New Charge
      </button>

      {/* <div id="#openpix" /> */}

      {/* https://openpix.com.br/pay/8080384b-7832-4391-abfa-5afeba9caae3 */}
      {/* <div 
      id='openpix-order' 
      data-appid={process.env.NEXT_PUBLIC_PIX_APP_ID}
      data-correlationid={"myCorrelationID-8"} 
    /> */}

       
      </div>
    </motion.div>
  );
}
function setError(error: any) {
  throw new Error('Function not implemented.');
}