@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
680 lines (677 loc) • 32.8 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import _regeneratorRuntime from "@babel/runtime/regenerator";
/*
Created by Hassan Steven Compton.
March 7, 2024.
*/
import * as React from 'react';
import { useState, useEffect, useRef } from 'react';
import { useNavigate } from "react-router-dom";
import { HUDUniversalHUDUtilityManager, DownloadPDF, ConvertNumberToMoneyFormat, DisplayLegalDocumentCurrentDate, HomePanelNavigationActivation, AuthenticationPanelNavigationActivation } from "../../HUDManagers/HUDUniversalHUDUtilityManager.js";
import { CardNumberElement, CardExpiryElement, CardCvcElement, useStripe, useElements } from '@stripe/react-stripe-js';
import { useAuth } from "../../HUDComponents/AuthProvider.js";
import HUDNavigation from "../../HUDComponents/HUDNavigationComponent.js";
import HUDLogoComponent from "../../HUDComponents/HUDLogoComponent.js";
import HUDTyper from "../../HUDComponents/HUDTyper.js";
function HUDPaymentDetailsLaptopOrDesktop(_ref) {
var checkoutButtonConfigurationSettings = _ref.checkoutButtonConfigurationSettings,
handleShareCertificateUpload = _ref.handleShareCertificateUpload,
handleCardInputInFocusUpdate = _ref.handleCardInputInFocusUpdate,
handleCardInputBlurUpdate = _ref.handleCardInputBlurUpdate,
cardInputFocus = _ref.cardInputFocus,
handleExpirationDateInputInFocusUpdate = _ref.handleExpirationDateInputInFocusUpdate,
handleExpirationDateInputBlurUpdate = _ref.handleExpirationDateInputBlurUpdate,
expirationDateInputFocus = _ref.expirationDateInputFocus,
handleCVVInputInFocusUpdate = _ref.handleCVVInputInFocusUpdate,
handleCVVInputBlurUpdate = _ref.handleCVVInputBlurUpdate,
cvvInputFocus = _ref.cvvInputFocus,
handleNameOnCardInputInFocusUpdate = _ref.handleNameOnCardInputInFocusUpdate,
handleNameOnCardInputBlurUpdate = _ref.handleNameOnCardInputBlurUpdate,
handleNameOnCardInputUpdate = _ref.handleNameOnCardInputUpdate,
nameOnCardInputFocus = _ref.nameOnCardInputFocus,
nameOnCardInputValue = _ref.nameOnCardInputValue,
handleAddressLineOInputInFocusUpdate = _ref.handleAddressLineOInputInFocusUpdate,
handleAddressLineOInputBlurUpdate = _ref.handleAddressLineOInputBlurUpdate,
handleAddressLineOInputUpdate = _ref.handleAddressLineOInputUpdate,
addressLineOInputFocus = _ref.addressLineOInputFocus,
addressLineOInputValue = _ref.addressLineOInputValue,
handleAddressLineTInputInFocusUpdate = _ref.handleAddressLineTInputInFocusUpdate,
handleAddressLineTInputBlurUpdate = _ref.handleAddressLineTInputBlurUpdate,
handleAddressLineTInputUpdate = _ref.handleAddressLineTInputUpdate,
addressLineTInputFocus = _ref.addressLineTInputFocus,
addressLineTInputValue = _ref.addressLineTInputValue,
handlePostalCodeInputInFocusUpdate = _ref.handlePostalCodeInputInFocusUpdate,
handlePostalCodeInputBlurUpdate = _ref.handlePostalCodeInputBlurUpdate,
handlePostalCodeInputUpdate = _ref.handlePostalCodeInputUpdate,
postalCodeInputFocus = _ref.postalCodeInputFocus,
postalCodeInputValue = _ref.postalCodeInputValue,
handleCountryInputInFocusUpdate = _ref.handleCountryInputInFocusUpdate,
handleCountryInputBlurUpdate = _ref.handleCountryInputBlurUpdate,
handleCountryInputUpdate = _ref.handleCountryInputUpdate,
countryInputFocus = _ref.countryInputFocus,
countryInputValue = _ref.countryInputValue,
handleStateInputInFocusUpdate = _ref.handleStateInputInFocusUpdate,
handleStateInputBlurUpdate = _ref.handleStateInputBlurUpdate,
handleStateInputUpdate = _ref.handleStateInputUpdate,
stateInputFocus = _ref.stateInputFocus,
stateInputValue = _ref.stateInputValue,
handleCityInputInFocusUpdate = _ref.handleCityInputInFocusUpdate,
handleCityInputBlurUpdate = _ref.handleCityInputBlurUpdate,
handleCityInputUpdate = _ref.handleCityInputUpdate,
cityInputFocus = _ref.cityInputFocus,
cityInputValue = _ref.cityInputValue,
handlePhoneNumberInputInFocusUpdate = _ref.handlePhoneNumberInputInFocusUpdate,
handlePhoneNumberInputBlurUpdate = _ref.handlePhoneNumberInputBlurUpdate,
handlePhoneNumberInputUpdate = _ref.handlePhoneNumberInputUpdate,
phoneNumberInputFocus = _ref.phoneNumberInputFocus,
setPhoneNumberInputValue = _ref.setPhoneNumberInputValue,
phoneNumberInputValue = _ref.phoneNumberInputValue,
setCheckoutButtonHover = _ref.setCheckoutButtonHover,
checkoutButtonHover = _ref.checkoutButtonHover,
setProcessingPaymentIndicator = _ref.setProcessingPaymentIndicator,
processingPaymentIndicator = _ref.processingPaymentIndicator,
setProcessingPayment = _ref.setProcessingPayment,
processingPayment = _ref.processingPayment,
setPaymentApproval = _ref.setPaymentApproval,
paymentApproval = _ref.paymentApproval,
setCardExpirationDateComplete = _ref.setCardExpirationDateComplete,
cardExpirationDateComplete = _ref.cardExpirationDateComplete,
setCardNumberComplete = _ref.setCardNumberComplete,
cardNumberComplete = _ref.cardNumberComplete,
setCVCComplete = _ref.setCVCComplete,
cardCVCComplete = _ref.cardCVCComplete,
setCardNumberDisplay = _ref.setCardNumberDisplay,
cardNumberDisplay = _ref.cardNumberDisplay,
paymentCompletion = _ref.paymentCompletion,
_ref$paymentMessage = _ref.paymentMessage,
paymentMessage = _ref$paymentMessage === void 0 ? "\"Thank you for your purchase.\" ~ Steven Compton" : _ref$paymentMessage,
paymentAccessURL = _ref.paymentAccessURL,
paymentType = _ref.paymentType,
certificateData = _ref.certificateData,
setCardBrand = _ref.setCardBrand,
cardBrand = _ref.cardBrand,
product = _ref.product,
cardNumberInputRef = _ref.cardNumberInputRef,
checkoutDetailsRef = _ref.checkoutDetailsRef,
updateCurrentScrollPosition = _ref.updateCurrentScrollPosition,
hudPaymentComponentStyle = _ref.hudPaymentComponentStyle,
handleCardNumberOnReady = _ref.handleCardNumberOnReady,
handleCardNumberUpdate = _ref.handleCardNumberUpdate,
handleCardExpirationDateUpdate = _ref.handleCardExpirationDateUpdate,
handleCardCVCUpdate = _ref.handleCardCVCUpdate;
var _useAuth = useAuth(),
signedUser = _useAuth.signedUser,
setSignedUser = _useAuth.setSignedUser,
signedIn = _useAuth.signedIn,
signIn = _useAuth.signIn,
signOut = _useAuth.signOut;
var paymentElements = useElements();
var paymentManager = useStripe();
var hudNavigator = useNavigate();
var handlePayment = /*#__PURE__*/function () {
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event) {
var cardNumberElement, cardExpiryElement, cardCvcElement, userBillingDetails, _yield$paymentManager, error, paymentMethod, timer, paymentResult, sendReceiptTimer;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
event.preventDefault();
if (!(!paymentManager || !paymentElements)) {
_context.next = 3;
break;
}
return _context.abrupt("return");
case 3:
updateCurrentScrollPosition(0);
setProcessingPayment(true);
setProcessingPaymentIndicator("Processing...");
setPaymentApproval("Approving...");
cardNumberElement = paymentElements.getElement(CardNumberElement);
cardExpiryElement = paymentElements.getElement(CardExpiryElement);
cardCvcElement = paymentElements.getElement(CardCvcElement);
userBillingDetails = {
name: nameOnCardInputValue,
email: signedUser.email,
phone: phoneNumberInputValue,
address: {
line1: addressLineOInputValue.trim(),
line2: addressLineTInputValue.trim(),
city: cityInputValue.trim(),
state: stateInputValue.trim(),
postal_code: postalCodeInputValue,
country: countryInputValue.trim()
}
};
_context.next = 13;
return paymentManager.createPaymentMethod({
type: "card",
card: cardNumberElement,
billing_details: userBillingDetails
});
case 13:
_yield$paymentManager = _context.sent;
error = _yield$paymentManager.error;
paymentMethod = _yield$paymentManager.paymentMethod;
userBillingDetails = {
name: nameOnCardInputValue,
email: signedUser.email,
phone: phoneNumberInputValue,
address: {
line1: addressLineOInputValue.trim(),
line2: addressLineTInputValue.trim(),
city: cityInputValue.trim(),
state: stateInputValue.trim(),
postal_code: postalCodeInputValue,
country: countryInputValue.trim()
},
typeOfPayment: paymentType.option
};
setCardNumberDisplay(error === undefined ? "*******" + paymentMethod.card.last4 : "");
if (!(error !== undefined)) {
_context.next = 21;
break;
}
timer = setTimeout(function () {
setProcessingPaymentIndicator("Try again.");
setPaymentApproval("Declined");
var processingPaymentTimer = setTimeout(function () {
setProcessingPayment(false);
setProcessingPaymentIndicator("");
}, 1000);
return function () {
return clearInterval(processingPaymentTimer);
};
}, 1000);
return _context.abrupt("return", function () {
return clearInterval(timer);
});
case 21:
setProcessingPaymentIndicator("Purchasing...");
_context.next = 24;
return HUDUniversalHUDUtilityManager.ActivatePaymentSession(signedUser, signedIn, signedUser.username, error, paymentMethod, product, userBillingDetails, certificateData, undefined, paymentAccessURL);
case 24:
paymentResult = _context.sent;
if (!(paymentResult && paymentResult.ProductPaid)) {
_context.next = 30;
break;
}
setPaymentApproval("Approved ".concat(paymentResult.ProductInvoiceID));
sendReceiptTimer = setTimeout(function () {
HUDUniversalHUDUtilityManager.SendEmail(signedUser, "Your Receipt ~ ".concat(product.Name, " | ").concat(product.Quantity, " | ").concat(product.AmountDue, " | ").concat(DisplayLegalDocumentCurrentDate()), paymentMessage, checkoutDetailsRef, "".concat(signedUser.username, "_").concat(product.Name, "_").concat(product.Quantity, "_").concat(product.AmountDue, "_").concat(DisplayLegalDocumentCurrentDate()), true);
DownloadPDF(checkoutDetailsRef, "".concat(signedUser.username, "_").concat(product.Name, "_").concat(product.Quantity, "_").concat(product.AmountDue, "_").concat(DisplayLegalDocumentCurrentDate()));
if (paymentCompletion !== null && paymentCompletion !== undefined) {
paymentCompletion(checkoutDetailsRef);
}
if (handleShareCertificateUpload !== null && handleShareCertificateUpload !== undefined) {
handleShareCertificateUpload(paymentResult.TransactionID, product.Quantity);
}
}, 1869);
setProcessingPaymentIndicator("Purchase Successful!");
return _context.abrupt("return", function () {
clearInterval(sendReceiptTimer);
});
case 30:
return _context.abrupt("return", function () {});
case 31:
case "end":
return _context.stop();
}
}, _callee);
}));
return function handlePayment(_x) {
return _ref2.apply(this, arguments);
};
}();
return /*#__PURE__*/React.createElement("div", {
style: {
position: "relative",
display: "flex",
flexDirection: "column",
alignItems: "center",
transition: "height 0.769s ease-in-out, transform 0.269s ease-in-out",
boxShadow: "-7px 0px 15px -7px rgba(0, 0, 0, 0.369)",
borderRadius: "3rem",
transform: processingPayment ? "translateX(-100%)" : null,
height: processingPayment ? "0rem" : "auto",
width: "50vw",
background: "#ededed",
marginLeft: "1rem"
}
}, /*#__PURE__*/React.createElement("label", {
style: {
position: "relative",
display: "flex",
flexDirection: "column",
width: "calc(100%)",
textAlign: "center",
color: "#bfbfbf",
transition: "font-size 1.69s ease",
fontSize: "1.69rem",
fontStyle: "italic",
fontWeight: "869",
wordWrap: "break-word",
userSelect: "none",
zIndex: "469",
marginBottom: "0.69rem",
marginTop: "1.269rem"
}
}, "Credit / Debit"), /*#__PURE__*/React.createElement("label", {
style: {
position: "relative",
display: "flex",
flexDirection: "column",
width: "calc(100%)",
textAlign: "left",
color: "#bfbfbf",
transition: "font-size 1.69s ease",
fontSize: "1.269rem",
fontStyle: "italic",
fontWeight: "869",
wordWrap: "break-word",
userSelect: "none",
zIndex: "469",
marginBottom: "0.69rem",
marginLeft: "2.169rem",
marginTop: "1.269rem"
}
}, "Card Details:"), /*#__PURE__*/React.createElement("div", {
style: {
width: cardInputFocus ? "calc(41%)" : "calc(58.69%)",
marginTop: "1.269rem",
scale: cardInputFocus ? "1.169" : "1",
transition: "scale 0.269s ease-in-out, box-shadow 0.369s ease-in-out, color 0.269s ease-in-out, border-bottom 0.369s ease-in-out, width 0.269s ease-in-out",
boxShadow: cardInputFocus ? "5px 5px 5px -4.69px rgba(0, 0, 0, 0.469)" : "none",
borderRadius: "1rem",
paddingLeft: "1rem",
borderBottom: cardInputFocus ? "1px #1a1313 solid" : "1px #bfbfbf solid"
}
}, cardBrand && cardBrand !== "unknown" && /*#__PURE__*/React.createElement("img", {
style: {
objectFit: "scale-down",
height: "1.69rem",
width: "2.169rem",
boxShadow: "5px 5px 5px -7.69px rgba(0, 0, 0, 0.469)"
},
src: cardBrand !== "jcb" ? "../../../HUDContent/HUDPaymentMethods/".concat(cardBrand, "-icon.png") : null,
alt: cardBrand
}), /*#__PURE__*/React.createElement(CardNumberElement, {
onReady: handleCardNumberOnReady,
onFocus: handleCardInputInFocusUpdate,
onBlur: handleCardInputBlurUpdate,
options: hudPaymentComponentStyle,
onChange: handleCardNumberUpdate
})), /*#__PURE__*/React.createElement("div", {
style: {
position: "relative",
display: "flex",
flexDirection: "row",
justifyContent: "flex-start",
width: "100%",
marginBottom: "1.269rem",
marginLeft: "15.169rem"
}
}, /*#__PURE__*/React.createElement("div", {
style: {
width: expirationDateInputFocus ? "calc(18.69%)" : "calc(21.69%)",
scale: expirationDateInputFocus ? "1.169" : "1",
transition: "scale 0.269s ease-in-out, box-shadow 0.369s ease-in-out, color 0.269s ease-in-out, border-bottom 0.369s ease-in-out, width 0.269s ease-in-out",
boxShadow: expirationDateInputFocus ? "5px 5px 5px -4.69px rgba(0, 0, 0, 0.469)" : "none",
borderRadius: "1rem",
borderBottom: expirationDateInputFocus ? "1px #1a1313 solid" : "1px #bfbfbf solid",
paddingLeft: "0.569rem",
marginRight: "1.269rem",
marginTop: "1.269rem"
}
}, /*#__PURE__*/React.createElement(CardExpiryElement, {
onFocus: handleExpirationDateInputInFocusUpdate,
onBlur: handleExpirationDateInputBlurUpdate,
options: hudPaymentComponentStyle,
onChange: handleCardExpirationDateUpdate
})), /*#__PURE__*/React.createElement("div", {
style: {
width: cvvInputFocus ? "calc(10.69%)" : "calc(9.69%)",
scale: cvvInputFocus ? "1.169" : "1",
transition: "scale 0.269s ease-in-out, box-shadow 0.369s ease-in-out, color 0.269s ease-in-out, border-bottom 0.369s ease-in-out, width 0.269s ease-in-out",
boxShadow: cvvInputFocus ? "5px 5px 5px -4.69px rgba(0, 0, 0, 0.469)" : "none",
borderRadius: "1rem",
borderBottom: cvvInputFocus ? "1px #1a1313 solid" : "1px #bfbfbf solid",
paddingLeft: "0.569rem",
marginTop: "1.269rem"
}
}, /*#__PURE__*/React.createElement(CardCvcElement, {
onFocus: handleCVVInputInFocusUpdate,
onBlur: handleCVVInputBlurUpdate,
options: hudPaymentComponentStyle,
onChange: handleCardCVCUpdate
}))), cvvInputFocus && /*#__PURE__*/React.createElement("div", {
style: {
position: "relative",
width: "auto",
backgroundColor: "#1a1313",
color: "#fff",
textAlign: "center",
borderRadius: "1rem",
padding: "0.69rem",
zIndex: 1,
marginBottom: "1.269rem"
}
}, /*#__PURE__*/React.createElement(HUDTyper, {
speed: 15
}, "A 3 or 4 digit number usually found on the back of your card.")), /*#__PURE__*/React.createElement("input", {
type: "text",
placeholder: "Name On Card",
onFocus: handleNameOnCardInputInFocusUpdate,
onBlur: handleNameOnCardInputBlurUpdate,
onChange: handleNameOnCardInputUpdate,
value: nameOnCardInputValue,
style: {
background: "rgba(217, 217, 217, 0)",
borderRadius: "1rem",
borderBottom: nameOnCardInputValue !== "" ? nameOnCardInputFocus ? "1px #1a1313 solid" : "none" : "1px #bfbfbf solid",
borderRight: "none",
borderLeft: "none",
borderTop: "none",
outline: "none",
boxShadow: nameOnCardInputFocus ? "5px 5px 5px -4.69px rgba(0, 0, 0, 0.469)" : "none",
scale: nameOnCardInputFocus ? "1.169" : "1",
color: nameOnCardInputFocus ? "#1a1313" : "#bfbfbf",
textAlign: nameOnCardInputValue !== "" ? "center" : null,
transition: "scale 0.269s ease-in-out, box-shadow 0.369s ease-in-out, color 0.269s ease-in-out, border-bottom 0.369s ease-in-out, width 0.269s ease-in-out",
width: nameOnCardInputValue !== "" ? nameOnCardInputFocus ? "57%" : "".concat(nameOnCardInputValue.length * 3.269, "%") : "57%",
height: "2rem",
fontWeight: "bolder",
fontSize: nameOnCardInputValue === "" ? "1.269rem" : "1.69rem",
paddingLeft: "0.69rem",
marginRight: nameOnCardInputFocus ? "1rem" : "0.269rem",
marginLeft: nameOnCardInputFocus ? "1rem" : "0.269rem"
}
}), /*#__PURE__*/React.createElement("label", {
style: {
position: "relative",
display: "flex",
flexDirection: "column",
width: "calc(100%)",
textAlign: "left",
color: "#bfbfbf",
transition: "font-size 1.69s ease",
fontSize: "1.269rem",
fontStyle: "italic",
fontWeight: "869",
wordWrap: "break-word",
userSelect: "none",
zIndex: "469",
marginBottom: "0.69rem",
marginLeft: "2.169rem",
marginTop: "1.69rem"
}
}, "Address:"), /*#__PURE__*/React.createElement("input", {
type: "text",
placeholder: "Address Line 1",
onFocus: handleAddressLineOInputInFocusUpdate,
onBlur: handleAddressLineOInputBlurUpdate,
onChange: handleAddressLineOInputUpdate,
value: addressLineOInputValue,
style: {
background: "rgba(217, 217, 217, 0)",
borderRadius: "1rem",
borderBottom: addressLineOInputValue !== "" ? addressLineOInputFocus ? "1px #1a1313 solid" : "none" : "1px #bfbfbf solid",
borderRight: "none",
borderLeft: "none",
borderTop: "none",
outline: "none",
boxShadow: addressLineOInputFocus ? "5px 5px 5px -4.69px rgba(0, 0, 0, 0.469)" : "none",
scale: addressLineOInputFocus ? "1.169" : "1",
color: addressLineOInputFocus ? "#1a1313" : "#bfbfbf",
textAlign: addressLineOInputValue !== "" ? "center" : null,
transition: "scale 0.269s ease-in-out, box-shadow 0.369s ease-in-out, color 0.269s ease-in-out, border-bottom 0.369s ease-in-out, width 0.269s ease-in-out",
width: addressLineOInputValue !== "" ? addressLineOInputFocus ? "57%" : "".concat(addressLineOInputValue.length * 3.269, "%") : "57%",
height: "2rem",
fontWeight: "bolder",
fontSize: addressLineOInputValue === "" ? "1.269rem" : "1.69rem",
paddingLeft: "0.69rem",
marginRight: addressLineOInputFocus ? "1rem" : "0.269rem",
marginLeft: addressLineOInputFocus ? "1rem" : "0.269rem",
marginTop: "1.69rem"
}
}), /*#__PURE__*/React.createElement("input", {
type: "text",
placeholder: "Address Line 2",
onFocus: handleAddressLineTInputInFocusUpdate,
onBlur: handleAddressLineTInputBlurUpdate,
onChange: handleAddressLineTInputUpdate,
value: addressLineTInputValue,
style: {
background: "rgba(217, 217, 217, 0)",
borderRadius: "1rem",
borderBottom: addressLineTInputValue !== "" ? addressLineTInputFocus ? "1px #1a1313 solid" : "none" : "1px #bfbfbf solid",
borderRight: "none",
borderLeft: "none",
borderTop: "none",
outline: "none",
boxShadow: addressLineTInputFocus ? "5px 5px 5px -4.69px rgba(0, 0, 0, 0.469)" : "none",
scale: addressLineTInputFocus ? "1.169" : "1",
color: addressLineTInputFocus ? "#1a1313" : "#bfbfbf",
textAlign: addressLineTInputValue !== "" ? "center" : null,
transition: "scale 0.269s ease-in-out, box-shadow 0.369s ease-in-out, color 0.269s ease-in-out, border-bottom 0.369s ease-in-out, width 0.269s ease-in-out",
width: addressLineTInputValue !== "" ? addressLineTInputFocus ? "57%" : "".concat(addressLineTInputValue.length * 3.269, "%") : "57%",
height: "2rem",
fontWeight: "bolder",
fontSize: addressLineTInputValue === "" ? "1.269rem" : "1.69rem",
paddingLeft: "0.69rem",
marginRight: addressLineTInputFocus ? "1rem" : "0.269rem",
marginLeft: addressLineTInputFocus ? "1rem" : "0.269rem",
marginTop: "1.69rem"
}
}), /*#__PURE__*/React.createElement("input", {
type: "text",
placeholder: "City",
onFocus: handleCityInputInFocusUpdate,
onBlur: handleCityInputBlurUpdate,
onChange: handleCityInputUpdate,
value: cityInputValue,
style: {
background: "rgba(217, 217, 217, 0)",
borderRadius: "1rem",
borderBottom: cityInputValue !== "" ? cityInputFocus ? "1px #1a1313 solid" : "none" : "1px #bfbfbf solid",
borderRight: "none",
borderLeft: "none",
borderTop: "none",
outline: "none",
boxShadow: cityInputFocus ? "5px 5px 5px -4.69px rgba(0, 0, 0, 0.469)" : "none",
scale: cityInputFocus ? "1.169" : "1",
color: cityInputFocus ? "#1a1313" : "#bfbfbf",
textAlign: cityInputValue !== "" ? "center" : null,
transition: "scale 0.269s ease-in-out, box-shadow 0.369s ease-in-out, color 0.269s ease-in-out, border-bottom 0.369s ease-in-out, width 0.269s ease-in-out",
width: cityInputValue !== "" ? cityInputFocus ? "57%" : "".concat(cityInputValue.length * 3.269, "%") : "57%",
height: "2rem",
fontWeight: "bolder",
fontSize: cityInputValue === "" ? "1.269rem" : "1.69rem",
paddingLeft: "0.69rem",
marginRight: cityInputFocus ? "1rem" : "0.269rem",
marginLeft: cityInputFocus ? "1rem" : "0.269rem",
marginTop: "1.69rem"
}
}), /*#__PURE__*/React.createElement("input", {
type: "text",
placeholder: "Postal Code",
onFocus: handlePostalCodeInputInFocusUpdate,
onBlur: handlePostalCodeInputBlurUpdate,
onChange: handlePostalCodeInputUpdate,
value: postalCodeInputValue,
style: {
background: "rgba(217, 217, 217, 0)",
borderRadius: "1rem",
borderBottom: postalCodeInputValue !== "" ? postalCodeInputFocus ? "1px #1a1313 solid" : "none" : "1px #bfbfbf solid",
borderRight: "none",
borderLeft: "none",
borderTop: "none",
outline: "none",
boxShadow: postalCodeInputFocus ? "5px 5px 5px -4.69px rgba(0, 0, 0, 0.469)" : "none",
scale: postalCodeInputFocus ? "1.169" : "1",
color: postalCodeInputFocus ? "#1a1313" : "#bfbfbf",
textAlign: postalCodeInputValue !== "" ? "center" : null,
transition: "scale 0.269s ease-in-out, box-shadow 0.369s ease-in-out, color 0.269s ease-in-out, border-bottom 0.369s ease-in-out, width 0.269s ease-in-out",
width: postalCodeInputValue !== "" ? postalCodeInputFocus ? "57%" : "".concat(postalCodeInputValue.length * 3.269, "%") : "57%",
height: "2rem",
fontWeight: "bolder",
fontSize: postalCodeInputValue === "" ? "1.269rem" : "1.69rem",
paddingLeft: "0.69rem",
marginRight: postalCodeInputFocus ? "1rem" : "0.269rem",
marginLeft: postalCodeInputFocus ? "1rem" : "0.269rem",
marginTop: "1.69rem"
}
}), /*#__PURE__*/React.createElement("input", {
type: "text",
placeholder: "State (E.g: GA)",
onFocus: handleStateInputInFocusUpdate,
onBlur: handleStateInputBlurUpdate,
onChange: handleStateInputUpdate,
value: stateInputValue,
style: {
background: "rgba(217, 217, 217, 0)",
borderRadius: "1rem",
borderBottom: stateInputValue !== "" ? stateInputFocus ? "1px #1a1313 solid" : "none" : "1px #bfbfbf solid",
borderRight: "none",
borderLeft: "none",
borderTop: "none",
outline: "none",
boxShadow: stateInputFocus ? "5px 5px 5px -4.69px rgba(0, 0, 0, 0.469)" : "none",
scale: stateInputFocus ? "1.169" : "1",
color: stateInputFocus ? "#1a1313" : "#bfbfbf",
textAlign: stateInputValue !== "" ? "center" : null,
transition: "scale 0.269s ease-in-out, box-shadow 0.369s ease-in-out, color 0.269s ease-in-out, border-bottom 0.369s ease-in-out, width 0.269s ease-in-out",
width: stateInputValue !== "" ? stateInputFocus ? "57%" : "".concat(stateInputValue.length * 3.69, "%") : "57%",
height: "2rem",
fontWeight: "bolder",
fontSize: stateInputValue === "" ? "1.269rem" : "1.69rem",
paddingLeft: "0.69rem",
marginRight: stateInputFocus ? "1rem" : "0.269rem",
marginLeft: stateInputFocus ? "1rem" : "0.269rem",
marginTop: "1.69rem"
}
}), /*#__PURE__*/React.createElement("input", {
type: "text",
placeholder: "Country (E.g: US)",
onFocus: handleCountryInputInFocusUpdate,
onBlur: handleCountryInputBlurUpdate,
onChange: handleCountryInputUpdate,
value: countryInputValue,
style: {
background: "rgba(217, 217, 217, 0)",
borderRadius: "1rem",
borderBottom: countryInputValue !== "" ? countryInputFocus ? "1px #1a1313 solid" : "none" : "1px #bfbfbf solid",
borderRight: "none",
borderLeft: "none",
borderTop: "none",
outline: "none",
boxShadow: countryInputFocus ? "5px 5px 5px -4.69px rgba(0, 0, 0, 0.469)" : "none",
scale: countryInputFocus ? "1.169" : "1",
color: countryInputFocus ? "#1a1313" : "#bfbfbf",
textAlign: countryInputValue !== "" ? "center" : null,
transition: "scale 0.269s ease-in-out, box-shadow 0.369s ease-in-out, color 0.269s ease-in-out, border-bottom 0.369s ease-in-out, width 0.269s ease-in-out",
width: countryInputValue !== "" ? countryInputFocus ? "57%" : "".concat(countryInputValue.length * 3.69, "%") : "57%",
height: "2rem",
fontWeight: "bolder",
fontSize: countryInputValue === "" ? "1.269rem" : "1.69rem",
paddingLeft: "0.69rem",
marginBottom: "1.269rem",
marginRight: countryInputFocus ? "1rem" : "0.269rem",
marginLeft: countryInputFocus ? "1rem" : "0.269rem",
marginTop: "1.69rem"
}
}), signedUser && signedUser.phone && signedUser.phone.trim() !== "" ? /*#__PURE__*/React.createElement(React.Fragment, null) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("label", {
style: {
position: "relative",
display: "flex",
flexDirection: "column",
width: "calc(100%)",
textAlign: "left",
color: "#bfbfbf",
transition: "font-size 1.69s ease",
fontSize: "1.269rem",
fontStyle: "italic",
fontWeight: "869",
wordWrap: "break-word",
userSelect: "none",
zIndex: "469",
marginBottom: "0.69rem",
marginLeft: "2.169rem",
marginTop: "1.269rem"
}
}, "Contact:"), /*#__PURE__*/React.createElement("input", {
type: "text",
placeholder: "Phone",
onFocus: handlePhoneNumberInputInFocusUpdate,
onBlur: handlePhoneNumberInputBlurUpdate,
onChange: handlePhoneNumberInputUpdate,
value: phoneNumberInputValue,
style: {
background: "rgba(217, 217, 217, 0)",
borderRadius: "1rem",
borderBottom: phoneNumberInputValue !== "" ? phoneNumberInputFocus ? "1px #1a1313 solid" : "none" : "1px #bfbfbf solid",
borderRight: "none",
borderLeft: "none",
borderTop: "none",
outline: "none",
boxShadow: phoneNumberInputFocus ? "5px 5px 5px -4.69px rgba(0, 0, 0, 0.469)" : "none",
scale: phoneNumberInputFocus ? "1.169" : "1",
color: phoneNumberInputFocus ? "#1a1313" : "#bfbfbf",
textAlign: phoneNumberInputValue !== "" ? "center" : null,
transition: "scale 0.269s ease-in-out, box-shadow 0.369s ease-in-out, color 0.269s ease-in-out, border-bottom 0.369s ease-in-out, width 0.269s ease-in-out",
width: phoneNumberInputValue !== "" ? phoneNumberInputFocus ? "57%" : "".concat(phoneNumberInputValue.length * 3.269, "%") : "57%",
height: "2rem",
fontWeight: "bolder",
fontSize: phoneNumberInputValue === "" ? "1.269rem" : "1.69rem",
paddingLeft: "0.69rem",
marginBottom: "1.269rem",
marginRight: phoneNumberInputFocus ? "1rem" : "0.269rem",
marginLeft: phoneNumberInputFocus ? "1rem" : "0.269rem",
marginTop: "1.69rem"
}
})), nameOnCardInputValue && addressLineOInputValue && postalCodeInputValue && countryInputValue && stateInputValue && cityInputValue && phoneNumberInputValue && HUDUniversalHUDUtilityManager.CheckPhoneNumber(phoneNumberInputValue) === true && nameOnCardInputValue.trim() !== "" && addressLineOInputValue.trim() !== "" && postalCodeInputValue.trim() !== "" && countryInputValue.trim() !== "" && stateInputValue.trim() !== "" && cityInputValue.trim() !== "" && cardExpirationDateComplete === true && cardCVCComplete === true && /*#__PURE__*/React.createElement("div", {
style: {
position: "relative",
alignItems: "center",
transition: "transform 0.269s ease-in-out",
transform: "translate(0%, -50%)",
display: "flex",
marginBottom: "3rem",
marginTop: "3rem"
}
}, /*#__PURE__*/React.createElement(HUDNavigation, null, function (navigateTo) {
return /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
borderRadius: "40px",
border: "1px #aa1a1a solid",
background: checkoutButtonHover ? "#d10300" : "#AA1A1A",
height: "auto",
width: "auto",
textAlign: "center",
fontWeight: "bold",
fontSize: "1.69rem",
scale: checkoutButtonHover ? "1.269" : "1",
transition: "scale 0.69s ease-in-out, background 0.369s ease-in-out",
paddingBottom: "0.69rem",
paddingRight: "2rem",
paddingLeft: "2rem",
paddingTop: "0.69rem",
color: "white",
cursor: "pointer"
}, checkoutButtonConfigurationSettings),
onMouseLeave: function onMouseLeave() {
setCheckoutButtonHover(false);
return;
},
onMouseEnter: function onMouseEnter() {
setCheckoutButtonHover(true);
return;
},
onClick: handlePayment
}, /*#__PURE__*/React.createElement(HUDTyper, {
speed: 5
}, "Checkout!"));
})));
}
export default HUDPaymentDetailsLaptopOrDesktop;