Skip to content

Commit 416c583

Browse files
BlakeKaufmanBlakeKaufman
authored
12 pos customizable sales items (#14)
* added list items to page * added rotating address
1 parent edf03e9 commit 416c583

8 files changed

Lines changed: 207 additions & 4 deletions

File tree

‎public/assets/icons/list.png‎

16.2 KB
Loading

‎public/assets/icons/plus.png‎

3.99 KB
Loading

‎src/components/balanceView/style.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
width: 100%;
33
display: flex;
44
justify-content: center;
5-
margin-bottom: auto;
65
}
76

87
.POS-totalBalance {

‎src/components/itemsList/index.js‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import displayCorrectDenomination from "../../functions/displayCorrectDenomination";
2+
import { formatBalanceAmount } from "../../functions/formatNumber";
3+
import "./style.css";
4+
5+
export default function ItemsList({
6+
listElements,
7+
currentSettings,
8+
currentUserSession,
9+
dollarSatValue,
10+
setAddedItems,
11+
}) {
12+
if (!listElements || !listElements?.length) {
13+
return (
14+
<div className="customItemsContainer">
15+
<p className="noItemsText">
16+
Coming Soon...
17+
{/* Nothing to show yet! Your employer can add items through the Blitz
18+
Wallet POS settings. */}
19+
</p>
20+
</div>
21+
);
22+
}
23+
24+
const addItemToTotal = (total) => {
25+
setAddedItems((prev) => {
26+
const newItem = { amount: total };
27+
28+
return [...prev, newItem];
29+
});
30+
};
31+
32+
const elements = listElements.map((item) => {
33+
return (
34+
<div className="itemContainer" key={item.uuid}>
35+
<div>
36+
<p>{item.name}</p>
37+
<p>
38+
{formatBalanceAmount(
39+
displayCorrectDenomination({
40+
amount: currentSettings?.displayCurrency?.isSats
41+
? Math.round(dollarSatValue * item.price)
42+
: item.price.toFixed(2),
43+
fiatCurrency: currentUserSession.account.storeCurrency || "USD",
44+
showSats: currentSettings.displayCurrency.isSats,
45+
isWord: currentSettings.displayCurrency.isWord,
46+
})
47+
)}
48+
</p>
49+
</div>
50+
<div
51+
onClick={() =>
52+
addItemToTotal(
53+
currentSettings?.displayCurrency?.isSats
54+
? Math.round(dollarSatValue * item.price)
55+
: (item.price * 100).toFixed(2)
56+
)
57+
}
58+
className="addItemIconContainer"
59+
>
60+
<img className="addItemIcon" src="/assets/icons/plus.png" />
61+
</div>
62+
</div>
63+
);
64+
});
65+
66+
return <div className="customItemsContainer">{elements}</div>;
67+
}

‎src/components/itemsList/style.css‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
.customItemsContainer {
2+
width: 100%;
3+
height: calc(min(calc(100dvw / 3), 70px) * 4);
4+
margin-top: 10px;
5+
overflow-y: scroll;
6+
}
7+
8+
.customItemsContainer .noItemsText {
9+
text-align: center;
10+
width: 90%;
11+
margin: 0 auto;
12+
}
13+
.customItemsContainer .itemContainer {
14+
width: 80%;
15+
background-color: var(--lightModeBackgroundOffset);
16+
display: flex;
17+
justify-content: space-between;
18+
align-items: center;
19+
margin: 10px auto;
20+
border-radius: 8px;
21+
padding: 10px;
22+
}
23+
.customItemsContainer .itemContainer p {
24+
margin: 0;
25+
}
26+
.customItemsContainer .itemContainer p:first-child {
27+
text-transform: capitalize;
28+
}
29+
.customItemsContainer .itemContainer .addItemIconContainer {
30+
width: 50px;
31+
height: 50px;
32+
cursor: pointer;
33+
display: flex;
34+
align-items: center;
35+
justify-content: center;
36+
}
37+
.customItemsContainer .itemContainer .addItemIcon {
38+
width: 30px;
39+
height: 30px;
40+
}

‎src/pages/paymentPage/index.js‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export default function PaymentPage() {
2020
const { satAmount, tipAmountSats } = location.state;
2121
const convertedSatAmount = satAmount + tipAmountSats;
2222
const { currentUserSession, serverName } = useGlobalContext();
23-
const liquidAdress = currentUserSession?.account?.receiveAddress;
23+
const [liquidAdress, setLiquidAdress] = useState("");
2424
const [boltzLoadingAnimation, setBoltzLoadingAnimation] = useState("");
2525
const [boltzSwapClaimInfo, setBoltzSwapClaimInfo] = useState({});
2626
const boltzInvoice = boltzSwapClaimInfo?.createdResponse?.invoice || "";
@@ -47,6 +47,16 @@ export default function PaymentPage() {
4747
[]
4848
);
4949

50+
useEffect(() => {
51+
const addressList = currentUserSession?.account?.addressesArray;
52+
if (addressList) {
53+
const arrayLength = addressList.length - 1;
54+
const randomNum = Math.round(Math.random() * arrayLength);
55+
56+
setLiquidAdress(addressList[randomNum]);
57+
} else setLiquidAdress(currentUserSession?.account?.receiveAddress);
58+
}, []);
59+
5060
useEffect(() => {
5161
async function handleInvoice() {
5262
const claimInfo = await reverseSwap(

‎src/pages/pos/index.js‎

Lines changed: 60 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import CustomKeyboard from "../../components/keypad/index.js";
1515
import BalanceView from "../../components/balanceView/index.js";
1616
import displayCorrectDenomination from "../../functions/displayCorrectDenomination.js";
1717
import { formatBalanceAmount } from "../../functions/formatNumber.js";
18+
import ItemsList from "../../components/itemsList/index.js";
1819
function POSPage() {
1920
const User = getCurrentUser();
2021
const {
@@ -33,6 +34,8 @@ function POSPage() {
3334
errorScreen: false,
3435
serverName: false,
3536
});
37+
const [activeInput, setActiveInput] = useState("keypad");
38+
const [inputTextWidths, setInputTextWidths] = useState([]);
3639
const [hasError, setHasError] = useState("");
3740
const [addedItems, setAddedItems] = useState([]);
3841
const didInitialRender = useRef(true);
@@ -129,6 +132,37 @@ function POSPage() {
129132
});
130133
}, [currentUserSession]);
131134

135+
useEffect(() => {
136+
// Loading widths for inut text elemtns to use for slider
137+
setTimeout(
138+
() => {
139+
const sliderTexts = document.querySelectorAll(".inputText");
140+
const widths = Array.from(sliderTexts).map((item) => {
141+
return item.getBoundingClientRect().width;
142+
});
143+
setInputTextWidths(widths);
144+
},
145+
currentUserSession?.account ? 0 : 500
146+
);
147+
}, [currentUserSession]);
148+
149+
const handleSlider = (event) => {
150+
const targetElement = event.target;
151+
152+
if (!Array.from(targetElement.classList).includes("inputText")) return;
153+
const children = targetElement.parentElement.children;
154+
const element = targetElement.innerHTML;
155+
156+
Array.from(children).forEach((child) => {
157+
child.classList.remove("active");
158+
if (child.innerHTML === element) {
159+
child.classList.add("active");
160+
}
161+
});
162+
163+
setActiveInput(element.toLowerCase());
164+
};
165+
132166
return (
133167
<div className="POS-Container">
134168
<PosNavbar
@@ -197,7 +231,6 @@ function POSPage() {
197231
}}
198232
balance={chargeAmount}
199233
/>
200-
201234
<p className="POS-AmountError">
202235
{convertedSatAmount > 1000
203236
? "\u00A0"
@@ -214,7 +247,32 @@ function POSPage() {
214247
)}`}
215248
</p>
216249

217-
<CustomKeyboard customFunction={addNumToBalance} />
250+
<div className="POS-savedItemsContainer" onClick={handleSlider}>
251+
<p className="active inputText">Keypad</p>
252+
<p className="inputText">Library</p>
253+
<div
254+
style={{
255+
width: inputTextWidths[activeInput === "keypad" ? 0 : 1],
256+
left:
257+
activeInput === "keypad"
258+
? 0
259+
: `calc(100% - ${inputTextWidths[1]}px)`,
260+
}}
261+
className="selectedInputBar"
262+
/>
263+
</div>
264+
265+
{activeInput === "keypad" ? (
266+
<CustomKeyboard customFunction={addNumToBalance} />
267+
) : (
268+
<ItemsList
269+
dollarSatValue={dollarSatValue}
270+
currentSettings={currentSettings}
271+
currentUserSession={currentUserSession}
272+
setAddedItems={setAddedItems}
273+
listElements={currentUserSession.account?.items}
274+
/>
275+
)}
218276

219277
<button
220278
onClick={handleInvoice}

‎src/pages/pos/style.css‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,40 @@
1818
margin-bottom: 0;
1919
margin: auto auto 0;
2020
font-size: 20px;
21+
text-align: center;
22+
}
23+
.POS-Container .POS-savedItemsContainer {
24+
width: 100%;
25+
max-width: 150px;
26+
27+
display: flex;
28+
justify-content: space-between;
29+
margin: auto auto 0;
30+
position: relative;
31+
}
32+
.POS-Container .POS-savedItemsContainer p {
33+
margin: 0 0 8px 0;
34+
cursor: pointer;
35+
}
36+
.POS-Container .POS-savedItemsContainer .active {
37+
font-weight: 500;
38+
}
39+
.POS-Container .POS-savedItemsContainer .selectedInputBar {
40+
height: 5px;
41+
width: 100px;
42+
background-color: var(--primary);
43+
position: absolute;
44+
bottom: 0;
45+
left: 0;
46+
border-radius: 8px;
47+
48+
transition: 0.5s all;
2149
}
2250

2351
.POS-Container .POS-AmountError {
2452
margin: 0 auto;
2553
text-align: center;
54+
font-size: 14px;
2655
}
2756

2857
.POS-Container .POS-btn {

0 commit comments

Comments
 (0)