andoncloud-sdk 1.7.32 → 1.7.33

package/dist/index.d.ts

@@ -321,6 +321,7 @@ declare module 'andoncloud-sdk' {
     features?: string[];
     extraPermissions?: string[];
     workplaceId?: string;
+    backgroundImage?: string;
     onTrialRequest: (featureKey: string) => Promise<boolean>;
     onFeatureRequest: (payload: FeatureRequestPayload) => Promise<boolean>;
     children: React.ReactNode;
@@ -338,6 +339,7 @@ declare module 'andoncloud-sdk' {
     featureKey: string;
     daysSinceExpiry?: number;
     workplaceId?: string;
+    backgroundImage?: string;
     cooldownInfo?: CooldownInfo;
     onTrialRequest: (featureKey: string) => Promise<boolean>;
     onFeatureRequest: (payload: FeatureRequestPayload) => Promise<boolean>;

package/dist/index.js

@@ -52,10 +52,11 @@ const ACCESS_STATE_COLORS = {
 	expired: "error.main",
 	not_purchased: "primary.main"
 };
-const makeStyles$1 = (accessState) => {
+const makeStyles$1 = (accessState, backgroundImage) => {
 	const accentColor = ACCESS_STATE_COLORS[accessState] || "primary.main";
 	return {
 		container: {
+			position: "relative",
 			display: "flex",
 			flexDirection: "column",
 			alignItems: "center",
@@ -65,7 +66,25 @@ const makeStyles$1 = (accessState) => {
 			height: "100%",
 			padding: 4,
 			textAlign: "center",
-			background: (theme) => theme.palette.gradient.dark.main
+			background: (theme) => theme.palette.gradient.dark.main,
+			...backgroundImage && {
+				"&::before": {
+					content: "\"\"",
+					position: "absolute",
+					inset: 0,
+					backgroundImage: `url(${backgroundImage})`,
+					backgroundSize: "cover",
+					backgroundPosition: "center",
+					backgroundRepeat: "no-repeat",
+					filter: "blur(12px) brightness(0.35) saturate(0.7)",
+					pointerEvents: "none",
+					zIndex: 0
+				},
+				"& > *": {
+					position: "relative",
+					zIndex: 1
+				}
+			}
 		},
 		icon: {
 			fontSize: 48,
@@ -244,13 +263,13 @@ const ICONS = {
 	expired: HourglassEmptyIcon,
 	not_purchased: ShoppingCartIcon
 };
-const AccessBlocker = ({ accessState, buttons = [], daysSinceExpiry, featureKey, workplaceId, cooldownInfo = {}, onTrialRequest, onFeatureRequest }) => {
+const AccessBlocker = ({ accessState, buttons = [], daysSinceExpiry, featureKey, workplaceId, backgroundImage, cooldownInfo = {}, onTrialRequest, onFeatureRequest }) => {
 	const { t } = useTranslation();
 	const [modalOpen, setModalOpen] = useState(false);
 	const [cooldownModalOpen, setCooldownModalOpen] = useState(false);
 	const [cooldownDays, setCooldownDays] = useState(0);
 	const [pendingAction, setPendingAction] = useState(null);
-	const styles = makeStyles$1(accessState);
+	const styles = makeStyles$1(accessState, backgroundImage);
 	const Icon = ICONS[accessState] || LockIcon;
 	const handleOpenModal = (button) => {
 		if (button.requestType && cooldownInfo[button.requestType]?.isInCooldown) {
@@ -686,7 +705,7 @@ const useAccess = (features = [], options = {}) => {
 };
 //#endregion
 //#region src/components/access/AccessGuard.js
-const AccessGuard = ({ features: featuresProp = [], extraPermissions = [], workplaceId, onTrialRequest, onFeatureRequest, children }) => {
+const AccessGuard = ({ features: featuresProp = [], extraPermissions = [], workplaceId, backgroundImage, onTrialRequest, onFeatureRequest, children }) => {
 	const { hasAccess, accessState, buttons, cooldownInfo, features } = useAccess(featuresProp, {
 		extraPermissions,
 		workplaceId
@@ -701,6 +720,7 @@ const AccessGuard = ({ features: featuresProp = [], extraPermissions = [], workp
 		daysSinceExpiry,
 		featureKey,
 		workplaceId,
+		backgroundImage,
 		cooldownInfo,
 		onTrialRequest,
 		onFeatureRequest