@pagamio/frontend-commons-lib 0.8.284 → 0.8.286
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -266,7 +266,7 @@ export function PagamioLoginPage({ logo, text = loginPageDefaultText, appLabel,
|
|
|
266
266
|
...(loginFieldType === 'email' ? { email: '' } : { username: '' }),
|
|
267
267
|
password: '',
|
|
268
268
|
rememberMe: false,
|
|
269
|
-
} }), _jsxs("div", { className: "flex items-center justify-center gap-x-4 mt-4", children: [onForgotPassword && (_jsx(Button, { type: "button", variant: "link", onClick: onForgotPassword, className: "text-sm text-primary hover:underline", children: text.forgotPasswordLabel })), hasCreateAccount && (_jsxs(_Fragment, { children: [onForgotPassword && _jsx("span", { className: "text-muted-foreground", children: "|" }), _jsx(Button, { type: "button", variant: "link", onClick: handleCreateAccount, className: "text-sm text-primary hover:underline", children: text.createAccountLabel })] }))] })] })), activeTab === 'phone' && showPhoneTab && (_jsxs("div", { className: "space-y-4", children: [phoneError && _jsx("div", { className: "rounded-lg bg-red-50 p-4 text-sm text-red-600", children: phoneError }), phoneStep === 'enterPhone' && (_jsxs(_Fragment, { children: [_jsx(FormEngine, { fields: phoneNumberField, onSubmit: handlePhoneFormSubmit, layout: "vertical", className: "mb-0 px-0", submitButtonClass: "w-full", submitButtonText: phonePinConfig ? 'Continue' : isSendingOtp ? 'Sending code...' : 'Send code', onCancel: () => { }, showCancelButton: false, showSubmittingText: false, initialValues: { phoneNumber: '' } }), (hasCreateAccount || phonePinConfig?.onForgotPin) && (_jsxs("div", { className: "flex items-center justify-center gap-4 mt-2", children: [hasCreateAccount && (_jsx(Button, { type: "button", variant: "link", onClick: handleCreateAccount, className: "text-sm text-primary hover:underline", children: text.createAccountLabel })), hasCreateAccount && phonePinConfig?.onForgotPin && (_jsx("span", { className: "text-muted-foreground
|
|
269
|
+
} }), _jsxs("div", { className: "flex items-center justify-center gap-x-4 mt-4", children: [onForgotPassword && (_jsx(Button, { type: "button", variant: "link", onClick: onForgotPassword, className: "text-sm text-primary hover:underline", children: text.forgotPasswordLabel })), hasCreateAccount && (_jsxs(_Fragment, { children: [onForgotPassword && _jsx("span", { className: "text-muted-foreground", children: "|" }), _jsx(Button, { type: "button", variant: "link", onClick: handleCreateAccount, className: "text-sm text-primary hover:underline", children: text.createAccountLabel })] }))] })] })), activeTab === 'phone' && showPhoneTab && (_jsxs("div", { className: "space-y-4", children: [phoneError && _jsx("div", { className: "rounded-lg bg-red-50 p-4 text-sm text-red-600", children: phoneError }), phoneStep === 'enterPhone' && (_jsxs(_Fragment, { children: [_jsx(FormEngine, { fields: phoneNumberField, onSubmit: handlePhoneFormSubmit, layout: "vertical", className: "mb-0 px-0", submitButtonClass: "w-full", submitButtonText: phonePinConfig ? 'Continue' : isSendingOtp ? 'Sending code...' : 'Send code', onCancel: () => { }, showCancelButton: false, showSubmittingText: false, initialValues: { phoneNumber: '' } }), (hasCreateAccount || phonePinConfig?.onForgotPin) && (_jsxs("div", { className: "flex items-center justify-center gap-4 mt-2", children: [hasCreateAccount && (_jsx(Button, { type: "button", variant: "link", onClick: handleCreateAccount, className: "text-sm text-primary hover:underline", children: text.createAccountLabel })), hasCreateAccount && phonePinConfig?.onForgotPin && (_jsx("span", { className: "text-muted-foreground select-none", children: "|" })), phonePinConfig?.onForgotPin && (_jsx(Button, { type: "button", variant: "link", onClick: phonePinConfig.onForgotPin, className: "text-sm text-primary hover:underline", children: "Forgot PIN?" }))] }))] })), phoneStep === 'enterOtp' && phoneOtpConfig && (_jsxs(_Fragment, { children: [_jsxs("p", { className: "text-sm text-muted-foreground text-center", children: ["Enter the 6-digit code sent to ", _jsx("span", { className: "font-medium text-foreground", children: phoneNumber })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 block text-sm font-medium text-foreground text-center", children: "Verification Code" }), _jsx(OtpInput, { length: 6, value: phoneOtpValue, onChange: (v) => {
|
|
270
270
|
setPhoneOtpValue(v);
|
|
271
271
|
setPhoneError(null);
|
|
272
272
|
}, disabled: isVerifyingOtp })] }), _jsx(Button, { type: "button", onClick: handleVerifyPhoneOtp, disabled: phoneOtpValue.length !== 6 || isVerifyingOtp, className: "w-full", size: "lg", children: isVerifyingOtp ? 'Verifying...' : 'Verify & Sign In' }), _jsx("div", { className: "text-center text-sm text-muted-foreground", children: canResendPhone ? (_jsx(Button, { type: "button", variant: "ghost", onClick: handleResendPhoneOtp, disabled: isResendingOtp, className: "text-sm font-medium text-primary hover:text-primary/90", children: isResendingOtp ? 'Sending...' : 'Resend code' })) : (_jsxs("span", { children: ["Resend code in ", _jsxs("span", { className: "font-medium text-foreground", children: [phoneCountdown, "s"] })] })) }), _jsx(Button, { type: "button", variant: "ghost", onClick: () => {
|
|
@@ -6,9 +6,13 @@ const DetailsCard = ({ data, loading, buttonText, showButton = true, onClickButt
|
|
|
6
6
|
if (!loading && (!data || data.length === 0)) {
|
|
7
7
|
return null;
|
|
8
8
|
}
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
9
|
+
const rightPanelItem = data.find((item) => item.layout === 'rightPanel' || item.id === '__details_right_panel__');
|
|
10
|
+
const leftData = rightPanelItem
|
|
11
|
+
? data.filter((item) => item !== rightPanelItem)
|
|
12
|
+
: data;
|
|
13
|
+
return (_jsx("div", { className: "flex flex-col", children: _jsxs(Card, { children: [loading ? (_jsx("div", { className: "mb-2 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4", children: _jsx("div", { className: "flex items-center justify-center col-span-full", children: _jsx(LoaderComponent, {}) }) })) : (_jsxs("div", { className: `mb-2 ${rightPanelItem ? 'flex flex-col gap-6 lg:flex-row' : ''}`, children: [_jsx("div", { className: `grid grid-cols-1 gap-4 sm:grid-cols-2 ${rightPanelItem ? 'flex-1 lg:grid-cols-3' : 'md:grid-cols-4'}`, children: leftData.map((item, index) => {
|
|
14
|
+
const capitalizedLabel = item.label.charAt(0).toUpperCase() + item.label.slice(1);
|
|
15
|
+
return (_jsxs("div", { className: "flex flex-col", children: [_jsx("div", { className: "mb-1 font-medium text-sm text-muted-foreground", children: capitalizedLabel }), _jsx("div", { className: "text-foreground text-sm break-words", children: item.value })] }, item.id ?? `${item.label}-${index}`));
|
|
16
|
+
}) }), rightPanelItem && (_jsxs("div", { className: "lg:w-[320px] lg:shrink-0 lg:border-l lg:border-border lg:pl-6", children: [_jsx("div", { className: "mb-2 font-medium text-sm text-muted-foreground", children: rightPanelItem.label.charAt(0).toUpperCase() + rightPanelItem.label.slice(1) }), _jsx("div", { className: "text-foreground text-sm break-words", children: rightPanelItem.value })] }))] })), !loading && (_jsxs("div", { className: "flex justify-end gap-2 items-center", children: [actionContent && _jsx("div", { className: "flex-1 flex flex-row text-sm justify-end", children: actionContent }), showButton && (_jsx("div", { className: `flex ${actionContent ? 'justify-end' : 'justify-center sm:justify-end'}`, children: _jsx(Button, { type: "button", variant: "primary", disabled: loading, onClick: onClickButton, className: "text-sm", children: buttonText }) }))] }))] }) }));
|
|
13
17
|
};
|
|
14
18
|
export default DetailsCard;
|
package/lib/styles.css
CHANGED
|
@@ -6388,6 +6388,10 @@ video {
|
|
|
6388
6388
|
width: 50%;
|
|
6389
6389
|
}
|
|
6390
6390
|
|
|
6391
|
+
.lg\:w-\[320px\] {
|
|
6392
|
+
width: 320px;
|
|
6393
|
+
}
|
|
6394
|
+
|
|
6391
6395
|
.lg\:w-\[420px\] {
|
|
6392
6396
|
width: 420px;
|
|
6393
6397
|
}
|
|
@@ -6396,14 +6400,34 @@ video {
|
|
|
6396
6400
|
flex: none;
|
|
6397
6401
|
}
|
|
6398
6402
|
|
|
6403
|
+
.lg\:shrink-0 {
|
|
6404
|
+
flex-shrink: 0;
|
|
6405
|
+
}
|
|
6406
|
+
|
|
6399
6407
|
.lg\:grid-cols-12 {
|
|
6400
6408
|
grid-template-columns: repeat(12, minmax(0, 1fr));
|
|
6401
6409
|
}
|
|
6402
6410
|
|
|
6411
|
+
.lg\:grid-cols-3 {
|
|
6412
|
+
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
6413
|
+
}
|
|
6414
|
+
|
|
6415
|
+
.lg\:flex-row {
|
|
6416
|
+
flex-direction: row;
|
|
6417
|
+
}
|
|
6418
|
+
|
|
6403
6419
|
.lg\:gap-3 {
|
|
6404
6420
|
gap: 0.75rem;
|
|
6405
6421
|
}
|
|
6406
6422
|
|
|
6423
|
+
.lg\:border-l {
|
|
6424
|
+
border-left-width: 1px;
|
|
6425
|
+
}
|
|
6426
|
+
|
|
6427
|
+
.lg\:border-border {
|
|
6428
|
+
border-color: hsl(var(--border));
|
|
6429
|
+
}
|
|
6430
|
+
|
|
6407
6431
|
.lg\:p-12 {
|
|
6408
6432
|
padding: 3rem;
|
|
6409
6433
|
}
|
|
@@ -6416,6 +6440,10 @@ video {
|
|
|
6416
6440
|
padding-left: 4rem;
|
|
6417
6441
|
padding-right: 4rem;
|
|
6418
6442
|
}
|
|
6443
|
+
|
|
6444
|
+
.lg\:pl-6 {
|
|
6445
|
+
padding-left: 1.5rem;
|
|
6446
|
+
}
|
|
6419
6447
|
}
|
|
6420
6448
|
@media (min-width: 1280px) {
|
|
6421
6449
|
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pagamio/frontend-commons-lib",
|
|
3
3
|
"description": "Pagamio library for Frontend reusable components like the form engine and table container",
|
|
4
|
-
"version": "0.8.
|
|
4
|
+
"version": "0.8.286",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public",
|
|
7
7
|
"provenance": false
|