Thanks to visit codestin.com
Credit goes to github.com

Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 17 additions & 25 deletions app/javascript/src/components/InvoiceEmail/Header.tsx
Original file line number Diff line number Diff line change
@@ -1,42 +1,34 @@
import React, { useState } from "react";
import { Wallet, CaretDown } from "phosphor-react";
import PayOnlineMenu from "./PayOnlineMenu";
import React from "react";
import { Wallet } from "phosphor-react";

const Header = ({ invoice, stripeUrl }) => {
const [showPayMenu, setShowPayMenu] = useState<boolean>(false);

return (
<>
<div className="mt-6 mb-3 sm:flex sm:items-center sm:justify-between">
<div className="flex self-center mr-2">
<p className="text-4xl font-bold">
const Header = ({ invoice, stripeUrl }) => (
<>
<div className="mt-6 mb-3 sm:flex sm:items-center sm:justify-between">
<div className="flex self-center mr-2">
<p className="text-4xl font-bold">
Invoice #{invoice.invoice_number}
</p>
</div>
<div className="flex flex-row justify-items-right">
<div className="flex flex-col justify-items-center send-button-container ml-1">
</p>
</div>
<div className="flex flex-row justify-items-right">
<div className="flex flex-col justify-items-center send-button-container ml-1">
<a href={stripeUrl}>
<button
className="flex flex-row justify-center items-center bg-miru-han-purple-1000 rounded h-10 w-44"
onClick={() => setShowPayMenu(!showPayMenu)}
>
<div className="flex flex-row justify-between items-center">
<div className="mr-1">
<Wallet size={16} color="white" weight="bold" />
</div>
<p className="font-bold tracking-widest text-base text-miru-white-1000 ml-1">
PAY ONLINE
PAY
</p>
<div className="mr-1">
<CaretDown size={16} color="white" weight="bold" />
</div>
</div>
</button>
{showPayMenu && <PayOnlineMenu stripeUrl={stripeUrl} />}
</div>
</a>
</div>
</div>
</>
);
};
</div>
</>
);

export default Header;