@uniformdev/context-ui 17.5.1-alpha.105 → 17.5.1-alpha.130
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.
- package/dist/index.d.ts +80 -80
- package/dist/index.esm.js +32 -32
- package/dist/index.js +32 -32
- package/dist/index.mjs +32 -32
- package/package.json +4 -4
package/dist/index.d.ts
CHANGED
|
@@ -1,18 +1,22 @@
|
|
|
1
1
|
import * as _emotion_react_types_jsx_namespace from '@emotion/react/types/jsx-namespace';
|
|
2
|
-
import
|
|
3
|
-
import React, { ReactElement, ComponentType } from 'react';
|
|
4
|
-
import { DimensionDefinition, ManifestGetResponse } from '@uniformdev/context/api';
|
|
5
|
-
import { EnrichmentData, VariantMatchCriteria, DimensionMatch } from '@uniformdev/context';
|
|
6
|
-
import * as yup from 'yup';
|
|
2
|
+
import { DimensionMatch, EnrichmentData, VariantMatchCriteria } from '@uniformdev/context';
|
|
7
3
|
import { InputComboBoxProps, InputComboBoxOption } from '@uniformdev/design-system';
|
|
8
4
|
export * from '@uniformdev/design-system';
|
|
5
|
+
import { DimensionDefinition, ManifestGetResponse } from '@uniformdev/context/api';
|
|
6
|
+
import React, { ComponentType, ReactElement } from 'react';
|
|
7
|
+
import * as _emotion_react from '@emotion/react';
|
|
8
|
+
import * as yup from 'yup';
|
|
9
9
|
|
|
10
|
-
declare type
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
10
|
+
declare type CriteriaOperatorMenuProps = {
|
|
11
|
+
value: DimensionMatch['op'];
|
|
12
|
+
onChange: (newValue: DimensionMatch['op']) => void;
|
|
13
|
+
} & Omit<InputComboBoxProps<InputComboBoxOption, false>, 'value' | 'options' | 'onChange'>;
|
|
14
|
+
declare const contextCriteriaMenuOperators: Array<{
|
|
15
|
+
name: string;
|
|
16
|
+
description?: string;
|
|
17
|
+
value: DimensionMatch['op'];
|
|
18
|
+
}>;
|
|
19
|
+
declare function CriteriaOperatorMenu({ onChange, value, ...props }: CriteriaOperatorMenuProps): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
16
20
|
|
|
17
21
|
interface ContextConfig {
|
|
18
22
|
projectId?: string;
|
|
@@ -27,52 +31,6 @@ declare type ResolvedDimensionDefinition = DimensionDefinition & {
|
|
|
27
31
|
displayName: string;
|
|
28
32
|
};
|
|
29
33
|
|
|
30
|
-
declare const addEnrichmentLink: _emotion_react.SerializedStyles;
|
|
31
|
-
interface EnrichmentTagProps {
|
|
32
|
-
value: EnrichmentData[] | null | undefined;
|
|
33
|
-
setValue: (value: EnrichmentData[] | null) => void;
|
|
34
|
-
contextConfig: ContextConfig;
|
|
35
|
-
displayTitle?: boolean;
|
|
36
|
-
}
|
|
37
|
-
declare const EnrichmentTag: React.FC<EnrichmentTagProps>;
|
|
38
|
-
|
|
39
|
-
interface PersonalizationCriteriaStaticProps {
|
|
40
|
-
value: VariantMatchCriteria | null | undefined;
|
|
41
|
-
setValue: (value: VariantMatchCriteria | null) => void;
|
|
42
|
-
dimensions: DimensionsData;
|
|
43
|
-
displayTitle?: boolean;
|
|
44
|
-
onMenuOpen?: () => void;
|
|
45
|
-
onMenuClose?: () => void;
|
|
46
|
-
onAddCriteria?: (value: VariantMatchCriteria) => void;
|
|
47
|
-
onRemoveCriteria?: (value: VariantMatchCriteria | null) => void;
|
|
48
|
-
components?: {
|
|
49
|
-
NoDimensionsDefined?: React.ComponentType;
|
|
50
|
-
Title?: React.ComponentType;
|
|
51
|
-
CustomVariantName?: React.ComponentType;
|
|
52
|
-
};
|
|
53
|
-
errors?: {
|
|
54
|
-
lhs?: Array<string | undefined>;
|
|
55
|
-
rhs?: Array<string | undefined>;
|
|
56
|
-
};
|
|
57
|
-
}
|
|
58
|
-
declare const PersonalizationCriteriaStatic: React.FC<PersonalizationCriteriaStaticProps>;
|
|
59
|
-
|
|
60
|
-
declare type ParameterValidationError<TValue> = TValue extends string | number | boolean ? string : {
|
|
61
|
-
[key in keyof TValue]: ParameterValidationError<TValue[key]> | undefined;
|
|
62
|
-
};
|
|
63
|
-
declare function convertErrorsToObj(errors: yup.ValidationError[]): ParameterValidationError<VariantMatchCriteria>;
|
|
64
|
-
declare type PersonalizationCriteriaProps = {
|
|
65
|
-
contextConfig: ContextConfig;
|
|
66
|
-
} & Omit<PersonalizationCriteriaStaticProps, 'dimensions'>;
|
|
67
|
-
declare const PersonalizationCriteria: React.FC<PersonalizationCriteriaProps>;
|
|
68
|
-
|
|
69
|
-
declare type UIVersionProps = {
|
|
70
|
-
versionMap: Record<number, React.ComponentType>;
|
|
71
|
-
children?: React.ReactNode;
|
|
72
|
-
contextConfig: ContextConfig;
|
|
73
|
-
};
|
|
74
|
-
declare function ProjectUIVersion({ children, versionMap, contextConfig }: UIVersionProps): ReactElement;
|
|
75
|
-
|
|
76
34
|
interface UseContextDataResult {
|
|
77
35
|
result: ManifestGetResponse | null;
|
|
78
36
|
error: string | null;
|
|
@@ -104,16 +62,13 @@ declare function useContextConfig(): ContextConfig;
|
|
|
104
62
|
declare function useManifest(): ManifestGetResponse;
|
|
105
63
|
declare function useDimensionsDataContext(): DimensionsData;
|
|
106
64
|
|
|
107
|
-
declare type
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
value: DimensionMatch['op'];
|
|
115
|
-
}>;
|
|
116
|
-
declare function CriteriaOperatorMenu({ onChange, value, ...props }: CriteriaOperatorMenuProps): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
65
|
+
declare type CriteriaMatchMenuProps = {
|
|
66
|
+
criteriaMatch: DimensionMatch;
|
|
67
|
+
dimensions: DimensionsData;
|
|
68
|
+
errorMessage?: string;
|
|
69
|
+
onChange: (newCriteria: DimensionMatch) => void;
|
|
70
|
+
} & Omit<InputComboBoxProps<InputComboBoxOption, false>, 'value' | 'options' | 'onChange' | 'inputValue' | 'value' | 'onInputChange'>;
|
|
71
|
+
declare function CriteriaMatchMenu({ onChange, criteriaMatch, dimensions, errorMessage, ...props }: CriteriaMatchMenuProps): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
117
72
|
|
|
118
73
|
declare type DimensionMenuProps = {
|
|
119
74
|
value?: ResolvedDimensionDefinition;
|
|
@@ -123,24 +78,63 @@ declare type DimensionMenuProps = {
|
|
|
123
78
|
} & Omit<InputComboBoxProps<InputComboBoxOption, false>, 'value' | 'options' | 'onChange'>;
|
|
124
79
|
declare function DimensionMenu({ onChange, value, dimensions, errorMessage, ...props }: DimensionMenuProps): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
125
80
|
|
|
126
|
-
declare type CriteriaMatchMenuProps = {
|
|
127
|
-
criteriaMatch: DimensionMatch;
|
|
128
|
-
dimensions: DimensionsData;
|
|
129
|
-
errorMessage?: string;
|
|
130
|
-
onChange: (newCriteria: DimensionMatch) => void;
|
|
131
|
-
} & Omit<InputComboBoxProps<InputComboBoxOption, false>, 'value' | 'options' | 'onChange' | 'inputValue' | 'value' | 'onInputChange'>;
|
|
132
|
-
declare function CriteriaMatchMenu({ onChange, criteriaMatch, dimensions, errorMessage, ...props }: CriteriaMatchMenuProps): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
133
|
-
|
|
134
81
|
declare type DimensionValueProps = {
|
|
135
82
|
displayName: string;
|
|
136
83
|
};
|
|
137
84
|
declare function DimensionValue({ displayName }: DimensionValueProps): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
138
85
|
|
|
139
|
-
declare
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
}
|
|
86
|
+
declare type EditLinkProps = {
|
|
87
|
+
linkTo: string;
|
|
88
|
+
name?: string;
|
|
89
|
+
linkText?: string;
|
|
90
|
+
};
|
|
91
|
+
declare const EditLink: ({ linkTo, name, linkText }: EditLinkProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
92
|
+
|
|
93
|
+
declare const addEnrichmentLink: _emotion_react.SerializedStyles;
|
|
94
|
+
interface EnrichmentTagProps {
|
|
95
|
+
value: EnrichmentData[] | null | undefined;
|
|
96
|
+
setValue: (value: EnrichmentData[] | null) => void;
|
|
97
|
+
contextConfig: ContextConfig;
|
|
98
|
+
displayTitle?: boolean;
|
|
99
|
+
}
|
|
100
|
+
declare const EnrichmentTag: React.FC<EnrichmentTagProps>;
|
|
101
|
+
|
|
102
|
+
interface PersonalizationCriteriaStaticProps {
|
|
103
|
+
value: VariantMatchCriteria | null | undefined;
|
|
104
|
+
setValue: (value: VariantMatchCriteria | null) => void;
|
|
105
|
+
dimensions: DimensionsData;
|
|
106
|
+
displayTitle?: boolean;
|
|
107
|
+
onMenuOpen?: () => void;
|
|
108
|
+
onMenuClose?: () => void;
|
|
109
|
+
onAddCriteria?: (value: VariantMatchCriteria) => void;
|
|
110
|
+
onRemoveCriteria?: (value: VariantMatchCriteria | null) => void;
|
|
111
|
+
components?: {
|
|
112
|
+
NoDimensionsDefined?: React.ComponentType;
|
|
113
|
+
Title?: React.ComponentType;
|
|
114
|
+
CustomVariantName?: React.ComponentType;
|
|
115
|
+
};
|
|
116
|
+
errors?: {
|
|
117
|
+
lhs?: Array<string | undefined>;
|
|
118
|
+
rhs?: Array<string | undefined>;
|
|
119
|
+
};
|
|
120
|
+
}
|
|
121
|
+
declare const PersonalizationCriteriaStatic: React.FC<PersonalizationCriteriaStaticProps>;
|
|
122
|
+
|
|
123
|
+
declare type ParameterValidationError<TValue> = TValue extends string | number | boolean ? string : {
|
|
124
|
+
[key in keyof TValue]: ParameterValidationError<TValue[key]> | undefined;
|
|
125
|
+
};
|
|
126
|
+
declare function convertErrorsToObj(errors: yup.ValidationError[]): ParameterValidationError<VariantMatchCriteria>;
|
|
127
|
+
declare type PersonalizationCriteriaProps = {
|
|
128
|
+
contextConfig: ContextConfig;
|
|
129
|
+
} & Omit<PersonalizationCriteriaStaticProps, 'dimensions'>;
|
|
130
|
+
declare const PersonalizationCriteria: React.FC<PersonalizationCriteriaProps>;
|
|
131
|
+
|
|
132
|
+
declare type UIVersionProps = {
|
|
133
|
+
versionMap: Record<number, React.ComponentType>;
|
|
134
|
+
children?: React.ReactNode;
|
|
135
|
+
contextConfig: ContextConfig;
|
|
136
|
+
};
|
|
137
|
+
declare function ProjectUIVersion({ children, versionMap, contextConfig }: UIVersionProps): ReactElement;
|
|
144
138
|
|
|
145
139
|
interface UseValidateContextConfigResult {
|
|
146
140
|
validating: boolean;
|
|
@@ -153,4 +147,10 @@ declare function isEnrichmentTagData(obj: any): obj is EnrichmentData[];
|
|
|
153
147
|
declare function isPersonalizationCriteriaData(obj: any): obj is VariantMatchCriteria;
|
|
154
148
|
declare function opHasRhs(op: string): boolean;
|
|
155
149
|
|
|
150
|
+
declare const validateContextConfig: (contextConfig?: ContextConfig) => Promise<{
|
|
151
|
+
valid: boolean;
|
|
152
|
+
error?: Error;
|
|
153
|
+
result?: ManifestGetResponse;
|
|
154
|
+
}>;
|
|
155
|
+
|
|
156
156
|
export { ContextConfig, ContextData, ContextDataProps, CriteriaMatchMenu, CriteriaMatchMenuProps, CriteriaOperatorMenu, CriteriaOperatorMenuProps, DataContextErrorProps, DimensionMenu, DimensionMenuProps, DimensionValue, DimensionValueProps, DimensionsData, EditLink, EditLinkProps, EnrichmentTag, EnrichmentTagProps, PersonalizationCriteria, PersonalizationCriteriaProps, PersonalizationCriteriaStatic, PersonalizationCriteriaStaticProps, ProjectUIVersion, ResolvedDimensionDefinition, UseContextDataResult, UseDimensionsResult, UseValidateContextConfigResult, addEnrichmentLink, contextCriteriaMenuOperators, convertErrorsToObj, isEnrichmentTagData, isPersonalizationCriteriaData, opHasRhs, useContextConfig, useContextData, useDimensions, useDimensionsDataContext, useManifest, useValidateContextConfig, validateContextConfig };
|
package/dist/index.esm.js
CHANGED
|
@@ -1,4 +1,19 @@
|
|
|
1
|
-
import{jsx as c}from"@emotion/react";import*as h from"react";import{
|
|
1
|
+
import{jsx as c}from"@emotion/react";import*as h from"react";import{InputComboBox as qe}from"@uniformdev/design-system";import{css as Ge}from"@emotion/react";import{jsx as He}from"@emotion/react/jsx-runtime";function N({op:e}){return He("div",{className:"operation-bubble",css:Ge`
|
|
2
|
+
align-items: center;
|
|
3
|
+
background: var(--gray-700);
|
|
4
|
+
border-radius: var(--rounded-full);
|
|
5
|
+
color: var(--white);
|
|
6
|
+
display: flex;
|
|
7
|
+
width: 30px;
|
|
8
|
+
height: 30px;
|
|
9
|
+
justify-content: center;
|
|
10
|
+
font-size: var(--fs-base);
|
|
11
|
+
`,children:e})}import{jsx as K,jsxs as We}from"@emotion/react/jsx-runtime";var ue=e=>{var l,d;let{data:t,getStyles:o,isDisabled:a,innerRef:r,innerProps:n}=e,[s,i]=(d=(l=t.label)==null?void 0:l.split(":"))!=null?d:[];return We("div",{css:{...o("option",e),display:"flex",alignItems:"center",gap:"var(--spacing-sm)"},ref:r,"aria-disabled":a,...n,children:[i?K(N,{op:s}):K("div",{css:{width:"20px",height:"20px"}}),K("div",{children:i!=null?i:s})]})};import{jsx as ce}from"@emotion/react/jsx-runtime";var de=e=>{let{data:t,getStyles:o}=e;return ce("div",{css:{...o("singleValue",e),width:"max-content"},children:t.label.length===1?ce(N,{op:t.label}):t.label})};import{jsx as _e}from"@emotion/react/jsx-runtime";var fe=[{name:"=",description:"equals",value:"="},{name:"\u2260",description:"not equal",value:"!="},{name:">",description:"is greater than",value:">"},{name:"\u2265",description:"is greater than or equal to",value:">="},{name:"<",description:"is less than",value:"<"},{name:"\u2264",description:"is less than or equal to",value:"<="},{name:"has the strongest score",value:"+"},{name:"has the weakest score",value:"-"}];function ge({onChange:e,value:t,...o}){var a,r;return _e(qe,{...o,value:{label:(r=(a=fe.find(n=>n.value===t))==null?void 0:a.name)!=null?r:t,value:t},options:fe.map(n=>({label:n.description?`${n.name}:${n.description}`:n.name,value:n.value})),styles:{...o.styles,valueContainer:(n,s)=>{var i,l;return{...n,padding:"var(--spacing-sm)",...(l=(i=o.styles)==null?void 0:i.valueContainer)==null?void 0:l.call(i,n,s)}},menu:(n,s)=>{var i,l;return{...n,width:"max-content",...(l=(i=o.styles)==null?void 0:i.menu)==null?void 0:l.call(i,n,s)}},control:(n,s)=>{var i,l;return{...n,border:0,...(l=(i=o.styles)==null?void 0:i.control)==null?void 0:l.call(i,n,s)}},indicatorSeparator:(n,s)=>{var i,l;return{...n,display:"none",...(l=(i=o.styles)==null?void 0:i.indicatorSeparator)==null?void 0:l.call(i,n,s)}}},onChange:n=>{n&&e(n.value)},components:{SingleValue:de,Option:ue,...o.components}})}import{LoadingIndicator as tt}from"@uniformdev/design-system";import{createContext as nt,useContext as Y}from"react";import{ApiClientError as Fe,CachedManifestClient as je}from"@uniformdev/context/api";import{useEffect as Ke,useState as Ye}from"react";function z({apiHost:e,apiKey:t,projectId:o}){let[a,r]=Ye({loading:!1,notConfigured:!1,error:null,result:null});return Ke(()=>{if(!o||!t||!e){r({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{r({notConfigured:!1,loading:!0,error:null,result:null});try{let i=await new je({projectId:o,apiKey:t,apiHost:e}).get({preview:!0});r({notConfigured:!1,loading:!1,error:null,result:i})}catch(s){let i;s instanceof Fe?(s.statusCode===403&&(i=`The API key ${t} did not have permissions to fetch the manifest. Ensure Context > Read Drafts permissions are granted.`),i=s.message):i=s.toString(),r({notConfigured:!1,loading:!1,error:i,result:null});return}})()},[e,t,o]),{result:a.result,error:a.error,loading:a.loading,notConfigured:a.notConfigured}}import{ApiClientError as Xe,CachedDimensionClient as Je,computeDimensionDisplayName as Qe}from"@uniformdev/context/api";import{useEffect as Ze,useState as et}from"react";function Ce(e,t,o){return e.reduce((a,r)=>{let n=t(r);if(typeof n=="undefined"||n===null)throw new Error("Objectify key selector returned undefined or null.");return a[t(r)]=o?o(r):r,a},{})}function V({apiHost:e,apiKey:t,projectId:o}){let[a,r]=et({loading:!1,notConfigured:!1,error:null,result:null});return Ze(()=>{if(!o||!t||!e){r({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{r({notConfigured:!1,loading:!0,error:null,result:null});try{let i=(await new Je({projectId:o,apiKey:t,apiHost:e}).get()).dimensions.map(d=>({...d,displayName:Qe(d)})),l={dimensions:i,dimIndex:Ce(i,d=>d.dim,d=>d)};r({notConfigured:!1,loading:!1,error:null,result:l})}catch(s){let i;s instanceof Xe?i=s.message:i=s.toString(),r({notConfigured:!1,loading:!1,error:i,result:null});return}})()},[e,t,o]),{result:a.result,error:a.error,loading:a.loading,notConfigured:a.notConfigured}}import{Fragment as he,jsx as E}from"@emotion/react/jsx-runtime";var L=nt(null),$n=({loadingComponent:e,errorComponent:t,contextConfig:o,children:a})=>{let r=z(o),n=V(o);return r.error||r.notConfigured?t?E(t,{contextConfig:o,result:r}):E(he,{children:"ErrorComponent is not configured"}):n.error||n.notConfigured?t?E(t,{contextConfig:o,result:n}):E(he,{children:"ErrorComponent is not configured"}):r.loading||n.loading?e?E(e,{}):E(tt,{}):E(L.Provider,{value:{manifest:r.result,dimensions:n.result,contextConfig:o},children:a})};function An(){let e=Y(L);if(!(e!=null&&e.contextConfig))throw new Error("Not within DataContext! Configuration data is not exist.");return e.contextConfig}function Un(){let e=Y(L);if(!(e!=null&&e.manifest))throw new Error("Not within DataContext! Manifest data is not exist.");return e.manifest}function Gn(){let e=Y(L);if(!(e!=null&&e.dimensions))throw new Error("Not within DataContext! Dimensions data is not exist.");return e.dimensions}import{InputComboBox as lt}from"@uniformdev/design-system";import{useState as mt}from"react";import{Icon as ot}from"@uniformdev/design-system";function X(e){return{label:e.displayName,value:e.dim,isDisabled:!1}}function $(e){if(!e)return"unavailable";let[t]=e.split(":");switch(t.toLowerCase()){case"signal":return"data";case"intent":return"assign";case"audience":return"boy";default:return"user-list"}}function A(e){let t=[],o="";for(let a of e){let[r]=a.displayName.split(":");o!==r&&(t.push({label:r,options:[]}),o=r),t[t.length-1].options.push(X(a))}return t}import{jsx as J,jsxs as rt}from"@emotion/react/jsx-runtime";var U=e=>{var r;let{data:t,getStyles:o,className:a}=e;return J("div",{css:{...o("groupHeading",e),textTransform:"none",fontSize:"var(--font-size-sm)"},className:a,children:rt("small",{css:{color:"var(--gray-500)",display:"flex",alignItems:"center",gap:"var(--spacing-xs)"},children:[J(ot,{icon:$((r=t.label)!=null?r:""),iconColor:"currentColor",size:16}),J("span",{children:t.label})]})})};import{css as it}from"@emotion/react";import{jsx as at}from"@emotion/react/jsx-runtime";function G({message:e}){return e?at("div",{css:it`
|
|
12
|
+
color: var(--brand-primary-2);
|
|
13
|
+
font-size: var(--fs-xs);
|
|
14
|
+
position: absolute;
|
|
15
|
+
bottom: calc((var(--spacing-base) * -1) + -2px);
|
|
16
|
+
`,children:e}):null}import{jsx as be}from"@emotion/react/jsx-runtime";var H=e=>{var p,m;let{data:t,getStyles:o,cx:a,isDisabled:r,isFocused:n,isSelected:s,className:i,innerRef:l,innerProps:d}=e,[,C]=(m=(p=t.label)==null?void 0:p.split(":"))!=null?m:[];return be("div",{css:o("option",e),className:a({option:!0,"option--is-disabled":r,"option--is-focused":n,"option--is-selected":s},i),ref:l,"aria-disabled":r,...d,children:be("div",{css:{color:"var(--gray-700)"},children:C!=null?C:t.label})})};import{Icon as st}from"@uniformdev/design-system";import{jsx as Q,jsxs as ve}from"@emotion/react/jsx-runtime";function ye({displayName:e}){let[t,o]=e.split(":");return ve("div",{css:{whiteSpace:"normal",overflow:"hidden"},children:[o?ve("small",{css:{color:"var(--gray-500)",display:"flex",alignItems:"center",gap:"var(--spacing-xs)"},children:[t?Q(st,{icon:$(t),iconColor:"currentColor",size:16}):null,Q("span",{"data-test-id":"dimension-name",children:t})]}):null,Q("div",{css:{color:"var(--gray-700)"},"data-test-id":"dimension-value",children:o!=null?o:t})]})}import{jsx as xe}from"@emotion/react/jsx-runtime";var W=e=>{let{data:t,getStyles:o}=e;return xe("div",{css:o("singleValue",e),children:xe(ye,{displayName:t.label})})};import{Fragment as Z,jsx as _,jsxs as B}from"@emotion/react/jsx-runtime";function De({onChange:e,criteriaMatch:t,dimensions:o,errorMessage:a,...r}){var d,C;let[n,s]=mt(typeof t.r!="undefined"&&q(t.r)!==null?t.r.toString(10):""),i=t.rDim,l=t.rDim?o.dimIndex[t.rDim]:void 0;return B(Z,{children:[_(lt,{...r,inputValue:n,menuShouldScrollIntoView:!0,value:{label:(d=l==null?void 0:l.displayName)!=null?d:i&&!l?`${t.rDim} (unknown)`:"",value:(C=t.rDim)!=null?C:t.r?t.r.toString(10):"",isDisabled:!1},options:[{label:"Enter a numeric score to match, or choose another dimension to match its score",value:"",isDisabled:!0},...A(o.dimensions)],styles:{...r.styles,valueContainer:(p,m)=>{var f,w;return{...p,padding:"var(--spacing-sm)",...(w=(f=r.styles)==null?void 0:f.valueContainer)==null?void 0:w.call(f,p,m)}},option:(p,m)=>{var f,w;return{fontSize:m.isDisabled?"0.8rem":void 0,...(w=(f=r.styles)==null?void 0:f.option)==null?void 0:w.call(f,p,m)}}},onChange:p=>{var m;p&&(e({...t,rDim:(m=p.value)==null?void 0:m.toString(),r:void 0}),s(""))},onInputChange:(p,m)=>{let f=q(p);m.action==="input-change"||m.action==="set-value"?(s(p),(f||p==="")&&e({...t,r:p||void 0,rDim:void 0})):!f&&!q(m.prevInputValue)&&(!p&&t.r?s(t.r.toString()):s(p))},components:{...r.components,Option:H,SingleValue:W,GroupHeading:U},noOptionsMessage:({inputValue:p})=>q(p)?B(Z,{children:[B("div",{children:["Score: ",p]}),_("small",{children:"If you want to match on another dimension\u2019s score instead, clear the score value to search for a dimension."})]}):B(Z,{children:[B("div",{children:["No dimensions match your search \u201C",p,"\u201D"]}),_("small",{children:"If you want to match a literal score, enter a numeric value."})]})}),_(G,{message:a})]})}function q(e){return/^\d+$/.test(e.toString(10))}import{InputComboBox as pt}from"@uniformdev/design-system";import{Fragment as ut,jsx as Ie,jsxs as ct}from"@emotion/react/jsx-runtime";function we({onChange:e,value:t,dimensions:o,errorMessage:a,...r}){return ct(ut,{children:[Ie(pt,{...r,value:t?X(t):void 0,options:A(o),styles:{...r.styles,valueContainer:(n,s)=>{var i,l;return{...n,padding:"var(--spacing-sm)",...(l=(i=r.styles)==null?void 0:i.valueContainer)==null?void 0:l.call(i,n,s)}}},onChange:n=>{n&&e(o.find(s=>s.dim===n.value))},components:{Option:H,SingleValue:W,GroupHeading:U,...r.components}}),Ie(G,{message:a})]})}import{Icon as gt}from"@uniformdev/design-system";import{CgChevronRight as Ct}from"react-icons/cg";import{css as dt}from"@emotion/react";var Re=dt`
|
|
2
17
|
display: flex;
|
|
3
18
|
align-items: center;
|
|
4
19
|
font-weight: var(--fw-bold);
|
|
@@ -9,7 +24,7 @@ import{jsx as c}from"@emotion/react";import*as h from"react";import{Icon as We}f
|
|
|
9
24
|
&:focus {
|
|
10
25
|
text-decoration-line: underline;
|
|
11
26
|
}
|
|
12
|
-
`;import{jsx as
|
|
27
|
+
`;import{jsx as ht,jsxs as bt}from"@emotion/react/jsx-runtime";var Me=({linkTo:e,name:t,linkText:o=`Edit ${t} Component`})=>bt("a",{css:Re,title:`Edit ${t} component definition`,rel:"noopener noreferrer",target:"_blank",href:e,children:[o,ht(gt,{icon:Ct,iconColor:"currentColor",size:"1.5rem"})]});import{css as re}from"@emotion/react";import{getEnrichmentVectorKey as te}from"@uniformdev/context";import{AddListButton as vt,Button as yt,Callout as ne,Icon as oe,Input as Oe,InputSelect as xt,LoadingIndicator as Dt}from"@uniformdev/design-system";import Ee from"immer";import{useMemo as Ve,useState as ee}from"react";import{CgCloseO as It,CgMathMinus as wt,CgMathPlus as Rt}from"react-icons/cg";import{Fragment as Pe,jsx as u,jsxs as M}from"@emotion/react/jsx-runtime";var Mt=re`
|
|
13
28
|
flex: 2;
|
|
14
29
|
display: flex;
|
|
15
30
|
width: 50%;
|
|
@@ -20,7 +35,7 @@ import{jsx as c}from"@emotion/react";import*as h from"react";import{Icon as We}f
|
|
|
20
35
|
&:focus {
|
|
21
36
|
text-decoration-line: underline;
|
|
22
37
|
}
|
|
23
|
-
`,
|
|
38
|
+
`,or=({value:e,setValue:t,contextConfig:o,displayTitle:a=!0})=>{let{loading:r,result:n,error:s}=V(o),i=Ve(()=>{if(n)return n.dimensions.filter(b=>b.category==="ENR")},[n]),l=Ve(()=>{if(!e)return i;if(i)return i.filter(b=>!e.some(I=>te(I.cat,I.key)===b.dim))},[i,e]),[d,C]=ee(""),[p,m]=ee(50),[f,w]=ee(!1),g=i==null?void 0:i.find(b=>b.dim===d),y=()=>{let[b,I]=d.split("_");R([...e!=null?e:[],{cat:b,key:I,str:p}]),C(""),m(50),w(!1)},R=b=>{let I=[];n?I=b.filter(S=>{let k=n.dimIndex[te(S.cat,S.key)];return Boolean(k)}):I=b;let T=I.length===0?null:I;t(T)};return s?u(ne,{type:"danger",children:s}):r||n===null?u(Dt,{}):M("fieldset",{className:"enrichment-tag",children:[a?u("div",{css:{display:"flex",justifyContent:"space-between",marginBottom:"var(--spacing-base)"},children:u("legend",{css:{fontSize:"var(--fs-md)",fontWeight:"var(--fw-bold)"},children:"Enrichment Tags"})}):null,i!=null&&i.length?!f&&!e?u(ne,{title:"No enrichment tags assigned.",type:"info",css:{marginBlock:"var(--spacing-base)"},children:M("p",{children:["Click"," ",u("a",{onClick:()=>w(!0),target:"_blank",rel:"noopener noreferrer",css:{textDecorationLine:"underline"},children:"here"})," ","to assign your first enrichment tag."]})}):M(Pe,{children:[n&&u(St,{list:e!=null?e:[],setList:R,dimIndex:n.dimIndex}),f&&l&&l.length>0?M("div",{className:"add-enrichment-tag",css:{display:"flex",flexWrap:"wrap",gap:"var(--spacing-lg)",marginTop:"var(--spacing-md)",alignItems:"center"},children:[u("div",{css:{flexGrow:1},children:u(xt,{name:"enrichment-type",label:"Enrichment Tag",showLabel:!0,value:d,options:[{label:"Select",value:""},...l.map(b=>({label:b.displayName,value:b.dim}))],onChange:b=>C(b.currentTarget.value)})}),u(Ot,{score:p,setValue:m,cap:g?g.cap:100,css:{flexBasis:"9rem"}}),u(yt,{buttonType:"tertiary",size:"xl",css:{marginBottom:"var(--spacing-xs)",height:"3.5rem",margin:0,alignSelf:"flex-end"},onClick:y,disabled:!d,children:"Add"})]}):null,M("div",{className:"enrichment-cta",style:{paddingTop:"10px",display:"flex",justifyContent:"space-between"},children:[!f&&l&&l.length>0&&e?u(vt,{className:"add-more",buttonText:"Add More",onButtonClick:()=>w(!0)}):u("a",{css:Mt,title:"none",href:"#"}),u(Me,{name:"Enrichments",linkText:"Manage Enrichments",linkTo:`${o.apiHost}/projects/${encodeURIComponent(o.projectId)}/personalization/enrichments`})]})]}):u(Et,{contextConfig:o})]})},Et=({contextConfig:e})=>u(ne,{title:"No enrichments found.",type:"caution",css:{marginBlock:"var(--spacing-base)"},children:M("p",{children:["Looks like you do not have any enrichment created in your connected Uniform project. Start by creating your first enrichment"," ",u("a",{href:`${e.apiHost}/projects/${encodeURIComponent(e.projectId)}/personalization/enrichments`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}},children:"here"}),"."]})}),Se=(e,t=100,o=0)=>Math.max(Math.min(e,t),o),Be=re`
|
|
24
39
|
position: absolute;
|
|
25
40
|
bottom: 0.875rem;
|
|
26
41
|
left: var(--spacing-sm);
|
|
@@ -32,28 +47,28 @@ import{jsx as c}from"@emotion/react";import*as h from"react";import{Icon as We}f
|
|
|
32
47
|
background-color: var(--gray-100);
|
|
33
48
|
border: 1px solid var(--gray-300);
|
|
34
49
|
border-radius: var(--rounded-full);
|
|
35
|
-
`,
|
|
36
|
-
${
|
|
50
|
+
`,Vt=re`
|
|
51
|
+
${Be}
|
|
37
52
|
left: auto;
|
|
38
53
|
right: var(--spacing-sm);
|
|
39
|
-
`,
|
|
54
|
+
`,Ot=({score:e,setValue:t,cap:o=100,...a})=>{let r=n=>{let s=n==="increment"?e+10:e-10;s<0&&(s=0),s>o&&(s=o),t(s)};return M("div",{css:{position:"relative"},...a,children:[u(Oe,{label:"Strength",id:"enrichment-score",type:"number",min:0,max:o,value:e,onChange:n=>t(Se(Number(n.currentTarget.value)||0,o)),css:{textAlign:"center",boxSizing:"border-box"}}),u("button",{type:"button",title:"Reduce enrichment count",onClick:()=>r("decrement"),disabled:e===0,className:"scoreCounterButton",css:Be,children:u(oe,{icon:wt,iconColor:"gray",size:"1.5rem"})}),u("button",{type:"button",title:"Increase enrichment count",onClick:()=>r("increment"),className:"scoreCounterButton",css:Vt,children:u(oe,{icon:Rt,iconColor:"gray",size:"1.5rem"})})]})},St=({list:e,setList:t,dimIndex:o})=>{let a=n=>{t(Ee(e,s=>{s.splice(n,1)}))},r=(n,s)=>{var l;let i=(l=o[`${e[n].cat}_${e[n].key}`])==null?void 0:l.cap;t(Ee(e,d=>{d[n].str=Se(Number(s)||0,i)}))};return u(Pe,{children:e.map((n,s)=>{let i=o[te(n.cat,n.key)];if(!!i)return M("div",{css:{display:"flex",alignItems:"center",gap:"var(--spacing-base)",backgroundColor:"var(--brand-secondary-2)",boxShadow:"var(--shadow-base)",borderRadius:"var(--rounded-base)",paddingInline:"var(--spacing-base)",marginBlock:"var(--spacing-base)"},className:"selected-enrichments",children:[u("span",{css:{fontWeight:"var(--fw-bold)",color:i?void 0:"var(--brand-secondary-5)"},children:i?i.displayName:`Enrichment '${n.cat}_${n.key}' is unknown`}),u("div",{css:{marginLeft:"auto",display:"flex",alignItems:"center",border:"0 solid var(--gray-400)",borderLeftWidth:"1px",borderRightWidth:"1px",padding:"var(--spacing-sm) var(--spacing-base)",flexBasis:"9rem"},children:u(Oe,{type:"text",min:0,max:i.cap||100,title:"score",value:n.str,css:{textAlign:"center",width:"100px"},onChange:l=>r(s,l.currentTarget.value)})}),u("button",{type:"button",title:"Delete enrichment",onClick:()=>a(s),css:{border:0},children:u(oe,{icon:It,iconColor:"red",size:"1.5rem"})})]},`${n.cat}-${n.key}`)})})};import{Callout as Ae,LoadingIndicator as $t}from"@uniformdev/design-system";import{useState as At}from"react";import{useAsync as Ut}from"react-use";import*as D from"yup";function sr(e){return Array.isArray(e)&&e.length>0&&e[0].cat!==void 0}function lr(e){return e.crit!==void 0}function ie(e){return e!=="+"&&e!=="-"}import{css as Pt}from"@emotion/react";import{AddListButton as Tt,Callout as ze,Icon as kt,InputInlineSelect as Nt,Paragraph as zt}from"@uniformdev/design-system";import Le from"immer";import{CgCloseO as Lt}from"react-icons/cg";import{css as O}from"@emotion/react";var ae="6rem",Te=O`
|
|
40
55
|
position: relative;
|
|
41
56
|
padding: var(--spacing-md) var(--spacing-base);
|
|
42
57
|
border: 1px solid var(--gray-300);
|
|
43
58
|
box-shadow: var(--shadow-base);
|
|
44
59
|
background-color: white;
|
|
45
60
|
border-radius: var(--rounded-base);
|
|
46
|
-
margin-top: ${
|
|
61
|
+
margin-top: ${ae};
|
|
47
62
|
display: flex;
|
|
48
63
|
|
|
49
64
|
&:before {
|
|
50
65
|
content: '';
|
|
51
66
|
display: block;
|
|
52
67
|
width: 1px;
|
|
53
|
-
height: ${
|
|
68
|
+
height: ${ae};
|
|
54
69
|
background-color: var(--gray-300);
|
|
55
70
|
position: absolute;
|
|
56
|
-
top: -${
|
|
71
|
+
top: -${ae};
|
|
57
72
|
left: var(--spacing-lg);
|
|
58
73
|
}
|
|
59
74
|
|
|
@@ -63,42 +78,27 @@ import{jsx as c}from"@emotion/react";import*as h from"react";import{Icon as We}f
|
|
|
63
78
|
display: none;
|
|
64
79
|
}
|
|
65
80
|
}
|
|
66
|
-
`,
|
|
81
|
+
`,ke=O`
|
|
67
82
|
display: flex;
|
|
68
83
|
gap: var(--spacing-base);
|
|
69
84
|
flex-grow: 1;
|
|
70
85
|
flex-wrap: wrap;
|
|
71
86
|
margin-right: var(--spacing-base);
|
|
72
|
-
`,
|
|
87
|
+
`,F=O`
|
|
73
88
|
width: 100%;
|
|
74
89
|
display: flex;
|
|
75
90
|
align-items: stretch;
|
|
76
91
|
position: relative;
|
|
77
|
-
`,
|
|
92
|
+
`,se=O`
|
|
78
93
|
flex: 2;
|
|
79
94
|
height: 52px;
|
|
80
95
|
min-width: 200px;
|
|
81
|
-
`,
|
|
96
|
+
`,Ne=O`
|
|
82
97
|
flex: 1;
|
|
83
98
|
min-width: 80px;
|
|
84
|
-
`,
|
|
99
|
+
`,j=O`
|
|
85
100
|
height: 100%;
|
|
86
101
|
width: 100%;
|
|
87
|
-
`;import{
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
border-radius: var(--rounded-full);
|
|
91
|
-
color: var(--white);
|
|
92
|
-
display: flex;
|
|
93
|
-
width: 30px;
|
|
94
|
-
height: 30px;
|
|
95
|
-
justify-content: center;
|
|
96
|
-
font-size: var(--fs-base);
|
|
97
|
-
`,children:e})}import{jsx as te,jsxs as dt}from"@emotion/react/jsx-runtime";var Ie=e=>{var l,d;let{data:t,getStyles:o,isDisabled:a,innerRef:r,innerProps:n}=e,[s,i]=(d=(l=t.label)==null?void 0:l.split(":"))!=null?d:[];return dt("div",{css:{...o("option",e),display:"flex",alignItems:"center",gap:"var(--spacing-sm)"},ref:r,"aria-disabled":a,...n,children:[i?te(L,{op:s}):te("div",{css:{width:"20px",height:"20px"}}),te("div",{children:i!=null?i:s})]})};import{jsx as we}from"@emotion/react/jsx-runtime";var Re=e=>{let{data:t,getStyles:o}=e;return we("div",{css:{...o("singleValue",e),width:"max-content"},children:t.label.length===1?we(L,{op:t.label}):t.label})};import{jsx as gt}from"@emotion/react/jsx-runtime";var Me=[{name:"=",description:"equals",value:"="},{name:"\u2260",description:"not equal",value:"!="},{name:">",description:"is greater than",value:">"},{name:"\u2265",description:"is greater than or equal to",value:">="},{name:"<",description:"is less than",value:"<"},{name:"\u2264",description:"is less than or equal to",value:"<="},{name:"has the strongest score",value:"+"},{name:"has the weakest score",value:"-"}];function Ee({onChange:e,value:t,...o}){var a,r;return gt(ft,{...o,value:{label:(r=(a=Me.find(n=>n.value===t))==null?void 0:a.name)!=null?r:t,value:t},options:Me.map(n=>({label:n.description?`${n.name}:${n.description}`:n.name,value:n.value})),styles:{...o.styles,valueContainer:(n,s)=>{var i,l;return{...n,padding:"var(--spacing-sm)",...(l=(i=o.styles)==null?void 0:i.valueContainer)==null?void 0:l.call(i,n,s)}},menu:(n,s)=>{var i,l;return{...n,width:"max-content",...(l=(i=o.styles)==null?void 0:i.menu)==null?void 0:l.call(i,n,s)}},control:(n,s)=>{var i,l;return{...n,border:0,...(l=(i=o.styles)==null?void 0:i.control)==null?void 0:l.call(i,n,s)}},indicatorSeparator:(n,s)=>{var i,l;return{...n,display:"none",...(l=(i=o.styles)==null?void 0:i.indicatorSeparator)==null?void 0:l.call(i,n,s)}}},onChange:n=>{n&&e(n.value)},components:{SingleValue:Re,Option:Ie,...o.components}})}import{InputComboBox as xt}from"@uniformdev/design-system";import{Icon as Ct}from"@uniformdev/design-system";function ne(e){return{label:e.displayName,value:e.dim,isDisabled:!1}}function $(e){if(!e)return"unavailable";let[t]=e.split(":");switch(t.toLowerCase()){case"signal":return"data";case"intent":return"assign";case"audience":return"boy";default:return"user-list"}}function A(e){let t=[],o="";for(let a of e){let[r]=a.displayName.split(":");o!==r&&(t.push({label:r,options:[]}),o=r),t[t.length-1].options.push(ne(a))}return t}import{jsx as oe,jsxs as ht}from"@emotion/react/jsx-runtime";var U=e=>{var r;let{data:t,getStyles:o,className:a}=e;return oe("div",{css:{...o("groupHeading",e),textTransform:"none",fontSize:"var(--font-size-sm)"},className:a,children:ht("small",{css:{color:"var(--gray-500)",display:"flex",alignItems:"center",gap:"var(--spacing-xs)"},children:[oe(Ct,{icon:$((r=t.label)!=null?r:""),iconColor:"currentColor",size:16}),oe("span",{children:t.label})]})})};import{css as bt}from"@emotion/react";import{jsx as vt}from"@emotion/react/jsx-runtime";function G({message:e}){return e?vt("div",{css:bt`
|
|
98
|
-
color: var(--brand-primary-2);
|
|
99
|
-
font-size: var(--fs-xs);
|
|
100
|
-
position: absolute;
|
|
101
|
-
bottom: calc((var(--spacing-base) * -1) + -2px);
|
|
102
|
-
`,children:e}):null}import{jsx as Ve}from"@emotion/react/jsx-runtime";var H=e=>{var p,m;let{data:t,getStyles:o,cx:a,isDisabled:r,isFocused:n,isSelected:s,className:i,innerRef:l,innerProps:d}=e,[,C]=(m=(p=t.label)==null?void 0:p.split(":"))!=null?m:[];return Ve("div",{css:o("option",e),className:a({option:!0,"option--is-disabled":r,"option--is-focused":n,"option--is-selected":s},i),ref:l,"aria-disabled":r,...d,children:Ve("div",{css:{color:"var(--gray-700)"},children:C!=null?C:t.label})})};import{Icon as yt}from"@uniformdev/design-system";import{jsx as re,jsxs as Oe}from"@emotion/react/jsx-runtime";function Se({displayName:e}){let[t,o]=e.split(":");return Oe("div",{css:{whiteSpace:"normal",overflow:"hidden"},children:[o?Oe("small",{css:{color:"var(--gray-500)",display:"flex",alignItems:"center",gap:"var(--spacing-xs)"},children:[t?re(yt,{icon:$(t),iconColor:"currentColor",size:16}):null,re("span",{"data-test-id":"dimension-name",children:t})]}):null,re("div",{css:{color:"var(--gray-700)"},"data-test-id":"dimension-value",children:o!=null?o:t})]})}import{jsx as Be}from"@emotion/react/jsx-runtime";var W=e=>{let{data:t,getStyles:o}=e;return Be("div",{css:o("singleValue",e),children:Be(Se,{displayName:t.label})})};import{Fragment as Dt,jsx as Pe,jsxs as It}from"@emotion/react/jsx-runtime";function Te({onChange:e,value:t,dimensions:o,errorMessage:a,...r}){return It(Dt,{children:[Pe(xt,{...r,value:t?ne(t):void 0,options:A(o),styles:{...r.styles,valueContainer:(n,s)=>{var i,l;return{...n,padding:"var(--spacing-sm)",...(l=(i=r.styles)==null?void 0:i.valueContainer)==null?void 0:l.call(i,n,s)}}},onChange:n=>{n&&e(o.find(s=>s.dim===n.value))},components:{Option:H,SingleValue:W,GroupHeading:U,...r.components}}),Pe(G,{message:a})]})}import{InputComboBox as wt}from"@uniformdev/design-system";import{useState as Rt}from"react";import{Fragment as ie,jsx as _,jsxs as B}from"@emotion/react/jsx-runtime";function ke({onChange:e,criteriaMatch:t,dimensions:o,errorMessage:a,...r}){var d,C;let[n,s]=Rt(typeof t.r!="undefined"&&q(t.r)!==null?t.r.toString(10):""),i=t.rDim,l=t.rDim?o.dimIndex[t.rDim]:void 0;return B(ie,{children:[_(wt,{...r,inputValue:n,menuShouldScrollIntoView:!0,value:{label:(d=l==null?void 0:l.displayName)!=null?d:i&&!l?`${t.rDim} (unknown)`:"",value:(C=t.rDim)!=null?C:t.r?t.r.toString(10):"",isDisabled:!1},options:[{label:"Enter a numeric score to match, or choose another dimension to match its score",value:"",isDisabled:!0},...A(o.dimensions)],styles:{...r.styles,valueContainer:(p,m)=>{var f,w;return{...p,padding:"var(--spacing-sm)",...(w=(f=r.styles)==null?void 0:f.valueContainer)==null?void 0:w.call(f,p,m)}},option:(p,m)=>{var f,w;return{fontSize:m.isDisabled?"0.8rem":void 0,...(w=(f=r.styles)==null?void 0:f.option)==null?void 0:w.call(f,p,m)}}},onChange:p=>{var m;p&&(e({...t,rDim:(m=p.value)==null?void 0:m.toString(),r:void 0}),s(""))},onInputChange:(p,m)=>{let f=q(p);m.action==="input-change"||m.action==="set-value"?(s(p),(f||p==="")&&e({...t,r:p||void 0,rDim:void 0})):!f&&!q(m.prevInputValue)&&(!p&&t.r?s(t.r.toString()):s(p))},components:{...r.components,Option:H,SingleValue:W,GroupHeading:U},noOptionsMessage:({inputValue:p})=>q(p)?B(ie,{children:[B("div",{children:["Score: ",p]}),_("small",{children:"If you want to match on another dimension\u2019s score instead, clear the score value to search for a dimension."})]}):B(ie,{children:[B("div",{children:["No dimensions match your search \u201C",p,"\u201D"]}),_("small",{children:"If you want to match a literal score, enter a numeric value."})]})}),_(G,{message:a})]})}function q(e){return/^\d+$/.test(e.toString(10))}import{jsx as v,jsxs as ae}from"@emotion/react/jsx-runtime";var Le=({value:e,setValue:t,dimensions:o,onMenuOpen:a,onMenuClose:r,onAddCriteria:n,onRemoveCriteria:s,displayTitle:i=!0,components:l,errors:d={}})=>{let C=e||{crit:[]},p=g=>{t({...C,op:g==="&"?void 0:g})},m=()=>{let g={...C,crit:[...C.crit,{l:"",op:">",r:0}]};t(g),n==null||n(g)},f=(g,y)=>{t(ze(C,R=>{R.crit[y]=g}))},w=g=>{let y=ze(C,b=>{b.crit.splice(g,1)}),R=y.crit.length===0?null:y;t(R),s==null||s(R)};return ae("fieldset",{className:"personalization-criteria",children:[i?l!=null&&l.Title?v(l.Title,{}):v("legend",{css:{fontSize:"var(--fs-md)",fontWeight:"var(--fw-bold)"},children:"Personalize This"}):null,l!=null&&l.CustomVariantName?v(l.CustomVariantName,{}):null,C.crit.length?v("div",{children:C.crit.map((g,y)=>{var I,T,S,k;let R=((I=g.l)==null?void 0:I.length)>0,b=g.op!=="+"&&g.op!=="-";return ae("div",{css:ye,"data-test-id":"criteria-container",children:[ae("div",{css:Mt`
|
|
103
|
-
${xe}/* grid-template-columns: minmax(0, 1fr) ${b?"minmax(0, 79px) minmax(0, 1fr)":"minmax(0, 1fr)"} */
|
|
104
|
-
`,className:"criteriaItemInner",children:[v("div",{css:[N,ee],className:"criteria-wrapper","data-test-id":"select-criteria",children:v(Te,{errorMessage:(T=d.lhs)==null?void 0:T[y],css:z,styles:{control:x=>({...x,height:"100%"})},dimensions:o.dimensions,onChange:x=>{f({...g,l:x.dim},y)},value:o.dimIndex[g.l],onMenuOpen:a,onMenuClose:r})}),v("div",{css:[N,De],className:"criteria-wrapper","data-test-id":"select-operator",children:v(Ee,{name:`op-${y}`,css:z,styles:{control:x=>({...x,height:"100%"})},value:g.op,onChange:x=>{f(x==="+"||x==="-"?{...g,op:x,r:void 0,rDim:void 0}:{...g,op:x},y)},onMenuOpen:a,onMenuClose:r})}),b?v("div",{css:[N,ee],className:"criteria-wrapper","data-test-id":"select-match-criteria",children:v(ke,{errorMessage:(S=d.rhs)==null?void 0:S[y],css:z,styles:{control:x=>({...x,height:"100%"})},criteriaMatch:g,onChange:x=>{f(x,y)},isDisabled:!R,dimensions:o,onMenuOpen:a,onMenuClose:r})}):null]}),v("button",{type:"button",onClick:()=>w(y),title:"Delete Personalization",css:{backgroundColor:"transparent",backgroundImage:"none",borderWidth:0},"data-test-id":"button-delete",children:v(Vt,{icon:Bt,iconColor:"red",size:"1.5rem"})}),y>0?v("div",{className:"criteria-group-operation",css:{position:"absolute",top:"-4rem",transform:"translateX(calc(1.5rem - 50%))"},children:v(Et,{"data-test-id":"dropdown-button-combine",disabled:y>1,value:(k=C.op)!=null?k:"&",options:[{label:"AND",value:"&"},{label:"OR",value:"|"}],onChange:x=>{p(x.value)}})}):null]},y)})}):v(Ne,{title:"Default variant",type:"info",css:{marginBlock:"var(--spacing-base)"},children:v(St,{children:'This personalized variant has no match criteria and will be shown to any visitor that does not match any preceding variants. Ensure that default variants come last in the variant list. Personalize this variant by clicking "Add Criteria" to get started.'})}),o.dimensions.length===0?l!=null&&l.NoDimensionsDefined?v(l.NoDimensionsDefined,{}):v(Ne,{title:"Dimensions",type:"info",css:{marginBlock:"var(--spacing-base)"},children:v("p",{children:"You do not have any dimensions configured."})}):v(Ot,{"data-test-id":"button-add-criteria",className:"add-more",buttonText:"Add Criteria",onButtonClick:m})]})};import*as D from"yup";import{useAsync as kt}from"react-use";function Qo(e){return Array.isArray(e)&&e.length>0&&e[0].cat!==void 0}function Zo(e){return e.crit!==void 0}function se(e){return e!=="+"&&e!=="-"}import{jsx as P,jsxs as zt}from"@emotion/react/jsx-runtime";function Nt(e){let t={crit:[]};return e.forEach(o=>{if(!o.path)return;let a=/\[(\d+)\]\.(\w+)/g,r=[...o.path.matchAll(a)][0];if((r==null?void 0:r.length)==3){let n=Number(r[1]),s=r[2];if(t.crit.length>n)t.crit[n]={...t.crit[n],[s]:o.message};else{let i={};i[s]=o.message,t.crit.push(i)}}}),t}async function le(e,t){let o=D.object().shape({l:D.string().required("Please select a dimension").oneOf(t==null?void 0:t.dimensions.map(a=>a.dim),"Select a criteria"),op:D.string().required(),r:D.mixed().nullable().when(["rDim","op"],{is:(a,r)=>se(r)&&!a,then:D.string().required("Choose a score or dimension")}),rDim:D.string().oneOf(t==null?void 0:t.dimensions.map(a=>a.dim),"Select a criteria").when(["r","op"],{is:(a,r)=>se(r)&&!a,then:D.string().required("Choose a score or dimension")})},["rDim","r"]);try{await D.object({crit:D.array(o)}).nullable().validate(e,{abortEarly:!1})}catch(a){return Nt(a.inner)}}var pr=({contextConfig:e,value:t,setValue:o,...a})=>{var C,p;let[r,n]=Pt(void 0),{loading:s,result:i,error:l}=V(e);return kt(async()=>{if(t&&i){let m=await le(t,i);n(m)}},[t,i,le]),l?P($e,{type:"danger",children:l}):s||i===null?P(Tt,{}):P(Le,{...a,value:t,setValue:async m=>{let f=await le(m,i);n(f),o(m)},errors:{lhs:(C=r==null?void 0:r.crit)==null?void 0:C.map(m=>m==null?void 0:m.l),rhs:(p=r==null?void 0:r.crit)==null?void 0:p.map(m=>m==null?void 0:m.rDim)},dimensions:i,components:{NoDimensionsDefined:()=>P($e,{title:"Dimensions",type:"info",css:{marginBlock:"var(--spacing-base)"},children:zt("p",{children:["You do not have any dimensions configured. Create your first"," ",P("a",{href:`${e.apiHost}/projects/${encodeURIComponent(e.projectId)}/personalization/signals`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}},children:"Dimension"})]})})}})};import{useEffect as Lt,useState as $t}from"react";import{ApiClientError as At,CachedManifestClient as Ut}from"@uniformdev/context/api";function F({apiHost:e,apiKey:t,projectId:o}){let[a,r]=$t({loading:!1,notConfigured:!1,error:null,result:null});return Lt(()=>{if(!o||!t||!e){r({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{r({notConfigured:!1,loading:!0,error:null,result:null});try{let i=await new Ut({projectId:o,apiKey:t,apiHost:e}).get({preview:!0});r({notConfigured:!1,loading:!1,error:null,result:i})}catch(s){let i;s instanceof At?(s.statusCode===403&&(i=`The API key ${t} did not have permissions to fetch the manifest. Ensure Context > Read Drafts permissions are granted.`),i=s.message):i=s.toString(),r({notConfigured:!1,loading:!1,error:i,result:null});return}})()},[e,t,o]),{result:a.result,error:a.error,loading:a.loading,notConfigured:a.notConfigured}}import{LoadingIndicator as Gt}from"@uniformdev/design-system";import{Fragment as Ht,jsx as me}from"@emotion/react/jsx-runtime";function xr({children:e,versionMap:t,contextConfig:o}){let{loading:a,result:r}=F(o);if(a)return me(Gt,{});if(r){let n=t[r.project.ui_version];if(n)return me(n,{})}return me(Ht,{children:e})}import{createContext as Wt,useContext as pe}from"react";import{LoadingIndicator as qt}from"@uniformdev/design-system";import{Fragment as Ae,jsx as E}from"@emotion/react/jsx-runtime";var j=Wt(null),Tr=({loadingComponent:e,errorComponent:t,contextConfig:o,children:a})=>{let r=F(o),n=V(o);return r.error||r.notConfigured?t?E(t,{contextConfig:o,result:r}):E(Ae,{children:"ErrorComponent is not configured"}):n.error||n.notConfigured?t?E(t,{contextConfig:o,result:n}):E(Ae,{children:"ErrorComponent is not configured"}):r.loading||n.loading?e?E(e,{}):E(qt,{}):E(j.Provider,{value:{manifest:r.result,dimensions:n.result,contextConfig:o},children:a})};function kr(){let e=pe(j);if(!(e!=null&&e.contextConfig))throw new Error("Not within DataContext! Configuration data is not exist.");return e.contextConfig}function Nr(){let e=pe(j);if(!(e!=null&&e.manifest))throw new Error("Not within DataContext! Manifest data is not exist.");return e.manifest}function zr(){let e=pe(j);if(!(e!=null&&e.dimensions))throw new Error("Not within DataContext! Dimensions data is not exist.");return e.dimensions}import{validate as _t}from"uuid";import{UncachedManifestClient as Ft}from"@uniformdev/context/api";var Ue=async e=>{if(!e)return{valid:!1,error:new Error("contextConfig was not defined.")};if(!e.apiHost)return{valid:!1,error:new Error("apiHost was not defined.")};if(!e.apiKey)return{valid:!1,error:new Error("apiKey was not defined.")};if(!_t(e.apiKey)&&!e.projectId)return{valid:!1,error:new Error("projectId is required when using a modern API key.")};let t=new Ft({projectId:e.projectId,apiKey:e.apiKey,apiHost:e.apiHost});try{return{valid:!0,result:await t.get({preview:!0})}}catch(o){return{valid:!1,error:o}}};import{useEffect as jt,useState as Kt}from"react";var jr=e=>{let[t,o]=Kt({validating:!1,error:void 0}),{apiKey:a,apiHost:r,projectId:n}=e||{};return jt(()=>{if(!a||!r)return;(async()=>{o({validating:!0,error:void 0});let{error:i,result:l}=await Ue({apiHost:r,apiKey:a,projectId:n});o(i?{error:i,validating:!1}:{error:void 0,validating:!1,result:l})})()},[r,a,n]),{validating:t.validating,error:t.error,result:t.result}};export*from"@uniformdev/design-system";export{Tr as ContextData,ke as CriteriaMatchMenu,Ee as CriteriaOperatorMenu,Te as DimensionMenu,Se as DimensionValue,ce as EditLink,Dn as EnrichmentTag,pr as PersonalizationCriteria,Le as PersonalizationCriteriaStatic,xr as ProjectUIVersion,it as addEnrichmentLink,Me as contextCriteriaMenuOperators,Nt as convertErrorsToObj,Qo as isEnrichmentTagData,Zo as isPersonalizationCriteriaData,se as opHasRhs,kr as useContextConfig,F as useContextData,V as useDimensions,zr as useDimensionsDataContext,Nr as useManifest,jr as useValidateContextConfig,Ue as validateContextConfig};
|
|
102
|
+
`;import{jsx as v,jsxs as le}from"@emotion/react/jsx-runtime";var $e=({value:e,setValue:t,dimensions:o,onMenuOpen:a,onMenuClose:r,onAddCriteria:n,onRemoveCriteria:s,displayTitle:i=!0,components:l,errors:d={}})=>{let C=e||{crit:[]},p=g=>{t({...C,op:g==="&"?void 0:g})},m=()=>{let g={...C,crit:[...C.crit,{l:"",op:">",r:0}]};t(g),n==null||n(g)},f=(g,y)=>{t(Le(C,R=>{R.crit[y]=g}))},w=g=>{let y=Le(C,b=>{b.crit.splice(g,1)}),R=y.crit.length===0?null:y;t(R),s==null||s(R)};return le("fieldset",{className:"personalization-criteria",children:[i?l!=null&&l.Title?v(l.Title,{}):v("legend",{css:{fontSize:"var(--fs-md)",fontWeight:"var(--fw-bold)"},children:"Personalize This"}):null,l!=null&&l.CustomVariantName?v(l.CustomVariantName,{}):null,C.crit.length?v("div",{children:C.crit.map((g,y)=>{var I,T,S,k;let R=((I=g.l)==null?void 0:I.length)>0,b=g.op!=="+"&&g.op!=="-";return le("div",{css:Te,"data-test-id":"criteria-container",children:[le("div",{css:Pt`
|
|
103
|
+
${ke}/* grid-template-columns: minmax(0, 1fr) ${b?"minmax(0, 79px) minmax(0, 1fr)":"minmax(0, 1fr)"} */
|
|
104
|
+
`,className:"criteriaItemInner",children:[v("div",{css:[F,se],className:"criteria-wrapper","data-test-id":"select-criteria",children:v(we,{errorMessage:(T=d.lhs)==null?void 0:T[y],css:j,styles:{control:x=>({...x,height:"100%"})},dimensions:o.dimensions,onChange:x=>{f({...g,l:x.dim},y)},value:o.dimIndex[g.l],onMenuOpen:a,onMenuClose:r})}),v("div",{css:[F,Ne],className:"criteria-wrapper","data-test-id":"select-operator",children:v(ge,{name:`op-${y}`,css:j,styles:{control:x=>({...x,height:"100%"})},value:g.op,onChange:x=>{f(x==="+"||x==="-"?{...g,op:x,r:void 0,rDim:void 0}:{...g,op:x},y)},onMenuOpen:a,onMenuClose:r})}),b?v("div",{css:[F,se],className:"criteria-wrapper","data-test-id":"select-match-criteria",children:v(De,{errorMessage:(S=d.rhs)==null?void 0:S[y],css:j,styles:{control:x=>({...x,height:"100%"})},criteriaMatch:g,onChange:x=>{f(x,y)},isDisabled:!R,dimensions:o,onMenuOpen:a,onMenuClose:r})}):null]}),v("button",{type:"button",onClick:()=>w(y),title:"Delete Personalization",css:{backgroundColor:"transparent",backgroundImage:"none",borderWidth:0},"data-test-id":"button-delete",children:v(kt,{icon:Lt,iconColor:"red",size:"1.5rem"})}),y>0?v("div",{className:"criteria-group-operation",css:{position:"absolute",top:"-4rem",transform:"translateX(calc(1.5rem - 50%))"},children:v(Nt,{"data-test-id":"dropdown-button-combine",disabled:y>1,value:(k=C.op)!=null?k:"&",options:[{label:"AND",value:"&"},{label:"OR",value:"|"}],onChange:x=>{p(x.value)}})}):null]},y)})}):v(ze,{title:"Default variant",type:"info",css:{marginBlock:"var(--spacing-base)"},children:v(zt,{children:'This personalized variant has no match criteria and will be shown to any visitor that does not match any preceding variants. Ensure that default variants come last in the variant list. Personalize this variant by clicking "Add Criteria" to get started.'})}),o.dimensions.length===0?l!=null&&l.NoDimensionsDefined?v(l.NoDimensionsDefined,{}):v(ze,{title:"Dimensions",type:"info",css:{marginBlock:"var(--spacing-base)"},children:v("p",{children:"You do not have any dimensions configured."})}):v(Tt,{"data-test-id":"button-add-criteria",className:"add-more",buttonText:"Add Criteria",onButtonClick:m})]})};import{jsx as P,jsxs as Ht}from"@emotion/react/jsx-runtime";function Gt(e){let t={crit:[]};return e.forEach(o=>{if(!o.path)return;let a=/\[(\d+)\]\.(\w+)/g,r=[...o.path.matchAll(a)][0];if((r==null?void 0:r.length)==3){let n=Number(r[1]),s=r[2];if(t.crit.length>n)t.crit[n]={...t.crit[n],[s]:o.message};else{let i={};i[s]=o.message,t.crit.push(i)}}}),t}async function me(e,t){let o=D.object().shape({l:D.string().required("Please select a dimension").oneOf(t==null?void 0:t.dimensions.map(a=>a.dim),"Select a criteria"),op:D.string().required(),r:D.mixed().nullable().when(["rDim","op"],{is:(a,r)=>ie(r)&&!a,then:D.string().required("Choose a score or dimension")}),rDim:D.string().oneOf(t==null?void 0:t.dimensions.map(a=>a.dim),"Select a criteria").when(["r","op"],{is:(a,r)=>ie(r)&&!a,then:D.string().required("Choose a score or dimension")})},["rDim","r"]);try{await D.object({crit:D.array(o)}).nullable().validate(e,{abortEarly:!1})}catch(a){return Gt(a.inner)}}var Sr=({contextConfig:e,value:t,setValue:o,...a})=>{var C,p;let[r,n]=At(void 0),{loading:s,result:i,error:l}=V(e);return Ut(async()=>{if(t&&i){let m=await me(t,i);n(m)}},[t,i,me]),l?P(Ae,{type:"danger",children:l}):s||i===null?P($t,{}):P($e,{...a,value:t,setValue:async m=>{let f=await me(m,i);n(f),o(m)},errors:{lhs:(C=r==null?void 0:r.crit)==null?void 0:C.map(m=>m==null?void 0:m.l),rhs:(p=r==null?void 0:r.crit)==null?void 0:p.map(m=>m==null?void 0:m.rDim)},dimensions:i,components:{NoDimensionsDefined:()=>P(Ae,{title:"Dimensions",type:"info",css:{marginBlock:"var(--spacing-base)"},children:Ht("p",{children:["You do not have any dimensions configured. Create your first"," ",P("a",{href:`${e.apiHost}/projects/${encodeURIComponent(e.projectId)}/personalization/signals`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}},children:"Dimension"})]})})}})};import{LoadingIndicator as Wt}from"@uniformdev/design-system";import{Fragment as qt,jsx as pe}from"@emotion/react/jsx-runtime";function zr({children:e,versionMap:t,contextConfig:o}){let{loading:a,result:r}=z(o);if(a)return pe(Wt,{});if(r){let n=t[r.project.ui_version];if(n)return pe(n,{})}return pe(qt,{children:e})}import{useEffect as jt,useState as Kt}from"react";import{UncachedManifestClient as _t}from"@uniformdev/context/api";import{validate as Ft}from"uuid";var Ue=async e=>{if(!e)return{valid:!1,error:new Error("contextConfig was not defined.")};if(!e.apiHost)return{valid:!1,error:new Error("apiHost was not defined.")};if(!e.apiKey)return{valid:!1,error:new Error("apiKey was not defined.")};if(!Ft(e.apiKey)&&!e.projectId)return{valid:!1,error:new Error("projectId is required when using a modern API key.")};let t=new _t({projectId:e.projectId,apiKey:e.apiKey,apiHost:e.apiHost});try{return{valid:!0,result:await t.get({preview:!0})}}catch(o){return{valid:!1,error:o}}};var jr=e=>{let[t,o]=Kt({validating:!1,error:void 0}),{apiKey:a,apiHost:r,projectId:n}=e||{};return jt(()=>{if(!a||!r)return;(async()=>{o({validating:!0,error:void 0});let{error:i,result:l}=await Ue({apiHost:r,apiKey:a,projectId:n});o(i?{error:i,validating:!1}:{error:void 0,validating:!1,result:l})})()},[r,a,n]),{validating:t.validating,error:t.error,result:t.result}};export*from"@uniformdev/design-system";export{$n as ContextData,De as CriteriaMatchMenu,ge as CriteriaOperatorMenu,we as DimensionMenu,ye as DimensionValue,Me as EditLink,or as EnrichmentTag,Sr as PersonalizationCriteria,$e as PersonalizationCriteriaStatic,zr as ProjectUIVersion,Mt as addEnrichmentLink,fe as contextCriteriaMenuOperators,Gt as convertErrorsToObj,sr as isEnrichmentTagData,lr as isPersonalizationCriteriaData,ie as opHasRhs,An as useContextConfig,z as useContextData,V as useDimensions,Gn as useDimensionsDataContext,Un as useManifest,jr as useValidateContextConfig,Ue as validateContextConfig};
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,19 @@
|
|
|
1
|
-
"use strict";var dt=Object.create;var X=Object.defineProperty;var ft=Object.getOwnPropertyDescriptor;var gt=Object.getOwnPropertyNames;var Ct=Object.getPrototypeOf,ht=Object.prototype.hasOwnProperty;var bt=(e,t)=>{for(var n in t)X(e,n,{get:t[n],enumerable:!0})},Y=(e,t,n,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of gt(t))!ht.call(e,r)&&r!==n&&X(e,r,{get:()=>t[r],enumerable:!(a=ft(t,r))||a.enumerable});return e},V=(e,t,n)=>(Y(e,t,"default"),n&&Y(n,t,"default")),J=(e,t,n)=>(n=e!=null?dt(Ct(e)):{},Y(t||!e||!e.__esModule?X(n,"default",{value:e,enumerable:!0}):n,e)),vt=e=>Y(X({},"__esModule",{value:!0}),e);var M={};bt(M,{ContextData:()=>
|
|
1
|
+
"use strict";var dt=Object.create;var X=Object.defineProperty;var ft=Object.getOwnPropertyDescriptor;var gt=Object.getOwnPropertyNames;var Ct=Object.getPrototypeOf,ht=Object.prototype.hasOwnProperty;var bt=(e,t)=>{for(var n in t)X(e,n,{get:t[n],enumerable:!0})},Y=(e,t,n,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of gt(t))!ht.call(e,r)&&r!==n&&X(e,r,{get:()=>t[r],enumerable:!(a=ft(t,r))||a.enumerable});return e},V=(e,t,n)=>(Y(e,t,"default"),n&&Y(n,t,"default")),J=(e,t,n)=>(n=e!=null?dt(Ct(e)):{},Y(t||!e||!e.__esModule?X(n,"default",{value:e,enumerable:!0}):n,e)),vt=e=>Y(X({},"__esModule",{value:!0}),e);var M={};bt(M,{ContextData:()=>yt,CriteriaMatchMenu:()=>we,CriteriaOperatorMenu:()=>ve,DimensionMenu:()=>Re,DimensionValue:()=>De,EditLink:()=>Me,EnrichmentTag:()=>Rt,PersonalizationCriteria:()=>Tt,PersonalizationCriteriaStatic:()=>Be,ProjectUIVersion:()=>kt,addEnrichmentLink:()=>Ze,contextCriteriaMenuOperators:()=>be,convertErrorsToObj:()=>mt,isEnrichmentTagData:()=>St,isPersonalizationCriteriaData:()=>Bt,opHasRhs:()=>de,useContextConfig:()=>xt,useContextData:()=>_,useDimensions:()=>T,useDimensionsDataContext:()=>It,useManifest:()=>Dt,useValidateContextConfig:()=>Nt,validateContextConfig:()=>Te});module.exports=vt(M);var c=require("@emotion/react"),b=J(require("react"));var $e=require("@uniformdev/design-system");var ke=require("@emotion/react"),Ne=require("@emotion/react/jsx-runtime");function Q({op:e}){return(0,Ne.jsx)("div",{className:"operation-bubble",css:ke.css`
|
|
2
|
+
align-items: center;
|
|
3
|
+
background: var(--gray-700);
|
|
4
|
+
border-radius: var(--rounded-full);
|
|
5
|
+
color: var(--white);
|
|
6
|
+
display: flex;
|
|
7
|
+
width: 30px;
|
|
8
|
+
height: 30px;
|
|
9
|
+
justify-content: center;
|
|
10
|
+
font-size: var(--fs-base);
|
|
11
|
+
`,children:e})}var $=require("@emotion/react/jsx-runtime"),ze=e=>{var l,d;let{data:t,getStyles:n,isDisabled:a,innerRef:r,innerProps:o}=e,[s,i]=(d=(l=t.label)==null?void 0:l.split(":"))!=null?d:[];return(0,$.jsxs)("div",{css:{...n("option",e),display:"flex",alignItems:"center",gap:"var(--spacing-sm)"},ref:r,"aria-disabled":a,...o,children:[i?(0,$.jsx)(Q,{op:s}):(0,$.jsx)("div",{css:{width:"20px",height:"20px"}}),(0,$.jsx)("div",{children:i!=null?i:s})]})};var he=require("@emotion/react/jsx-runtime"),Le=e=>{let{data:t,getStyles:n}=e;return(0,he.jsx)("div",{css:{...n("singleValue",e),width:"max-content"},children:t.label.length===1?(0,he.jsx)(Q,{op:t.label}):t.label})};var Ae=require("@emotion/react/jsx-runtime"),be=[{name:"=",description:"equals",value:"="},{name:"\u2260",description:"not equal",value:"!="},{name:">",description:"is greater than",value:">"},{name:"\u2265",description:"is greater than or equal to",value:">="},{name:"<",description:"is less than",value:"<"},{name:"\u2264",description:"is less than or equal to",value:"<="},{name:"has the strongest score",value:"+"},{name:"has the weakest score",value:"-"}];function ve({onChange:e,value:t,...n}){var a,r;return(0,Ae.jsx)($e.InputComboBox,{...n,value:{label:(r=(a=be.find(o=>o.value===t))==null?void 0:a.name)!=null?r:t,value:t},options:be.map(o=>({label:o.description?`${o.name}:${o.description}`:o.name,value:o.value})),styles:{...n.styles,valueContainer:(o,s)=>{var i,l;return{...o,padding:"var(--spacing-sm)",...(l=(i=n.styles)==null?void 0:i.valueContainer)==null?void 0:l.call(i,o,s)}},menu:(o,s)=>{var i,l;return{...o,width:"max-content",...(l=(i=n.styles)==null?void 0:i.menu)==null?void 0:l.call(i,o,s)}},control:(o,s)=>{var i,l;return{...o,border:0,...(l=(i=n.styles)==null?void 0:i.control)==null?void 0:l.call(i,o,s)}},indicatorSeparator:(o,s)=>{var i,l;return{...o,display:"none",...(l=(i=n.styles)==null?void 0:i.indicatorSeparator)==null?void 0:l.call(i,o,s)}}},onChange:o=>{o&&e(o.value)},components:{SingleValue:Le,Option:ze,...n.components}})}var Ge=require("@uniformdev/design-system"),U=require("react");var Z=require("@uniformdev/context/api"),ee=require("react");function _({apiHost:e,apiKey:t,projectId:n}){let[a,r]=(0,ee.useState)({loading:!1,notConfigured:!1,error:null,result:null});return(0,ee.useEffect)(()=>{if(!n||!t||!e){r({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{r({notConfigured:!1,loading:!0,error:null,result:null});try{let i=await new Z.CachedManifestClient({projectId:n,apiKey:t,apiHost:e}).get({preview:!0});r({notConfigured:!1,loading:!1,error:null,result:i})}catch(s){let i;s instanceof Z.ApiClientError?(s.statusCode===403&&(i=`The API key ${t} did not have permissions to fetch the manifest. Ensure Context > Read Drafts permissions are granted.`),i=s.message):i=s.toString(),r({notConfigured:!1,loading:!1,error:i,result:null});return}})()},[e,t,n]),{result:a.result,error:a.error,loading:a.loading,notConfigured:a.notConfigured}}var A=require("@uniformdev/context/api"),te=require("react");function Ue(e,t,n){return e.reduce((a,r)=>{let o=t(r);if(typeof o=="undefined"||o===null)throw new Error("Objectify key selector returned undefined or null.");return a[t(r)]=n?n(r):r,a},{})}function T({apiHost:e,apiKey:t,projectId:n}){let[a,r]=(0,te.useState)({loading:!1,notConfigured:!1,error:null,result:null});return(0,te.useEffect)(()=>{if(!n||!t||!e){r({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{r({notConfigured:!1,loading:!0,error:null,result:null});try{let i=(await new A.CachedDimensionClient({projectId:n,apiKey:t,apiHost:e}).get()).dimensions.map(d=>({...d,displayName:(0,A.computeDimensionDisplayName)(d)})),l={dimensions:i,dimIndex:Ue(i,d=>d.dim,d=>d)};r({notConfigured:!1,loading:!1,error:null,result:l})}catch(s){let i;s instanceof A.ApiClientError?i=s.message:i=s.toString(),r({notConfigured:!1,loading:!1,error:i,result:null});return}})()},[e,t,n]),{result:a.result,error:a.error,loading:a.loading,notConfigured:a.notConfigured}}var O=require("@emotion/react/jsx-runtime"),ne=(0,U.createContext)(null),yt=({loadingComponent:e,errorComponent:t,contextConfig:n,children:a})=>{let r=_(n),o=T(n);return r.error||r.notConfigured?t?(0,O.jsx)(t,{contextConfig:n,result:r}):(0,O.jsx)(O.Fragment,{children:"ErrorComponent is not configured"}):o.error||o.notConfigured?t?(0,O.jsx)(t,{contextConfig:n,result:o}):(0,O.jsx)(O.Fragment,{children:"ErrorComponent is not configured"}):r.loading||o.loading?e?(0,O.jsx)(e,{}):(0,O.jsx)(Ge.LoadingIndicator,{}):(0,O.jsx)(ne.Provider,{value:{manifest:r.result,dimensions:o.result,contextConfig:n},children:a})};function xt(){let e=(0,U.useContext)(ne);if(!(e!=null&&e.contextConfig))throw new Error("Not within DataContext! Configuration data is not exist.");return e.contextConfig}function Dt(){let e=(0,U.useContext)(ne);if(!(e!=null&&e.manifest))throw new Error("Not within DataContext! Manifest data is not exist.");return e.manifest}function It(){let e=(0,U.useContext)(ne);if(!(e!=null&&e.dimensions))throw new Error("Not within DataContext! Dimensions data is not exist.");return e.dimensions}var Fe=require("@uniformdev/design-system"),je=require("react");var He=require("@uniformdev/design-system");function ye(e){return{label:e.displayName,value:e.dim,isDisabled:!1}}function oe(e){if(!e)return"unavailable";let[t]=e.split(":");switch(t.toLowerCase()){case"signal":return"data";case"intent":return"assign";case"audience":return"boy";default:return"user-list"}}function re(e){let t=[],n="";for(let a of e){let[r]=a.displayName.split(":");n!==r&&(t.push({label:r,options:[]}),n=r),t[t.length-1].options.push(ye(a))}return t}var G=require("@emotion/react/jsx-runtime"),ie=e=>{var r;let{data:t,getStyles:n,className:a}=e;return(0,G.jsx)("div",{css:{...n("groupHeading",e),textTransform:"none",fontSize:"var(--font-size-sm)"},className:a,children:(0,G.jsxs)("small",{css:{color:"var(--gray-500)",display:"flex",alignItems:"center",gap:"var(--spacing-xs)"},children:[(0,G.jsx)(He.Icon,{icon:oe((r=t.label)!=null?r:""),iconColor:"currentColor",size:16}),(0,G.jsx)("span",{children:t.label})]})})};var We=require("@emotion/react"),qe=require("@emotion/react/jsx-runtime");function ae({message:e}){return e?(0,qe.jsx)("div",{css:We.css`
|
|
12
|
+
color: var(--brand-primary-2);
|
|
13
|
+
font-size: var(--fs-xs);
|
|
14
|
+
position: absolute;
|
|
15
|
+
bottom: calc((var(--spacing-base) * -1) + -2px);
|
|
16
|
+
`,children:e}):null}var xe=require("@emotion/react/jsx-runtime"),se=e=>{var u,p;let{data:t,getStyles:n,cx:a,isDisabled:r,isFocused:o,isSelected:s,className:i,innerRef:l,innerProps:d}=e,[,h]=(p=(u=t.label)==null?void 0:u.split(":"))!=null?p:[];return(0,xe.jsx)("div",{css:n("option",e),className:a({option:!0,"option--is-disabled":r,"option--is-focused":o,"option--is-selected":s},i),ref:l,"aria-disabled":r,...d,children:(0,xe.jsx)("div",{css:{color:"var(--gray-700)"},children:h!=null?h:t.label})})};var _e=require("@uniformdev/design-system");var k=require("@emotion/react/jsx-runtime");function De({displayName:e}){let[t,n]=e.split(":");return(0,k.jsxs)("div",{css:{whiteSpace:"normal",overflow:"hidden"},children:[n?(0,k.jsxs)("small",{css:{color:"var(--gray-500)",display:"flex",alignItems:"center",gap:"var(--spacing-xs)"},children:[t?(0,k.jsx)(_e.Icon,{icon:oe(t),iconColor:"currentColor",size:16}):null,(0,k.jsx)("span",{"data-test-id":"dimension-name",children:t})]}):null,(0,k.jsx)("div",{css:{color:"var(--gray-700)"},"data-test-id":"dimension-value",children:n!=null?n:t})]})}var Ie=require("@emotion/react/jsx-runtime"),le=e=>{let{data:t,getStyles:n}=e;return(0,Ie.jsx)("div",{css:n("singleValue",e),children:(0,Ie.jsx)(De,{displayName:t.label})})};var I=require("@emotion/react/jsx-runtime");function we({onChange:e,criteriaMatch:t,dimensions:n,errorMessage:a,...r}){var d,h;let[o,s]=(0,je.useState)(typeof t.r!="undefined"&&me(t.r)!==null?t.r.toString(10):""),i=t.rDim,l=t.rDim?n.dimIndex[t.rDim]:void 0;return(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(Fe.InputComboBox,{...r,inputValue:o,menuShouldScrollIntoView:!0,value:{label:(d=l==null?void 0:l.displayName)!=null?d:i&&!l?`${t.rDim} (unknown)`:"",value:(h=t.rDim)!=null?h:t.r?t.r.toString(10):"",isDisabled:!1},options:[{label:"Enter a numeric score to match, or choose another dimension to match its score",value:"",isDisabled:!0},...re(n.dimensions)],styles:{...r.styles,valueContainer:(u,p)=>{var g,E;return{...u,padding:"var(--spacing-sm)",...(E=(g=r.styles)==null?void 0:g.valueContainer)==null?void 0:E.call(g,u,p)}},option:(u,p)=>{var g,E;return{fontSize:p.isDisabled?"0.8rem":void 0,...(E=(g=r.styles)==null?void 0:g.option)==null?void 0:E.call(g,u,p)}}},onChange:u=>{var p;u&&(e({...t,rDim:(p=u.value)==null?void 0:p.toString(),r:void 0}),s(""))},onInputChange:(u,p)=>{let g=me(u);p.action==="input-change"||p.action==="set-value"?(s(u),(g||u==="")&&e({...t,r:u||void 0,rDim:void 0})):!g&&!me(p.prevInputValue)&&(!u&&t.r?s(t.r.toString()):s(u))},components:{...r.components,Option:se,SingleValue:le,GroupHeading:ie},noOptionsMessage:({inputValue:u})=>me(u)?(0,I.jsxs)(I.Fragment,{children:[(0,I.jsxs)("div",{children:["Score: ",u]}),(0,I.jsx)("small",{children:"If you want to match on another dimension\u2019s score instead, clear the score value to search for a dimension."})]}):(0,I.jsxs)(I.Fragment,{children:[(0,I.jsxs)("div",{children:["No dimensions match your search \u201C",u,"\u201D"]}),(0,I.jsx)("small",{children:"If you want to match a literal score, enter a numeric value."})]})}),(0,I.jsx)(ae,{message:a})]})}function me(e){return/^\d+$/.test(e.toString(10))}var Ke=require("@uniformdev/design-system");var N=require("@emotion/react/jsx-runtime");function Re({onChange:e,value:t,dimensions:n,errorMessage:a,...r}){return(0,N.jsxs)(N.Fragment,{children:[(0,N.jsx)(Ke.InputComboBox,{...r,value:t?ye(t):void 0,options:re(n),styles:{...r.styles,valueContainer:(o,s)=>{var i,l;return{...o,padding:"var(--spacing-sm)",...(l=(i=r.styles)==null?void 0:i.valueContainer)==null?void 0:l.call(i,o,s)}}},onChange:o=>{o&&e(n.find(s=>s.dim===o.value))},components:{Option:se,SingleValue:le,GroupHeading:ie,...r.components}}),(0,N.jsx)(ae,{message:a})]})}var Je=require("@uniformdev/design-system"),Qe=require("react-icons/cg");var Ye=require("@emotion/react"),Xe=Ye.css`
|
|
2
17
|
display: flex;
|
|
3
18
|
align-items: center;
|
|
4
19
|
font-weight: var(--fw-bold);
|
|
@@ -9,7 +24,7 @@
|
|
|
9
24
|
&:focus {
|
|
10
25
|
text-decoration-line: underline;
|
|
11
26
|
}
|
|
12
|
-
`;var
|
|
27
|
+
`;var pe=require("@emotion/react/jsx-runtime"),Me=({linkTo:e,name:t,linkText:n=`Edit ${t} Component`})=>(0,pe.jsxs)("a",{css:Xe,title:`Edit ${t} component definition`,rel:"noopener noreferrer",target:"_blank",href:e,children:[n,(0,pe.jsx)(Je.Icon,{icon:Qe.CgChevronRight,iconColor:"currentColor",size:"1.5rem"})]});var ce=require("@emotion/react"),ue=require("@uniformdev/context"),x=require("@uniformdev/design-system"),Ee=J(require("immer")),z=require("react"),H=require("react-icons/cg");var m=require("@emotion/react/jsx-runtime"),Ze=ce.css`
|
|
13
28
|
flex: 2;
|
|
14
29
|
display: flex;
|
|
15
30
|
width: 50%;
|
|
@@ -20,7 +35,7 @@
|
|
|
20
35
|
&:focus {
|
|
21
36
|
text-decoration-line: underline;
|
|
22
37
|
}
|
|
23
|
-
`,
|
|
38
|
+
`,Rt=({value:e,setValue:t,contextConfig:n,displayTitle:a=!0})=>{let{loading:r,result:o,error:s}=T(n),i=(0,z.useMemo)(()=>{if(o)return o.dimensions.filter(v=>v.category==="ENR")},[o]),l=(0,z.useMemo)(()=>{if(!e)return i;if(i)return i.filter(v=>!e.some(R=>(0,ue.getEnrichmentVectorKey)(R.cat,R.key)===v.dim))},[i,e]),[d,h]=(0,z.useState)(""),[u,p]=(0,z.useState)(50),[g,E]=(0,z.useState)(!1),C=i==null?void 0:i.find(v=>v.dim===d),y=()=>{let[v,R]=d.split("_");B([...e!=null?e:[],{cat:v,key:R,str:u}]),h(""),p(50),E(!1)},B=v=>{let R=[];o?R=v.filter(q=>{let K=o.dimIndex[(0,ue.getEnrichmentVectorKey)(q.cat,q.key)];return Boolean(K)}):R=v;let j=R.length===0?null:R;t(j)};return s?(0,m.jsx)(x.Callout,{type:"danger",children:s}):r||o===null?(0,m.jsx)(x.LoadingIndicator,{}):(0,m.jsxs)("fieldset",{className:"enrichment-tag",children:[a?(0,m.jsx)("div",{css:{display:"flex",justifyContent:"space-between",marginBottom:"var(--spacing-base)"},children:(0,m.jsx)("legend",{css:{fontSize:"var(--fs-md)",fontWeight:"var(--fw-bold)"},children:"Enrichment Tags"})}):null,i!=null&&i.length?!g&&!e?(0,m.jsx)(x.Callout,{title:"No enrichment tags assigned.",type:"info",css:{marginBlock:"var(--spacing-base)"},children:(0,m.jsxs)("p",{children:["Click"," ",(0,m.jsx)("a",{onClick:()=>E(!0),target:"_blank",rel:"noopener noreferrer",css:{textDecorationLine:"underline"},children:"here"})," ","to assign your first enrichment tag."]})}):(0,m.jsxs)(m.Fragment,{children:[o&&(0,m.jsx)(Ot,{list:e!=null?e:[],setList:B,dimIndex:o.dimIndex}),g&&l&&l.length>0?(0,m.jsxs)("div",{className:"add-enrichment-tag",css:{display:"flex",flexWrap:"wrap",gap:"var(--spacing-lg)",marginTop:"var(--spacing-md)",alignItems:"center"},children:[(0,m.jsx)("div",{css:{flexGrow:1},children:(0,m.jsx)(x.InputSelect,{name:"enrichment-type",label:"Enrichment Tag",showLabel:!0,value:d,options:[{label:"Select",value:""},...l.map(v=>({label:v.displayName,value:v.dim}))],onChange:v=>h(v.currentTarget.value)})}),(0,m.jsx)(Vt,{score:u,setValue:p,cap:C?C.cap:100,css:{flexBasis:"9rem"}}),(0,m.jsx)(x.Button,{buttonType:"tertiary",size:"xl",css:{marginBottom:"var(--spacing-xs)",height:"3.5rem",margin:0,alignSelf:"flex-end"},onClick:y,disabled:!d,children:"Add"})]}):null,(0,m.jsxs)("div",{className:"enrichment-cta",style:{paddingTop:"10px",display:"flex",justifyContent:"space-between"},children:[!g&&l&&l.length>0&&e?(0,m.jsx)(x.AddListButton,{className:"add-more",buttonText:"Add More",onButtonClick:()=>E(!0)}):(0,m.jsx)("a",{css:Ze,title:"none",href:"#"}),(0,m.jsx)(Me,{name:"Enrichments",linkText:"Manage Enrichments",linkTo:`${n.apiHost}/projects/${encodeURIComponent(n.projectId)}/personalization/enrichments`})]})]}):(0,m.jsx)(Mt,{contextConfig:n})]})},Mt=({contextConfig:e})=>(0,m.jsx)(x.Callout,{title:"No enrichments found.",type:"caution",css:{marginBlock:"var(--spacing-base)"},children:(0,m.jsxs)("p",{children:["Looks like you do not have any enrichment created in your connected Uniform project. Start by creating your first enrichment"," ",(0,m.jsx)("a",{href:`${e.apiHost}/projects/${encodeURIComponent(e.projectId)}/personalization/enrichments`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}},children:"here"}),"."]})}),et=(e,t=100,n=0)=>Math.max(Math.min(e,t),n),tt=ce.css`
|
|
24
39
|
position: absolute;
|
|
25
40
|
bottom: 0.875rem;
|
|
26
41
|
left: var(--spacing-sm);
|
|
@@ -32,28 +47,28 @@
|
|
|
32
47
|
background-color: var(--gray-100);
|
|
33
48
|
border: 1px solid var(--gray-300);
|
|
34
49
|
border-radius: var(--rounded-full);
|
|
35
|
-
`,
|
|
36
|
-
${
|
|
50
|
+
`,Et=ce.css`
|
|
51
|
+
${tt}
|
|
37
52
|
left: auto;
|
|
38
53
|
right: var(--spacing-sm);
|
|
39
|
-
`,
|
|
54
|
+
`,Vt=({score:e,setValue:t,cap:n=100,...a})=>{let r=o=>{let s=o==="increment"?e+10:e-10;s<0&&(s=0),s>n&&(s=n),t(s)};return(0,m.jsxs)("div",{css:{position:"relative"},...a,children:[(0,m.jsx)(x.Input,{label:"Strength",id:"enrichment-score",type:"number",min:0,max:n,value:e,onChange:o=>t(et(Number(o.currentTarget.value)||0,n)),css:{textAlign:"center",boxSizing:"border-box"}}),(0,m.jsx)("button",{type:"button",title:"Reduce enrichment count",onClick:()=>r("decrement"),disabled:e===0,className:"scoreCounterButton",css:tt,children:(0,m.jsx)(x.Icon,{icon:H.CgMathMinus,iconColor:"gray",size:"1.5rem"})}),(0,m.jsx)("button",{type:"button",title:"Increase enrichment count",onClick:()=>r("increment"),className:"scoreCounterButton",css:Et,children:(0,m.jsx)(x.Icon,{icon:H.CgMathPlus,iconColor:"gray",size:"1.5rem"})})]})},Ot=({list:e,setList:t,dimIndex:n})=>{let a=o=>{t((0,Ee.default)(e,s=>{s.splice(o,1)}))},r=(o,s)=>{var l;let i=(l=n[`${e[o].cat}_${e[o].key}`])==null?void 0:l.cap;t((0,Ee.default)(e,d=>{d[o].str=et(Number(s)||0,i)}))};return(0,m.jsx)(m.Fragment,{children:e.map((o,s)=>{let i=n[(0,ue.getEnrichmentVectorKey)(o.cat,o.key)];if(!!i)return(0,m.jsxs)("div",{css:{display:"flex",alignItems:"center",gap:"var(--spacing-base)",backgroundColor:"var(--brand-secondary-2)",boxShadow:"var(--shadow-base)",borderRadius:"var(--rounded-base)",paddingInline:"var(--spacing-base)",marginBlock:"var(--spacing-base)"},className:"selected-enrichments",children:[(0,m.jsx)("span",{css:{fontWeight:"var(--fw-bold)",color:i?void 0:"var(--brand-secondary-5)"},children:i?i.displayName:`Enrichment '${o.cat}_${o.key}' is unknown`}),(0,m.jsx)("div",{css:{marginLeft:"auto",display:"flex",alignItems:"center",border:"0 solid var(--gray-400)",borderLeftWidth:"1px",borderRightWidth:"1px",padding:"var(--spacing-sm) var(--spacing-base)",flexBasis:"9rem"},children:(0,m.jsx)(x.Input,{type:"text",min:0,max:i.cap||100,title:"score",value:o.str,css:{textAlign:"center",width:"100px"},onChange:l=>r(s,l.currentTarget.value)})}),(0,m.jsx)("button",{type:"button",title:"Delete enrichment",onClick:()=>a(s),css:{border:0},children:(0,m.jsx)(x.Icon,{icon:H.CgCloseO,iconColor:"red",size:"1.5rem"})})]},`${o.cat}-${o.key}`)})})};var F=require("@uniformdev/design-system"),st=require("react"),lt=require("react-use"),w=J(require("yup"));function St(e){return Array.isArray(e)&&e.length>0&&e[0].cat!==void 0}function Bt(e){return e.crit!==void 0}function de(e){return e!=="+"&&e!=="-"}var it=require("@emotion/react"),S=require("@uniformdev/design-system"),Se=J(require("immer")),at=require("react-icons/cg");var L=require("@emotion/react"),Ve="6rem",nt=L.css`
|
|
40
55
|
position: relative;
|
|
41
56
|
padding: var(--spacing-md) var(--spacing-base);
|
|
42
57
|
border: 1px solid var(--gray-300);
|
|
43
58
|
box-shadow: var(--shadow-base);
|
|
44
59
|
background-color: white;
|
|
45
60
|
border-radius: var(--rounded-base);
|
|
46
|
-
margin-top: ${
|
|
61
|
+
margin-top: ${Ve};
|
|
47
62
|
display: flex;
|
|
48
63
|
|
|
49
64
|
&:before {
|
|
50
65
|
content: '';
|
|
51
66
|
display: block;
|
|
52
67
|
width: 1px;
|
|
53
|
-
height: ${
|
|
68
|
+
height: ${Ve};
|
|
54
69
|
background-color: var(--gray-300);
|
|
55
70
|
position: absolute;
|
|
56
|
-
top: -${
|
|
71
|
+
top: -${Ve};
|
|
57
72
|
left: var(--spacing-lg);
|
|
58
73
|
}
|
|
59
74
|
|
|
@@ -63,42 +78,27 @@
|
|
|
63
78
|
display: none;
|
|
64
79
|
}
|
|
65
80
|
}
|
|
66
|
-
`,
|
|
81
|
+
`,ot=L.css`
|
|
67
82
|
display: flex;
|
|
68
83
|
gap: var(--spacing-base);
|
|
69
84
|
flex-grow: 1;
|
|
70
85
|
flex-wrap: wrap;
|
|
71
86
|
margin-right: var(--spacing-base);
|
|
72
|
-
`,
|
|
87
|
+
`,fe=L.css`
|
|
73
88
|
width: 100%;
|
|
74
89
|
display: flex;
|
|
75
90
|
align-items: stretch;
|
|
76
91
|
position: relative;
|
|
77
|
-
`,
|
|
92
|
+
`,Oe=L.css`
|
|
78
93
|
flex: 2;
|
|
79
94
|
height: 52px;
|
|
80
95
|
min-width: 200px;
|
|
81
|
-
`,
|
|
96
|
+
`,rt=L.css`
|
|
82
97
|
flex: 1;
|
|
83
98
|
min-width: 80px;
|
|
84
|
-
`,
|
|
99
|
+
`,ge=L.css`
|
|
85
100
|
height: 100%;
|
|
86
101
|
width: 100%;
|
|
87
|
-
`;var
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
border-radius: var(--rounded-full);
|
|
91
|
-
color: var(--white);
|
|
92
|
-
display: flex;
|
|
93
|
-
width: 30px;
|
|
94
|
-
height: 30px;
|
|
95
|
-
justify-content: center;
|
|
96
|
-
font-size: var(--fs-base);
|
|
97
|
-
`,children:e})}var U=require("@emotion/react/jsx-runtime"),je=e=>{var l,d;let{data:t,getStyles:n,isDisabled:a,innerRef:r,innerProps:o}=e,[s,i]=(d=(l=t.label)==null?void 0:l.split(":"))!=null?d:[];return(0,U.jsxs)("div",{css:{...n("option",e),display:"flex",alignItems:"center",gap:"var(--spacing-sm)"},ref:r,"aria-disabled":a,...o,children:[i?(0,U.jsx)(re,{op:s}):(0,U.jsx)("div",{css:{width:"20px",height:"20px"}}),(0,U.jsx)("div",{children:i!=null?i:s})]})};var xe=require("@emotion/react/jsx-runtime"),Ke=e=>{let{data:t,getStyles:n}=e;return(0,xe.jsx)("div",{css:{...n("singleValue",e),width:"max-content"},children:t.label.length===1?(0,xe.jsx)(re,{op:t.label}):t.label})};var Xe=require("@emotion/react/jsx-runtime"),De=[{name:"=",description:"equals",value:"="},{name:"\u2260",description:"not equal",value:"!="},{name:">",description:"is greater than",value:">"},{name:"\u2265",description:"is greater than or equal to",value:">="},{name:"<",description:"is less than",value:"<"},{name:"\u2264",description:"is less than or equal to",value:"<="},{name:"has the strongest score",value:"+"},{name:"has the weakest score",value:"-"}];function Ie({onChange:e,value:t,...n}){var a,r;return(0,Xe.jsx)(Ye.InputComboBox,{...n,value:{label:(r=(a=De.find(o=>o.value===t))==null?void 0:a.name)!=null?r:t,value:t},options:De.map(o=>({label:o.description?`${o.name}:${o.description}`:o.name,value:o.value})),styles:{...n.styles,valueContainer:(o,s)=>{var i,l;return{...o,padding:"var(--spacing-sm)",...(l=(i=n.styles)==null?void 0:i.valueContainer)==null?void 0:l.call(i,o,s)}},menu:(o,s)=>{var i,l;return{...o,width:"max-content",...(l=(i=n.styles)==null?void 0:i.menu)==null?void 0:l.call(i,o,s)}},control:(o,s)=>{var i,l;return{...o,border:0,...(l=(i=n.styles)==null?void 0:i.control)==null?void 0:l.call(i,o,s)}},indicatorSeparator:(o,s)=>{var i,l;return{...o,display:"none",...(l=(i=n.styles)==null?void 0:i.indicatorSeparator)==null?void 0:l.call(i,o,s)}}},onChange:o=>{o&&e(o.value)},components:{SingleValue:Ke,Option:je,...n.components}})}var tt=require("@uniformdev/design-system");var Je=require("@uniformdev/design-system");function we(e){return{label:e.displayName,value:e.dim,isDisabled:!1}}function ie(e){if(!e)return"unavailable";let[t]=e.split(":");switch(t.toLowerCase()){case"signal":return"data";case"intent":return"assign";case"audience":return"boy";default:return"user-list"}}function ae(e){let t=[],n="";for(let a of e){let[r]=a.displayName.split(":");n!==r&&(t.push({label:r,options:[]}),n=r),t[t.length-1].options.push(we(a))}return t}var G=require("@emotion/react/jsx-runtime"),se=e=>{var r;let{data:t,getStyles:n,className:a}=e;return(0,G.jsx)("div",{css:{...n("groupHeading",e),textTransform:"none",fontSize:"var(--font-size-sm)"},className:a,children:(0,G.jsxs)("small",{css:{color:"var(--gray-500)",display:"flex",alignItems:"center",gap:"var(--spacing-xs)"},children:[(0,G.jsx)(Je.Icon,{icon:ie((r=t.label)!=null?r:""),iconColor:"currentColor",size:16}),(0,G.jsx)("span",{children:t.label})]})})};var Qe=require("@emotion/react"),Ze=require("@emotion/react/jsx-runtime");function le({message:e}){return e?(0,Ze.jsx)("div",{css:Qe.css`
|
|
98
|
-
color: var(--brand-primary-2);
|
|
99
|
-
font-size: var(--fs-xs);
|
|
100
|
-
position: absolute;
|
|
101
|
-
bottom: calc((var(--spacing-base) * -1) + -2px);
|
|
102
|
-
`,children:e}):null}var Re=require("@emotion/react/jsx-runtime"),me=e=>{var u,p;let{data:t,getStyles:n,cx:a,isDisabled:r,isFocused:o,isSelected:s,className:i,innerRef:l,innerProps:d}=e,[,h]=(p=(u=t.label)==null?void 0:u.split(":"))!=null?p:[];return(0,Re.jsx)("div",{css:n("option",e),className:a({option:!0,"option--is-disabled":r,"option--is-focused":o,"option--is-selected":s},i),ref:l,"aria-disabled":r,...d,children:(0,Re.jsx)("div",{css:{color:"var(--gray-700)"},children:h!=null?h:t.label})})};var et=require("@uniformdev/design-system");var z=require("@emotion/react/jsx-runtime");function Me({displayName:e}){let[t,n]=e.split(":");return(0,z.jsxs)("div",{css:{whiteSpace:"normal",overflow:"hidden"},children:[n?(0,z.jsxs)("small",{css:{color:"var(--gray-500)",display:"flex",alignItems:"center",gap:"var(--spacing-xs)"},children:[t?(0,z.jsx)(et.Icon,{icon:ie(t),iconColor:"currentColor",size:16}):null,(0,z.jsx)("span",{"data-test-id":"dimension-name",children:t})]}):null,(0,z.jsx)("div",{css:{color:"var(--gray-700)"},"data-test-id":"dimension-value",children:n!=null?n:t})]})}var Ee=require("@emotion/react/jsx-runtime"),pe=e=>{let{data:t,getStyles:n}=e;return(0,Ee.jsx)("div",{css:n("singleValue",e),children:(0,Ee.jsx)(Me,{displayName:t.label})})};var L=require("@emotion/react/jsx-runtime");function Ve({onChange:e,value:t,dimensions:n,errorMessage:a,...r}){return(0,L.jsxs)(L.Fragment,{children:[(0,L.jsx)(tt.InputComboBox,{...r,value:t?we(t):void 0,options:ae(n),styles:{...r.styles,valueContainer:(o,s)=>{var i,l;return{...o,padding:"var(--spacing-sm)",...(l=(i=r.styles)==null?void 0:i.valueContainer)==null?void 0:l.call(i,o,s)}}},onChange:o=>{o&&e(n.find(s=>s.dim===o.value))},components:{Option:me,SingleValue:pe,GroupHeading:se,...r.components}}),(0,L.jsx)(le,{message:a})]})}var nt=require("@uniformdev/design-system"),ot=require("react");var I=require("@emotion/react/jsx-runtime");function Oe({onChange:e,criteriaMatch:t,dimensions:n,errorMessage:a,...r}){var d,h;let[o,s]=(0,ot.useState)(typeof t.r!="undefined"&&ue(t.r)!==null?t.r.toString(10):""),i=t.rDim,l=t.rDim?n.dimIndex[t.rDim]:void 0;return(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(nt.InputComboBox,{...r,inputValue:o,menuShouldScrollIntoView:!0,value:{label:(d=l==null?void 0:l.displayName)!=null?d:i&&!l?`${t.rDim} (unknown)`:"",value:(h=t.rDim)!=null?h:t.r?t.r.toString(10):"",isDisabled:!1},options:[{label:"Enter a numeric score to match, or choose another dimension to match its score",value:"",isDisabled:!0},...ae(n.dimensions)],styles:{...r.styles,valueContainer:(u,p)=>{var g,E;return{...u,padding:"var(--spacing-sm)",...(E=(g=r.styles)==null?void 0:g.valueContainer)==null?void 0:E.call(g,u,p)}},option:(u,p)=>{var g,E;return{fontSize:p.isDisabled?"0.8rem":void 0,...(E=(g=r.styles)==null?void 0:g.option)==null?void 0:E.call(g,u,p)}}},onChange:u=>{var p;u&&(e({...t,rDim:(p=u.value)==null?void 0:p.toString(),r:void 0}),s(""))},onInputChange:(u,p)=>{let g=ue(u);p.action==="input-change"||p.action==="set-value"?(s(u),(g||u==="")&&e({...t,r:u||void 0,rDim:void 0})):!g&&!ue(p.prevInputValue)&&(!u&&t.r?s(t.r.toString()):s(u))},components:{...r.components,Option:me,SingleValue:pe,GroupHeading:se},noOptionsMessage:({inputValue:u})=>ue(u)?(0,I.jsxs)(I.Fragment,{children:[(0,I.jsxs)("div",{children:["Score: ",u]}),(0,I.jsx)("small",{children:"If you want to match on another dimension\u2019s score instead, clear the score value to search for a dimension."})]}):(0,I.jsxs)(I.Fragment,{children:[(0,I.jsxs)("div",{children:["No dimensions match your search \u201C",u,"\u201D"]}),(0,I.jsx)("small",{children:"If you want to match a literal score, enter a numeric value."})]})}),(0,I.jsx)(le,{message:a})]})}function ue(e){return/^\d+$/.test(e.toString(10))}var f=require("@emotion/react/jsx-runtime"),Be=({value:e,setValue:t,dimensions:n,onMenuOpen:a,onMenuClose:r,onAddCriteria:o,onRemoveCriteria:s,displayTitle:i=!0,components:l,errors:d={}})=>{let h=e||{crit:[]},u=C=>{t({...h,op:C==="&"?void 0:C})},p=()=>{let C={...h,crit:[...h.crit,{l:"",op:">",r:0}]};t(C),o==null||o(C)},g=(C,y)=>{t((0,Se.default)(h,B=>{B.crit[y]=C}))},E=C=>{let y=(0,Se.default)(h,v=>{v.crit.splice(C,1)}),B=y.crit.length===0?null:y;t(B),s==null||s(B)};return(0,f.jsxs)("fieldset",{className:"personalization-criteria",children:[i?l!=null&&l.Title?(0,f.jsx)(l.Title,{}):(0,f.jsx)("legend",{css:{fontSize:"var(--fs-md)",fontWeight:"var(--fw-bold)"},children:"Personalize This"}):null,l!=null&&l.CustomVariantName?(0,f.jsx)(l.CustomVariantName,{}):null,h.crit.length?(0,f.jsx)("div",{children:h.crit.map((C,y)=>{var R,j,q,K;let B=((R=C.l)==null?void 0:R.length)>0,v=C.op!=="+"&&C.op!=="-";return(0,f.jsxs)("div",{css:He,"data-test-id":"criteria-container",children:[(0,f.jsxs)("div",{css:rt.css`
|
|
103
|
-
${We}/* grid-template-columns: minmax(0, 1fr) ${v?"minmax(0, 79px) minmax(0, 1fr)":"minmax(0, 1fr)"} */
|
|
104
|
-
`,className:"criteriaItemInner",children:[(0,f.jsx)("div",{css:[ne,ye],className:"criteria-wrapper","data-test-id":"select-criteria",children:(0,f.jsx)(Ve,{errorMessage:(j=d.lhs)==null?void 0:j[y],css:oe,styles:{control:D=>({...D,height:"100%"})},dimensions:n.dimensions,onChange:D=>{g({...C,l:D.dim},y)},value:n.dimIndex[C.l],onMenuOpen:a,onMenuClose:r})}),(0,f.jsx)("div",{css:[ne,qe],className:"criteria-wrapper","data-test-id":"select-operator",children:(0,f.jsx)(Ie,{name:`op-${y}`,css:oe,styles:{control:D=>({...D,height:"100%"})},value:C.op,onChange:D=>{g(D==="+"||D==="-"?{...C,op:D,r:void 0,rDim:void 0}:{...C,op:D},y)},onMenuOpen:a,onMenuClose:r})}),v?(0,f.jsx)("div",{css:[ne,ye],className:"criteria-wrapper","data-test-id":"select-match-criteria",children:(0,f.jsx)(Oe,{errorMessage:(q=d.rhs)==null?void 0:q[y],css:oe,styles:{control:D=>({...D,height:"100%"})},criteriaMatch:C,onChange:D=>{g(D,y)},isDisabled:!B,dimensions:n,onMenuOpen:a,onMenuClose:r})}):null]}),(0,f.jsx)("button",{type:"button",onClick:()=>E(y),title:"Delete Personalization",css:{backgroundColor:"transparent",backgroundImage:"none",borderWidth:0},"data-test-id":"button-delete",children:(0,f.jsx)(O.Icon,{icon:it.CgCloseO,iconColor:"red",size:"1.5rem"})}),y>0?(0,f.jsx)("div",{className:"criteria-group-operation",css:{position:"absolute",top:"-4rem",transform:"translateX(calc(1.5rem - 50%))"},children:(0,f.jsx)(O.InputInlineSelect,{"data-test-id":"dropdown-button-combine",disabled:y>1,value:(K=h.op)!=null?K:"&",options:[{label:"AND",value:"&"},{label:"OR",value:"|"}],onChange:D=>{u(D.value)}})}):null]},y)})}):(0,f.jsx)(O.Callout,{title:"Default variant",type:"info",css:{marginBlock:"var(--spacing-base)"},children:(0,f.jsx)(O.Paragraph,{children:'This personalized variant has no match criteria and will be shown to any visitor that does not match any preceding variants. Ensure that default variants come last in the variant list. Personalize this variant by clicking "Add Criteria" to get started.'})}),n.dimensions.length===0?l!=null&&l.NoDimensionsDefined?(0,f.jsx)(l.NoDimensionsDefined,{}):(0,f.jsx)(O.Callout,{title:"Dimensions",type:"info",css:{marginBlock:"var(--spacing-base)"},children:(0,f.jsx)("p",{children:"You do not have any dimensions configured."})}):(0,f.jsx)(O.AddListButton,{"data-test-id":"button-add-criteria",className:"add-more",buttonText:"Add Criteria",onButtonClick:p})]})};var w=J(require("yup")),st=require("react-use");function Et(e){return Array.isArray(e)&&e.length>0&&e[0].cat!==void 0}function Vt(e){return e.crit!==void 0}function ce(e){return e!=="+"&&e!=="-"}var P=require("@emotion/react/jsx-runtime");function lt(e){let t={crit:[]};return e.forEach(n=>{if(!n.path)return;let a=/\[(\d+)\]\.(\w+)/g,r=[...n.path.matchAll(a)][0];if((r==null?void 0:r.length)==3){let o=Number(r[1]),s=r[2];if(t.crit.length>o)t.crit[o]={...t.crit[o],[s]:n.message};else{let i={};i[s]=n.message,t.crit.push(i)}}}),t}async function Pe(e,t){let n=w.object().shape({l:w.string().required("Please select a dimension").oneOf(t==null?void 0:t.dimensions.map(a=>a.dim),"Select a criteria"),op:w.string().required(),r:w.mixed().nullable().when(["rDim","op"],{is:(a,r)=>ce(r)&&!a,then:w.string().required("Choose a score or dimension")}),rDim:w.string().oneOf(t==null?void 0:t.dimensions.map(a=>a.dim),"Select a criteria").when(["r","op"],{is:(a,r)=>ce(r)&&!a,then:w.string().required("Choose a score or dimension")})},["rDim","r"]);try{await w.object({crit:w.array(n)}).nullable().validate(e,{abortEarly:!1})}catch(a){return lt(a.inner)}}var Ot=({contextConfig:e,value:t,setValue:n,...a})=>{var h,u;let[r,o]=(0,at.useState)(void 0),{loading:s,result:i,error:l}=T(e);return(0,st.useAsync)(async()=>{if(t&&i){let p=await Pe(t,i);o(p)}},[t,i,Pe]),l?(0,P.jsx)(_.Callout,{type:"danger",children:l}):s||i===null?(0,P.jsx)(_.LoadingIndicator,{}):(0,P.jsx)(Be,{...a,value:t,setValue:async p=>{let g=await Pe(p,i);o(g),n(p)},errors:{lhs:(h=r==null?void 0:r.crit)==null?void 0:h.map(p=>p==null?void 0:p.l),rhs:(u=r==null?void 0:r.crit)==null?void 0:u.map(p=>p==null?void 0:p.rDim)},dimensions:i,components:{NoDimensionsDefined:()=>(0,P.jsx)(_.Callout,{title:"Dimensions",type:"info",css:{marginBlock:"var(--spacing-base)"},children:(0,P.jsxs)("p",{children:["You do not have any dimensions configured. Create your first"," ",(0,P.jsx)("a",{href:`${e.apiHost}/projects/${encodeURIComponent(e.projectId)}/personalization/signals`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}},children:"Dimension"})]})})}})};var de=require("react"),fe=require("@uniformdev/context/api");function F({apiHost:e,apiKey:t,projectId:n}){let[a,r]=(0,de.useState)({loading:!1,notConfigured:!1,error:null,result:null});return(0,de.useEffect)(()=>{if(!n||!t||!e){r({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{r({notConfigured:!1,loading:!0,error:null,result:null});try{let i=await new fe.CachedManifestClient({projectId:n,apiKey:t,apiHost:e}).get({preview:!0});r({notConfigured:!1,loading:!1,error:null,result:i})}catch(s){let i;s instanceof fe.ApiClientError?(s.statusCode===403&&(i=`The API key ${t} did not have permissions to fetch the manifest. Ensure Context > Read Drafts permissions are granted.`),i=s.message):i=s.toString(),r({notConfigured:!1,loading:!1,error:i,result:null});return}})()},[e,t,n]),{result:a.result,error:a.error,loading:a.loading,notConfigured:a.notConfigured}}var mt=require("@uniformdev/design-system"),H=require("@emotion/react/jsx-runtime");function St({children:e,versionMap:t,contextConfig:n}){let{loading:a,result:r}=F(n);if(a)return(0,H.jsx)(mt.LoadingIndicator,{});if(r){let o=t[r.project.ui_version];if(o)return(0,H.jsx)(o,{})}return(0,H.jsx)(H.Fragment,{children:e})}var W=require("react");var pt=require("@uniformdev/design-system"),S=require("@emotion/react/jsx-runtime"),ge=(0,W.createContext)(null),Bt=({loadingComponent:e,errorComponent:t,contextConfig:n,children:a})=>{let r=F(n),o=T(n);return r.error||r.notConfigured?t?(0,S.jsx)(t,{contextConfig:n,result:r}):(0,S.jsx)(S.Fragment,{children:"ErrorComponent is not configured"}):o.error||o.notConfigured?t?(0,S.jsx)(t,{contextConfig:n,result:o}):(0,S.jsx)(S.Fragment,{children:"ErrorComponent is not configured"}):r.loading||o.loading?e?(0,S.jsx)(e,{}):(0,S.jsx)(pt.LoadingIndicator,{}):(0,S.jsx)(ge.Provider,{value:{manifest:r.result,dimensions:o.result,contextConfig:n},children:a})};function Pt(){let e=(0,W.useContext)(ge);if(!(e!=null&&e.contextConfig))throw new Error("Not within DataContext! Configuration data is not exist.");return e.contextConfig}function Tt(){let e=(0,W.useContext)(ge);if(!(e!=null&&e.manifest))throw new Error("Not within DataContext! Manifest data is not exist.");return e.manifest}function kt(){let e=(0,W.useContext)(ge);if(!(e!=null&&e.dimensions))throw new Error("Not within DataContext! Dimensions data is not exist.");return e.dimensions}var ut=require("uuid"),ct=require("@uniformdev/context/api"),Te=async e=>{if(!e)return{valid:!1,error:new Error("contextConfig was not defined.")};if(!e.apiHost)return{valid:!1,error:new Error("apiHost was not defined.")};if(!e.apiKey)return{valid:!1,error:new Error("apiKey was not defined.")};if(!(0,ut.validate)(e.apiKey)&&!e.projectId)return{valid:!1,error:new Error("projectId is required when using a modern API key.")};let t=new ct.UncachedManifestClient({projectId:e.projectId,apiKey:e.apiKey,apiHost:e.apiHost});try{return{valid:!0,result:await t.get({preview:!0})}}catch(n){return{valid:!1,error:n}}};var Ce=require("react");var Nt=e=>{let[t,n]=(0,Ce.useState)({validating:!1,error:void 0}),{apiKey:a,apiHost:r,projectId:o}=e||{};return(0,Ce.useEffect)(()=>{if(!a||!r)return;(async()=>{n({validating:!0,error:void 0});let{error:i,result:l}=await Te({apiHost:r,apiKey:a,projectId:o});n(i?{error:i,validating:!1}:{error:void 0,validating:!1,result:l})})()},[r,a,o]),{validating:t.validating,error:t.error,result:t.result}};V(M,require("@uniformdev/design-system"),module.exports);0&&(module.exports={ContextData,CriteriaMatchMenu,CriteriaOperatorMenu,DimensionMenu,DimensionValue,EditLink,EnrichmentTag,PersonalizationCriteria,PersonalizationCriteriaStatic,ProjectUIVersion,addEnrichmentLink,contextCriteriaMenuOperators,convertErrorsToObj,isEnrichmentTagData,isPersonalizationCriteriaData,opHasRhs,useContextConfig,useContextData,useDimensions,useDimensionsDataContext,useManifest,useValidateContextConfig,validateContextConfig});
|
|
102
|
+
`;var f=require("@emotion/react/jsx-runtime"),Be=({value:e,setValue:t,dimensions:n,onMenuOpen:a,onMenuClose:r,onAddCriteria:o,onRemoveCriteria:s,displayTitle:i=!0,components:l,errors:d={}})=>{let h=e||{crit:[]},u=C=>{t({...h,op:C==="&"?void 0:C})},p=()=>{let C={...h,crit:[...h.crit,{l:"",op:">",r:0}]};t(C),o==null||o(C)},g=(C,y)=>{t((0,Se.default)(h,B=>{B.crit[y]=C}))},E=C=>{let y=(0,Se.default)(h,v=>{v.crit.splice(C,1)}),B=y.crit.length===0?null:y;t(B),s==null||s(B)};return(0,f.jsxs)("fieldset",{className:"personalization-criteria",children:[i?l!=null&&l.Title?(0,f.jsx)(l.Title,{}):(0,f.jsx)("legend",{css:{fontSize:"var(--fs-md)",fontWeight:"var(--fw-bold)"},children:"Personalize This"}):null,l!=null&&l.CustomVariantName?(0,f.jsx)(l.CustomVariantName,{}):null,h.crit.length?(0,f.jsx)("div",{children:h.crit.map((C,y)=>{var R,j,q,K;let B=((R=C.l)==null?void 0:R.length)>0,v=C.op!=="+"&&C.op!=="-";return(0,f.jsxs)("div",{css:nt,"data-test-id":"criteria-container",children:[(0,f.jsxs)("div",{css:it.css`
|
|
103
|
+
${ot}/* grid-template-columns: minmax(0, 1fr) ${v?"minmax(0, 79px) minmax(0, 1fr)":"minmax(0, 1fr)"} */
|
|
104
|
+
`,className:"criteriaItemInner",children:[(0,f.jsx)("div",{css:[fe,Oe],className:"criteria-wrapper","data-test-id":"select-criteria",children:(0,f.jsx)(Re,{errorMessage:(j=d.lhs)==null?void 0:j[y],css:ge,styles:{control:D=>({...D,height:"100%"})},dimensions:n.dimensions,onChange:D=>{g({...C,l:D.dim},y)},value:n.dimIndex[C.l],onMenuOpen:a,onMenuClose:r})}),(0,f.jsx)("div",{css:[fe,rt],className:"criteria-wrapper","data-test-id":"select-operator",children:(0,f.jsx)(ve,{name:`op-${y}`,css:ge,styles:{control:D=>({...D,height:"100%"})},value:C.op,onChange:D=>{g(D==="+"||D==="-"?{...C,op:D,r:void 0,rDim:void 0}:{...C,op:D},y)},onMenuOpen:a,onMenuClose:r})}),v?(0,f.jsx)("div",{css:[fe,Oe],className:"criteria-wrapper","data-test-id":"select-match-criteria",children:(0,f.jsx)(we,{errorMessage:(q=d.rhs)==null?void 0:q[y],css:ge,styles:{control:D=>({...D,height:"100%"})},criteriaMatch:C,onChange:D=>{g(D,y)},isDisabled:!B,dimensions:n,onMenuOpen:a,onMenuClose:r})}):null]}),(0,f.jsx)("button",{type:"button",onClick:()=>E(y),title:"Delete Personalization",css:{backgroundColor:"transparent",backgroundImage:"none",borderWidth:0},"data-test-id":"button-delete",children:(0,f.jsx)(S.Icon,{icon:at.CgCloseO,iconColor:"red",size:"1.5rem"})}),y>0?(0,f.jsx)("div",{className:"criteria-group-operation",css:{position:"absolute",top:"-4rem",transform:"translateX(calc(1.5rem - 50%))"},children:(0,f.jsx)(S.InputInlineSelect,{"data-test-id":"dropdown-button-combine",disabled:y>1,value:(K=h.op)!=null?K:"&",options:[{label:"AND",value:"&"},{label:"OR",value:"|"}],onChange:D=>{u(D.value)}})}):null]},y)})}):(0,f.jsx)(S.Callout,{title:"Default variant",type:"info",css:{marginBlock:"var(--spacing-base)"},children:(0,f.jsx)(S.Paragraph,{children:'This personalized variant has no match criteria and will be shown to any visitor that does not match any preceding variants. Ensure that default variants come last in the variant list. Personalize this variant by clicking "Add Criteria" to get started.'})}),n.dimensions.length===0?l!=null&&l.NoDimensionsDefined?(0,f.jsx)(l.NoDimensionsDefined,{}):(0,f.jsx)(S.Callout,{title:"Dimensions",type:"info",css:{marginBlock:"var(--spacing-base)"},children:(0,f.jsx)("p",{children:"You do not have any dimensions configured."})}):(0,f.jsx)(S.AddListButton,{"data-test-id":"button-add-criteria",className:"add-more",buttonText:"Add Criteria",onButtonClick:p})]})};var P=require("@emotion/react/jsx-runtime");function mt(e){let t={crit:[]};return e.forEach(n=>{if(!n.path)return;let a=/\[(\d+)\]\.(\w+)/g,r=[...n.path.matchAll(a)][0];if((r==null?void 0:r.length)==3){let o=Number(r[1]),s=r[2];if(t.crit.length>o)t.crit[o]={...t.crit[o],[s]:n.message};else{let i={};i[s]=n.message,t.crit.push(i)}}}),t}async function Pe(e,t){let n=w.object().shape({l:w.string().required("Please select a dimension").oneOf(t==null?void 0:t.dimensions.map(a=>a.dim),"Select a criteria"),op:w.string().required(),r:w.mixed().nullable().when(["rDim","op"],{is:(a,r)=>de(r)&&!a,then:w.string().required("Choose a score or dimension")}),rDim:w.string().oneOf(t==null?void 0:t.dimensions.map(a=>a.dim),"Select a criteria").when(["r","op"],{is:(a,r)=>de(r)&&!a,then:w.string().required("Choose a score or dimension")})},["rDim","r"]);try{await w.object({crit:w.array(n)}).nullable().validate(e,{abortEarly:!1})}catch(a){return mt(a.inner)}}var Tt=({contextConfig:e,value:t,setValue:n,...a})=>{var h,u;let[r,o]=(0,st.useState)(void 0),{loading:s,result:i,error:l}=T(e);return(0,lt.useAsync)(async()=>{if(t&&i){let p=await Pe(t,i);o(p)}},[t,i,Pe]),l?(0,P.jsx)(F.Callout,{type:"danger",children:l}):s||i===null?(0,P.jsx)(F.LoadingIndicator,{}):(0,P.jsx)(Be,{...a,value:t,setValue:async p=>{let g=await Pe(p,i);o(g),n(p)},errors:{lhs:(h=r==null?void 0:r.crit)==null?void 0:h.map(p=>p==null?void 0:p.l),rhs:(u=r==null?void 0:r.crit)==null?void 0:u.map(p=>p==null?void 0:p.rDim)},dimensions:i,components:{NoDimensionsDefined:()=>(0,P.jsx)(F.Callout,{title:"Dimensions",type:"info",css:{marginBlock:"var(--spacing-base)"},children:(0,P.jsxs)("p",{children:["You do not have any dimensions configured. Create your first"," ",(0,P.jsx)("a",{href:`${e.apiHost}/projects/${encodeURIComponent(e.projectId)}/personalization/signals`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}},children:"Dimension"})]})})}})};var pt=require("@uniformdev/design-system");var W=require("@emotion/react/jsx-runtime");function kt({children:e,versionMap:t,contextConfig:n}){let{loading:a,result:r}=_(n);if(a)return(0,W.jsx)(pt.LoadingIndicator,{});if(r){let o=t[r.project.ui_version];if(o)return(0,W.jsx)(o,{})}return(0,W.jsx)(W.Fragment,{children:e})}var Ce=require("react");var ut=require("@uniformdev/context/api"),ct=require("uuid"),Te=async e=>{if(!e)return{valid:!1,error:new Error("contextConfig was not defined.")};if(!e.apiHost)return{valid:!1,error:new Error("apiHost was not defined.")};if(!e.apiKey)return{valid:!1,error:new Error("apiKey was not defined.")};if(!(0,ct.validate)(e.apiKey)&&!e.projectId)return{valid:!1,error:new Error("projectId is required when using a modern API key.")};let t=new ut.UncachedManifestClient({projectId:e.projectId,apiKey:e.apiKey,apiHost:e.apiHost});try{return{valid:!0,result:await t.get({preview:!0})}}catch(n){return{valid:!1,error:n}}};var Nt=e=>{let[t,n]=(0,Ce.useState)({validating:!1,error:void 0}),{apiKey:a,apiHost:r,projectId:o}=e||{};return(0,Ce.useEffect)(()=>{if(!a||!r)return;(async()=>{n({validating:!0,error:void 0});let{error:i,result:l}=await Te({apiHost:r,apiKey:a,projectId:o});n(i?{error:i,validating:!1}:{error:void 0,validating:!1,result:l})})()},[r,a,o]),{validating:t.validating,error:t.error,result:t.result}};V(M,require("@uniformdev/design-system"),module.exports);0&&(module.exports={ContextData,CriteriaMatchMenu,CriteriaOperatorMenu,DimensionMenu,DimensionValue,EditLink,EnrichmentTag,PersonalizationCriteria,PersonalizationCriteriaStatic,ProjectUIVersion,addEnrichmentLink,contextCriteriaMenuOperators,convertErrorsToObj,isEnrichmentTagData,isPersonalizationCriteriaData,opHasRhs,useContextConfig,useContextData,useDimensions,useDimensionsDataContext,useManifest,useValidateContextConfig,validateContextConfig});
|
package/dist/index.mjs
CHANGED
|
@@ -1,4 +1,19 @@
|
|
|
1
|
-
import{jsx as c}from"@emotion/react";import*as h from"react";import{
|
|
1
|
+
import{jsx as c}from"@emotion/react";import*as h from"react";import{InputComboBox as qe}from"@uniformdev/design-system";import{css as Ge}from"@emotion/react";import{jsx as He}from"@emotion/react/jsx-runtime";function N({op:e}){return He("div",{className:"operation-bubble",css:Ge`
|
|
2
|
+
align-items: center;
|
|
3
|
+
background: var(--gray-700);
|
|
4
|
+
border-radius: var(--rounded-full);
|
|
5
|
+
color: var(--white);
|
|
6
|
+
display: flex;
|
|
7
|
+
width: 30px;
|
|
8
|
+
height: 30px;
|
|
9
|
+
justify-content: center;
|
|
10
|
+
font-size: var(--fs-base);
|
|
11
|
+
`,children:e})}import{jsx as K,jsxs as We}from"@emotion/react/jsx-runtime";var ue=e=>{var l,d;let{data:t,getStyles:o,isDisabled:a,innerRef:r,innerProps:n}=e,[s,i]=(d=(l=t.label)==null?void 0:l.split(":"))!=null?d:[];return We("div",{css:{...o("option",e),display:"flex",alignItems:"center",gap:"var(--spacing-sm)"},ref:r,"aria-disabled":a,...n,children:[i?K(N,{op:s}):K("div",{css:{width:"20px",height:"20px"}}),K("div",{children:i!=null?i:s})]})};import{jsx as ce}from"@emotion/react/jsx-runtime";var de=e=>{let{data:t,getStyles:o}=e;return ce("div",{css:{...o("singleValue",e),width:"max-content"},children:t.label.length===1?ce(N,{op:t.label}):t.label})};import{jsx as _e}from"@emotion/react/jsx-runtime";var fe=[{name:"=",description:"equals",value:"="},{name:"\u2260",description:"not equal",value:"!="},{name:">",description:"is greater than",value:">"},{name:"\u2265",description:"is greater than or equal to",value:">="},{name:"<",description:"is less than",value:"<"},{name:"\u2264",description:"is less than or equal to",value:"<="},{name:"has the strongest score",value:"+"},{name:"has the weakest score",value:"-"}];function ge({onChange:e,value:t,...o}){var a,r;return _e(qe,{...o,value:{label:(r=(a=fe.find(n=>n.value===t))==null?void 0:a.name)!=null?r:t,value:t},options:fe.map(n=>({label:n.description?`${n.name}:${n.description}`:n.name,value:n.value})),styles:{...o.styles,valueContainer:(n,s)=>{var i,l;return{...n,padding:"var(--spacing-sm)",...(l=(i=o.styles)==null?void 0:i.valueContainer)==null?void 0:l.call(i,n,s)}},menu:(n,s)=>{var i,l;return{...n,width:"max-content",...(l=(i=o.styles)==null?void 0:i.menu)==null?void 0:l.call(i,n,s)}},control:(n,s)=>{var i,l;return{...n,border:0,...(l=(i=o.styles)==null?void 0:i.control)==null?void 0:l.call(i,n,s)}},indicatorSeparator:(n,s)=>{var i,l;return{...n,display:"none",...(l=(i=o.styles)==null?void 0:i.indicatorSeparator)==null?void 0:l.call(i,n,s)}}},onChange:n=>{n&&e(n.value)},components:{SingleValue:de,Option:ue,...o.components}})}import{LoadingIndicator as tt}from"@uniformdev/design-system";import{createContext as nt,useContext as Y}from"react";import{ApiClientError as Fe,CachedManifestClient as je}from"@uniformdev/context/api";import{useEffect as Ke,useState as Ye}from"react";function z({apiHost:e,apiKey:t,projectId:o}){let[a,r]=Ye({loading:!1,notConfigured:!1,error:null,result:null});return Ke(()=>{if(!o||!t||!e){r({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{r({notConfigured:!1,loading:!0,error:null,result:null});try{let i=await new je({projectId:o,apiKey:t,apiHost:e}).get({preview:!0});r({notConfigured:!1,loading:!1,error:null,result:i})}catch(s){let i;s instanceof Fe?(s.statusCode===403&&(i=`The API key ${t} did not have permissions to fetch the manifest. Ensure Context > Read Drafts permissions are granted.`),i=s.message):i=s.toString(),r({notConfigured:!1,loading:!1,error:i,result:null});return}})()},[e,t,o]),{result:a.result,error:a.error,loading:a.loading,notConfigured:a.notConfigured}}import{ApiClientError as Xe,CachedDimensionClient as Je,computeDimensionDisplayName as Qe}from"@uniformdev/context/api";import{useEffect as Ze,useState as et}from"react";function Ce(e,t,o){return e.reduce((a,r)=>{let n=t(r);if(typeof n=="undefined"||n===null)throw new Error("Objectify key selector returned undefined or null.");return a[t(r)]=o?o(r):r,a},{})}function V({apiHost:e,apiKey:t,projectId:o}){let[a,r]=et({loading:!1,notConfigured:!1,error:null,result:null});return Ze(()=>{if(!o||!t||!e){r({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{r({notConfigured:!1,loading:!0,error:null,result:null});try{let i=(await new Je({projectId:o,apiKey:t,apiHost:e}).get()).dimensions.map(d=>({...d,displayName:Qe(d)})),l={dimensions:i,dimIndex:Ce(i,d=>d.dim,d=>d)};r({notConfigured:!1,loading:!1,error:null,result:l})}catch(s){let i;s instanceof Xe?i=s.message:i=s.toString(),r({notConfigured:!1,loading:!1,error:i,result:null});return}})()},[e,t,o]),{result:a.result,error:a.error,loading:a.loading,notConfigured:a.notConfigured}}import{Fragment as he,jsx as E}from"@emotion/react/jsx-runtime";var L=nt(null),$n=({loadingComponent:e,errorComponent:t,contextConfig:o,children:a})=>{let r=z(o),n=V(o);return r.error||r.notConfigured?t?E(t,{contextConfig:o,result:r}):E(he,{children:"ErrorComponent is not configured"}):n.error||n.notConfigured?t?E(t,{contextConfig:o,result:n}):E(he,{children:"ErrorComponent is not configured"}):r.loading||n.loading?e?E(e,{}):E(tt,{}):E(L.Provider,{value:{manifest:r.result,dimensions:n.result,contextConfig:o},children:a})};function An(){let e=Y(L);if(!(e!=null&&e.contextConfig))throw new Error("Not within DataContext! Configuration data is not exist.");return e.contextConfig}function Un(){let e=Y(L);if(!(e!=null&&e.manifest))throw new Error("Not within DataContext! Manifest data is not exist.");return e.manifest}function Gn(){let e=Y(L);if(!(e!=null&&e.dimensions))throw new Error("Not within DataContext! Dimensions data is not exist.");return e.dimensions}import{InputComboBox as lt}from"@uniformdev/design-system";import{useState as mt}from"react";import{Icon as ot}from"@uniformdev/design-system";function X(e){return{label:e.displayName,value:e.dim,isDisabled:!1}}function $(e){if(!e)return"unavailable";let[t]=e.split(":");switch(t.toLowerCase()){case"signal":return"data";case"intent":return"assign";case"audience":return"boy";default:return"user-list"}}function A(e){let t=[],o="";for(let a of e){let[r]=a.displayName.split(":");o!==r&&(t.push({label:r,options:[]}),o=r),t[t.length-1].options.push(X(a))}return t}import{jsx as J,jsxs as rt}from"@emotion/react/jsx-runtime";var U=e=>{var r;let{data:t,getStyles:o,className:a}=e;return J("div",{css:{...o("groupHeading",e),textTransform:"none",fontSize:"var(--font-size-sm)"},className:a,children:rt("small",{css:{color:"var(--gray-500)",display:"flex",alignItems:"center",gap:"var(--spacing-xs)"},children:[J(ot,{icon:$((r=t.label)!=null?r:""),iconColor:"currentColor",size:16}),J("span",{children:t.label})]})})};import{css as it}from"@emotion/react";import{jsx as at}from"@emotion/react/jsx-runtime";function G({message:e}){return e?at("div",{css:it`
|
|
12
|
+
color: var(--brand-primary-2);
|
|
13
|
+
font-size: var(--fs-xs);
|
|
14
|
+
position: absolute;
|
|
15
|
+
bottom: calc((var(--spacing-base) * -1) + -2px);
|
|
16
|
+
`,children:e}):null}import{jsx as be}from"@emotion/react/jsx-runtime";var H=e=>{var p,m;let{data:t,getStyles:o,cx:a,isDisabled:r,isFocused:n,isSelected:s,className:i,innerRef:l,innerProps:d}=e,[,C]=(m=(p=t.label)==null?void 0:p.split(":"))!=null?m:[];return be("div",{css:o("option",e),className:a({option:!0,"option--is-disabled":r,"option--is-focused":n,"option--is-selected":s},i),ref:l,"aria-disabled":r,...d,children:be("div",{css:{color:"var(--gray-700)"},children:C!=null?C:t.label})})};import{Icon as st}from"@uniformdev/design-system";import{jsx as Q,jsxs as ve}from"@emotion/react/jsx-runtime";function ye({displayName:e}){let[t,o]=e.split(":");return ve("div",{css:{whiteSpace:"normal",overflow:"hidden"},children:[o?ve("small",{css:{color:"var(--gray-500)",display:"flex",alignItems:"center",gap:"var(--spacing-xs)"},children:[t?Q(st,{icon:$(t),iconColor:"currentColor",size:16}):null,Q("span",{"data-test-id":"dimension-name",children:t})]}):null,Q("div",{css:{color:"var(--gray-700)"},"data-test-id":"dimension-value",children:o!=null?o:t})]})}import{jsx as xe}from"@emotion/react/jsx-runtime";var W=e=>{let{data:t,getStyles:o}=e;return xe("div",{css:o("singleValue",e),children:xe(ye,{displayName:t.label})})};import{Fragment as Z,jsx as _,jsxs as B}from"@emotion/react/jsx-runtime";function De({onChange:e,criteriaMatch:t,dimensions:o,errorMessage:a,...r}){var d,C;let[n,s]=mt(typeof t.r!="undefined"&&q(t.r)!==null?t.r.toString(10):""),i=t.rDim,l=t.rDim?o.dimIndex[t.rDim]:void 0;return B(Z,{children:[_(lt,{...r,inputValue:n,menuShouldScrollIntoView:!0,value:{label:(d=l==null?void 0:l.displayName)!=null?d:i&&!l?`${t.rDim} (unknown)`:"",value:(C=t.rDim)!=null?C:t.r?t.r.toString(10):"",isDisabled:!1},options:[{label:"Enter a numeric score to match, or choose another dimension to match its score",value:"",isDisabled:!0},...A(o.dimensions)],styles:{...r.styles,valueContainer:(p,m)=>{var f,w;return{...p,padding:"var(--spacing-sm)",...(w=(f=r.styles)==null?void 0:f.valueContainer)==null?void 0:w.call(f,p,m)}},option:(p,m)=>{var f,w;return{fontSize:m.isDisabled?"0.8rem":void 0,...(w=(f=r.styles)==null?void 0:f.option)==null?void 0:w.call(f,p,m)}}},onChange:p=>{var m;p&&(e({...t,rDim:(m=p.value)==null?void 0:m.toString(),r:void 0}),s(""))},onInputChange:(p,m)=>{let f=q(p);m.action==="input-change"||m.action==="set-value"?(s(p),(f||p==="")&&e({...t,r:p||void 0,rDim:void 0})):!f&&!q(m.prevInputValue)&&(!p&&t.r?s(t.r.toString()):s(p))},components:{...r.components,Option:H,SingleValue:W,GroupHeading:U},noOptionsMessage:({inputValue:p})=>q(p)?B(Z,{children:[B("div",{children:["Score: ",p]}),_("small",{children:"If you want to match on another dimension\u2019s score instead, clear the score value to search for a dimension."})]}):B(Z,{children:[B("div",{children:["No dimensions match your search \u201C",p,"\u201D"]}),_("small",{children:"If you want to match a literal score, enter a numeric value."})]})}),_(G,{message:a})]})}function q(e){return/^\d+$/.test(e.toString(10))}import{InputComboBox as pt}from"@uniformdev/design-system";import{Fragment as ut,jsx as Ie,jsxs as ct}from"@emotion/react/jsx-runtime";function we({onChange:e,value:t,dimensions:o,errorMessage:a,...r}){return ct(ut,{children:[Ie(pt,{...r,value:t?X(t):void 0,options:A(o),styles:{...r.styles,valueContainer:(n,s)=>{var i,l;return{...n,padding:"var(--spacing-sm)",...(l=(i=r.styles)==null?void 0:i.valueContainer)==null?void 0:l.call(i,n,s)}}},onChange:n=>{n&&e(o.find(s=>s.dim===n.value))},components:{Option:H,SingleValue:W,GroupHeading:U,...r.components}}),Ie(G,{message:a})]})}import{Icon as gt}from"@uniformdev/design-system";import{CgChevronRight as Ct}from"react-icons/cg";import{css as dt}from"@emotion/react";var Re=dt`
|
|
2
17
|
display: flex;
|
|
3
18
|
align-items: center;
|
|
4
19
|
font-weight: var(--fw-bold);
|
|
@@ -9,7 +24,7 @@ import{jsx as c}from"@emotion/react";import*as h from"react";import{Icon as We}f
|
|
|
9
24
|
&:focus {
|
|
10
25
|
text-decoration-line: underline;
|
|
11
26
|
}
|
|
12
|
-
`;import{jsx as
|
|
27
|
+
`;import{jsx as ht,jsxs as bt}from"@emotion/react/jsx-runtime";var Me=({linkTo:e,name:t,linkText:o=`Edit ${t} Component`})=>bt("a",{css:Re,title:`Edit ${t} component definition`,rel:"noopener noreferrer",target:"_blank",href:e,children:[o,ht(gt,{icon:Ct,iconColor:"currentColor",size:"1.5rem"})]});import{css as re}from"@emotion/react";import{getEnrichmentVectorKey as te}from"@uniformdev/context";import{AddListButton as vt,Button as yt,Callout as ne,Icon as oe,Input as Oe,InputSelect as xt,LoadingIndicator as Dt}from"@uniformdev/design-system";import Ee from"immer";import{useMemo as Ve,useState as ee}from"react";import{CgCloseO as It,CgMathMinus as wt,CgMathPlus as Rt}from"react-icons/cg";import{Fragment as Pe,jsx as u,jsxs as M}from"@emotion/react/jsx-runtime";var Mt=re`
|
|
13
28
|
flex: 2;
|
|
14
29
|
display: flex;
|
|
15
30
|
width: 50%;
|
|
@@ -20,7 +35,7 @@ import{jsx as c}from"@emotion/react";import*as h from"react";import{Icon as We}f
|
|
|
20
35
|
&:focus {
|
|
21
36
|
text-decoration-line: underline;
|
|
22
37
|
}
|
|
23
|
-
`,
|
|
38
|
+
`,or=({value:e,setValue:t,contextConfig:o,displayTitle:a=!0})=>{let{loading:r,result:n,error:s}=V(o),i=Ve(()=>{if(n)return n.dimensions.filter(b=>b.category==="ENR")},[n]),l=Ve(()=>{if(!e)return i;if(i)return i.filter(b=>!e.some(I=>te(I.cat,I.key)===b.dim))},[i,e]),[d,C]=ee(""),[p,m]=ee(50),[f,w]=ee(!1),g=i==null?void 0:i.find(b=>b.dim===d),y=()=>{let[b,I]=d.split("_");R([...e!=null?e:[],{cat:b,key:I,str:p}]),C(""),m(50),w(!1)},R=b=>{let I=[];n?I=b.filter(S=>{let k=n.dimIndex[te(S.cat,S.key)];return Boolean(k)}):I=b;let T=I.length===0?null:I;t(T)};return s?u(ne,{type:"danger",children:s}):r||n===null?u(Dt,{}):M("fieldset",{className:"enrichment-tag",children:[a?u("div",{css:{display:"flex",justifyContent:"space-between",marginBottom:"var(--spacing-base)"},children:u("legend",{css:{fontSize:"var(--fs-md)",fontWeight:"var(--fw-bold)"},children:"Enrichment Tags"})}):null,i!=null&&i.length?!f&&!e?u(ne,{title:"No enrichment tags assigned.",type:"info",css:{marginBlock:"var(--spacing-base)"},children:M("p",{children:["Click"," ",u("a",{onClick:()=>w(!0),target:"_blank",rel:"noopener noreferrer",css:{textDecorationLine:"underline"},children:"here"})," ","to assign your first enrichment tag."]})}):M(Pe,{children:[n&&u(St,{list:e!=null?e:[],setList:R,dimIndex:n.dimIndex}),f&&l&&l.length>0?M("div",{className:"add-enrichment-tag",css:{display:"flex",flexWrap:"wrap",gap:"var(--spacing-lg)",marginTop:"var(--spacing-md)",alignItems:"center"},children:[u("div",{css:{flexGrow:1},children:u(xt,{name:"enrichment-type",label:"Enrichment Tag",showLabel:!0,value:d,options:[{label:"Select",value:""},...l.map(b=>({label:b.displayName,value:b.dim}))],onChange:b=>C(b.currentTarget.value)})}),u(Ot,{score:p,setValue:m,cap:g?g.cap:100,css:{flexBasis:"9rem"}}),u(yt,{buttonType:"tertiary",size:"xl",css:{marginBottom:"var(--spacing-xs)",height:"3.5rem",margin:0,alignSelf:"flex-end"},onClick:y,disabled:!d,children:"Add"})]}):null,M("div",{className:"enrichment-cta",style:{paddingTop:"10px",display:"flex",justifyContent:"space-between"},children:[!f&&l&&l.length>0&&e?u(vt,{className:"add-more",buttonText:"Add More",onButtonClick:()=>w(!0)}):u("a",{css:Mt,title:"none",href:"#"}),u(Me,{name:"Enrichments",linkText:"Manage Enrichments",linkTo:`${o.apiHost}/projects/${encodeURIComponent(o.projectId)}/personalization/enrichments`})]})]}):u(Et,{contextConfig:o})]})},Et=({contextConfig:e})=>u(ne,{title:"No enrichments found.",type:"caution",css:{marginBlock:"var(--spacing-base)"},children:M("p",{children:["Looks like you do not have any enrichment created in your connected Uniform project. Start by creating your first enrichment"," ",u("a",{href:`${e.apiHost}/projects/${encodeURIComponent(e.projectId)}/personalization/enrichments`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}},children:"here"}),"."]})}),Se=(e,t=100,o=0)=>Math.max(Math.min(e,t),o),Be=re`
|
|
24
39
|
position: absolute;
|
|
25
40
|
bottom: 0.875rem;
|
|
26
41
|
left: var(--spacing-sm);
|
|
@@ -32,28 +47,28 @@ import{jsx as c}from"@emotion/react";import*as h from"react";import{Icon as We}f
|
|
|
32
47
|
background-color: var(--gray-100);
|
|
33
48
|
border: 1px solid var(--gray-300);
|
|
34
49
|
border-radius: var(--rounded-full);
|
|
35
|
-
`,
|
|
36
|
-
${
|
|
50
|
+
`,Vt=re`
|
|
51
|
+
${Be}
|
|
37
52
|
left: auto;
|
|
38
53
|
right: var(--spacing-sm);
|
|
39
|
-
`,
|
|
54
|
+
`,Ot=({score:e,setValue:t,cap:o=100,...a})=>{let r=n=>{let s=n==="increment"?e+10:e-10;s<0&&(s=0),s>o&&(s=o),t(s)};return M("div",{css:{position:"relative"},...a,children:[u(Oe,{label:"Strength",id:"enrichment-score",type:"number",min:0,max:o,value:e,onChange:n=>t(Se(Number(n.currentTarget.value)||0,o)),css:{textAlign:"center",boxSizing:"border-box"}}),u("button",{type:"button",title:"Reduce enrichment count",onClick:()=>r("decrement"),disabled:e===0,className:"scoreCounterButton",css:Be,children:u(oe,{icon:wt,iconColor:"gray",size:"1.5rem"})}),u("button",{type:"button",title:"Increase enrichment count",onClick:()=>r("increment"),className:"scoreCounterButton",css:Vt,children:u(oe,{icon:Rt,iconColor:"gray",size:"1.5rem"})})]})},St=({list:e,setList:t,dimIndex:o})=>{let a=n=>{t(Ee(e,s=>{s.splice(n,1)}))},r=(n,s)=>{var l;let i=(l=o[`${e[n].cat}_${e[n].key}`])==null?void 0:l.cap;t(Ee(e,d=>{d[n].str=Se(Number(s)||0,i)}))};return u(Pe,{children:e.map((n,s)=>{let i=o[te(n.cat,n.key)];if(!!i)return M("div",{css:{display:"flex",alignItems:"center",gap:"var(--spacing-base)",backgroundColor:"var(--brand-secondary-2)",boxShadow:"var(--shadow-base)",borderRadius:"var(--rounded-base)",paddingInline:"var(--spacing-base)",marginBlock:"var(--spacing-base)"},className:"selected-enrichments",children:[u("span",{css:{fontWeight:"var(--fw-bold)",color:i?void 0:"var(--brand-secondary-5)"},children:i?i.displayName:`Enrichment '${n.cat}_${n.key}' is unknown`}),u("div",{css:{marginLeft:"auto",display:"flex",alignItems:"center",border:"0 solid var(--gray-400)",borderLeftWidth:"1px",borderRightWidth:"1px",padding:"var(--spacing-sm) var(--spacing-base)",flexBasis:"9rem"},children:u(Oe,{type:"text",min:0,max:i.cap||100,title:"score",value:n.str,css:{textAlign:"center",width:"100px"},onChange:l=>r(s,l.currentTarget.value)})}),u("button",{type:"button",title:"Delete enrichment",onClick:()=>a(s),css:{border:0},children:u(oe,{icon:It,iconColor:"red",size:"1.5rem"})})]},`${n.cat}-${n.key}`)})})};import{Callout as Ae,LoadingIndicator as $t}from"@uniformdev/design-system";import{useState as At}from"react";import{useAsync as Ut}from"react-use";import*as D from"yup";function sr(e){return Array.isArray(e)&&e.length>0&&e[0].cat!==void 0}function lr(e){return e.crit!==void 0}function ie(e){return e!=="+"&&e!=="-"}import{css as Pt}from"@emotion/react";import{AddListButton as Tt,Callout as ze,Icon as kt,InputInlineSelect as Nt,Paragraph as zt}from"@uniformdev/design-system";import Le from"immer";import{CgCloseO as Lt}from"react-icons/cg";import{css as O}from"@emotion/react";var ae="6rem",Te=O`
|
|
40
55
|
position: relative;
|
|
41
56
|
padding: var(--spacing-md) var(--spacing-base);
|
|
42
57
|
border: 1px solid var(--gray-300);
|
|
43
58
|
box-shadow: var(--shadow-base);
|
|
44
59
|
background-color: white;
|
|
45
60
|
border-radius: var(--rounded-base);
|
|
46
|
-
margin-top: ${
|
|
61
|
+
margin-top: ${ae};
|
|
47
62
|
display: flex;
|
|
48
63
|
|
|
49
64
|
&:before {
|
|
50
65
|
content: '';
|
|
51
66
|
display: block;
|
|
52
67
|
width: 1px;
|
|
53
|
-
height: ${
|
|
68
|
+
height: ${ae};
|
|
54
69
|
background-color: var(--gray-300);
|
|
55
70
|
position: absolute;
|
|
56
|
-
top: -${
|
|
71
|
+
top: -${ae};
|
|
57
72
|
left: var(--spacing-lg);
|
|
58
73
|
}
|
|
59
74
|
|
|
@@ -63,42 +78,27 @@ import{jsx as c}from"@emotion/react";import*as h from"react";import{Icon as We}f
|
|
|
63
78
|
display: none;
|
|
64
79
|
}
|
|
65
80
|
}
|
|
66
|
-
`,
|
|
81
|
+
`,ke=O`
|
|
67
82
|
display: flex;
|
|
68
83
|
gap: var(--spacing-base);
|
|
69
84
|
flex-grow: 1;
|
|
70
85
|
flex-wrap: wrap;
|
|
71
86
|
margin-right: var(--spacing-base);
|
|
72
|
-
`,
|
|
87
|
+
`,F=O`
|
|
73
88
|
width: 100%;
|
|
74
89
|
display: flex;
|
|
75
90
|
align-items: stretch;
|
|
76
91
|
position: relative;
|
|
77
|
-
`,
|
|
92
|
+
`,se=O`
|
|
78
93
|
flex: 2;
|
|
79
94
|
height: 52px;
|
|
80
95
|
min-width: 200px;
|
|
81
|
-
`,
|
|
96
|
+
`,Ne=O`
|
|
82
97
|
flex: 1;
|
|
83
98
|
min-width: 80px;
|
|
84
|
-
`,
|
|
99
|
+
`,j=O`
|
|
85
100
|
height: 100%;
|
|
86
101
|
width: 100%;
|
|
87
|
-
`;import{
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
border-radius: var(--rounded-full);
|
|
91
|
-
color: var(--white);
|
|
92
|
-
display: flex;
|
|
93
|
-
width: 30px;
|
|
94
|
-
height: 30px;
|
|
95
|
-
justify-content: center;
|
|
96
|
-
font-size: var(--fs-base);
|
|
97
|
-
`,children:e})}import{jsx as te,jsxs as dt}from"@emotion/react/jsx-runtime";var Ie=e=>{var l,d;let{data:t,getStyles:o,isDisabled:a,innerRef:r,innerProps:n}=e,[s,i]=(d=(l=t.label)==null?void 0:l.split(":"))!=null?d:[];return dt("div",{css:{...o("option",e),display:"flex",alignItems:"center",gap:"var(--spacing-sm)"},ref:r,"aria-disabled":a,...n,children:[i?te(L,{op:s}):te("div",{css:{width:"20px",height:"20px"}}),te("div",{children:i!=null?i:s})]})};import{jsx as we}from"@emotion/react/jsx-runtime";var Re=e=>{let{data:t,getStyles:o}=e;return we("div",{css:{...o("singleValue",e),width:"max-content"},children:t.label.length===1?we(L,{op:t.label}):t.label})};import{jsx as gt}from"@emotion/react/jsx-runtime";var Me=[{name:"=",description:"equals",value:"="},{name:"\u2260",description:"not equal",value:"!="},{name:">",description:"is greater than",value:">"},{name:"\u2265",description:"is greater than or equal to",value:">="},{name:"<",description:"is less than",value:"<"},{name:"\u2264",description:"is less than or equal to",value:"<="},{name:"has the strongest score",value:"+"},{name:"has the weakest score",value:"-"}];function Ee({onChange:e,value:t,...o}){var a,r;return gt(ft,{...o,value:{label:(r=(a=Me.find(n=>n.value===t))==null?void 0:a.name)!=null?r:t,value:t},options:Me.map(n=>({label:n.description?`${n.name}:${n.description}`:n.name,value:n.value})),styles:{...o.styles,valueContainer:(n,s)=>{var i,l;return{...n,padding:"var(--spacing-sm)",...(l=(i=o.styles)==null?void 0:i.valueContainer)==null?void 0:l.call(i,n,s)}},menu:(n,s)=>{var i,l;return{...n,width:"max-content",...(l=(i=o.styles)==null?void 0:i.menu)==null?void 0:l.call(i,n,s)}},control:(n,s)=>{var i,l;return{...n,border:0,...(l=(i=o.styles)==null?void 0:i.control)==null?void 0:l.call(i,n,s)}},indicatorSeparator:(n,s)=>{var i,l;return{...n,display:"none",...(l=(i=o.styles)==null?void 0:i.indicatorSeparator)==null?void 0:l.call(i,n,s)}}},onChange:n=>{n&&e(n.value)},components:{SingleValue:Re,Option:Ie,...o.components}})}import{InputComboBox as xt}from"@uniformdev/design-system";import{Icon as Ct}from"@uniformdev/design-system";function ne(e){return{label:e.displayName,value:e.dim,isDisabled:!1}}function $(e){if(!e)return"unavailable";let[t]=e.split(":");switch(t.toLowerCase()){case"signal":return"data";case"intent":return"assign";case"audience":return"boy";default:return"user-list"}}function A(e){let t=[],o="";for(let a of e){let[r]=a.displayName.split(":");o!==r&&(t.push({label:r,options:[]}),o=r),t[t.length-1].options.push(ne(a))}return t}import{jsx as oe,jsxs as ht}from"@emotion/react/jsx-runtime";var U=e=>{var r;let{data:t,getStyles:o,className:a}=e;return oe("div",{css:{...o("groupHeading",e),textTransform:"none",fontSize:"var(--font-size-sm)"},className:a,children:ht("small",{css:{color:"var(--gray-500)",display:"flex",alignItems:"center",gap:"var(--spacing-xs)"},children:[oe(Ct,{icon:$((r=t.label)!=null?r:""),iconColor:"currentColor",size:16}),oe("span",{children:t.label})]})})};import{css as bt}from"@emotion/react";import{jsx as vt}from"@emotion/react/jsx-runtime";function G({message:e}){return e?vt("div",{css:bt`
|
|
98
|
-
color: var(--brand-primary-2);
|
|
99
|
-
font-size: var(--fs-xs);
|
|
100
|
-
position: absolute;
|
|
101
|
-
bottom: calc((var(--spacing-base) * -1) + -2px);
|
|
102
|
-
`,children:e}):null}import{jsx as Ve}from"@emotion/react/jsx-runtime";var H=e=>{var p,m;let{data:t,getStyles:o,cx:a,isDisabled:r,isFocused:n,isSelected:s,className:i,innerRef:l,innerProps:d}=e,[,C]=(m=(p=t.label)==null?void 0:p.split(":"))!=null?m:[];return Ve("div",{css:o("option",e),className:a({option:!0,"option--is-disabled":r,"option--is-focused":n,"option--is-selected":s},i),ref:l,"aria-disabled":r,...d,children:Ve("div",{css:{color:"var(--gray-700)"},children:C!=null?C:t.label})})};import{Icon as yt}from"@uniformdev/design-system";import{jsx as re,jsxs as Oe}from"@emotion/react/jsx-runtime";function Se({displayName:e}){let[t,o]=e.split(":");return Oe("div",{css:{whiteSpace:"normal",overflow:"hidden"},children:[o?Oe("small",{css:{color:"var(--gray-500)",display:"flex",alignItems:"center",gap:"var(--spacing-xs)"},children:[t?re(yt,{icon:$(t),iconColor:"currentColor",size:16}):null,re("span",{"data-test-id":"dimension-name",children:t})]}):null,re("div",{css:{color:"var(--gray-700)"},"data-test-id":"dimension-value",children:o!=null?o:t})]})}import{jsx as Be}from"@emotion/react/jsx-runtime";var W=e=>{let{data:t,getStyles:o}=e;return Be("div",{css:o("singleValue",e),children:Be(Se,{displayName:t.label})})};import{Fragment as Dt,jsx as Pe,jsxs as It}from"@emotion/react/jsx-runtime";function Te({onChange:e,value:t,dimensions:o,errorMessage:a,...r}){return It(Dt,{children:[Pe(xt,{...r,value:t?ne(t):void 0,options:A(o),styles:{...r.styles,valueContainer:(n,s)=>{var i,l;return{...n,padding:"var(--spacing-sm)",...(l=(i=r.styles)==null?void 0:i.valueContainer)==null?void 0:l.call(i,n,s)}}},onChange:n=>{n&&e(o.find(s=>s.dim===n.value))},components:{Option:H,SingleValue:W,GroupHeading:U,...r.components}}),Pe(G,{message:a})]})}import{InputComboBox as wt}from"@uniformdev/design-system";import{useState as Rt}from"react";import{Fragment as ie,jsx as _,jsxs as B}from"@emotion/react/jsx-runtime";function ke({onChange:e,criteriaMatch:t,dimensions:o,errorMessage:a,...r}){var d,C;let[n,s]=Rt(typeof t.r!="undefined"&&q(t.r)!==null?t.r.toString(10):""),i=t.rDim,l=t.rDim?o.dimIndex[t.rDim]:void 0;return B(ie,{children:[_(wt,{...r,inputValue:n,menuShouldScrollIntoView:!0,value:{label:(d=l==null?void 0:l.displayName)!=null?d:i&&!l?`${t.rDim} (unknown)`:"",value:(C=t.rDim)!=null?C:t.r?t.r.toString(10):"",isDisabled:!1},options:[{label:"Enter a numeric score to match, or choose another dimension to match its score",value:"",isDisabled:!0},...A(o.dimensions)],styles:{...r.styles,valueContainer:(p,m)=>{var f,w;return{...p,padding:"var(--spacing-sm)",...(w=(f=r.styles)==null?void 0:f.valueContainer)==null?void 0:w.call(f,p,m)}},option:(p,m)=>{var f,w;return{fontSize:m.isDisabled?"0.8rem":void 0,...(w=(f=r.styles)==null?void 0:f.option)==null?void 0:w.call(f,p,m)}}},onChange:p=>{var m;p&&(e({...t,rDim:(m=p.value)==null?void 0:m.toString(),r:void 0}),s(""))},onInputChange:(p,m)=>{let f=q(p);m.action==="input-change"||m.action==="set-value"?(s(p),(f||p==="")&&e({...t,r:p||void 0,rDim:void 0})):!f&&!q(m.prevInputValue)&&(!p&&t.r?s(t.r.toString()):s(p))},components:{...r.components,Option:H,SingleValue:W,GroupHeading:U},noOptionsMessage:({inputValue:p})=>q(p)?B(ie,{children:[B("div",{children:["Score: ",p]}),_("small",{children:"If you want to match on another dimension\u2019s score instead, clear the score value to search for a dimension."})]}):B(ie,{children:[B("div",{children:["No dimensions match your search \u201C",p,"\u201D"]}),_("small",{children:"If you want to match a literal score, enter a numeric value."})]})}),_(G,{message:a})]})}function q(e){return/^\d+$/.test(e.toString(10))}import{jsx as v,jsxs as ae}from"@emotion/react/jsx-runtime";var Le=({value:e,setValue:t,dimensions:o,onMenuOpen:a,onMenuClose:r,onAddCriteria:n,onRemoveCriteria:s,displayTitle:i=!0,components:l,errors:d={}})=>{let C=e||{crit:[]},p=g=>{t({...C,op:g==="&"?void 0:g})},m=()=>{let g={...C,crit:[...C.crit,{l:"",op:">",r:0}]};t(g),n==null||n(g)},f=(g,y)=>{t(ze(C,R=>{R.crit[y]=g}))},w=g=>{let y=ze(C,b=>{b.crit.splice(g,1)}),R=y.crit.length===0?null:y;t(R),s==null||s(R)};return ae("fieldset",{className:"personalization-criteria",children:[i?l!=null&&l.Title?v(l.Title,{}):v("legend",{css:{fontSize:"var(--fs-md)",fontWeight:"var(--fw-bold)"},children:"Personalize This"}):null,l!=null&&l.CustomVariantName?v(l.CustomVariantName,{}):null,C.crit.length?v("div",{children:C.crit.map((g,y)=>{var I,T,S,k;let R=((I=g.l)==null?void 0:I.length)>0,b=g.op!=="+"&&g.op!=="-";return ae("div",{css:ye,"data-test-id":"criteria-container",children:[ae("div",{css:Mt`
|
|
103
|
-
${xe}/* grid-template-columns: minmax(0, 1fr) ${b?"minmax(0, 79px) minmax(0, 1fr)":"minmax(0, 1fr)"} */
|
|
104
|
-
`,className:"criteriaItemInner",children:[v("div",{css:[N,ee],className:"criteria-wrapper","data-test-id":"select-criteria",children:v(Te,{errorMessage:(T=d.lhs)==null?void 0:T[y],css:z,styles:{control:x=>({...x,height:"100%"})},dimensions:o.dimensions,onChange:x=>{f({...g,l:x.dim},y)},value:o.dimIndex[g.l],onMenuOpen:a,onMenuClose:r})}),v("div",{css:[N,De],className:"criteria-wrapper","data-test-id":"select-operator",children:v(Ee,{name:`op-${y}`,css:z,styles:{control:x=>({...x,height:"100%"})},value:g.op,onChange:x=>{f(x==="+"||x==="-"?{...g,op:x,r:void 0,rDim:void 0}:{...g,op:x},y)},onMenuOpen:a,onMenuClose:r})}),b?v("div",{css:[N,ee],className:"criteria-wrapper","data-test-id":"select-match-criteria",children:v(ke,{errorMessage:(S=d.rhs)==null?void 0:S[y],css:z,styles:{control:x=>({...x,height:"100%"})},criteriaMatch:g,onChange:x=>{f(x,y)},isDisabled:!R,dimensions:o,onMenuOpen:a,onMenuClose:r})}):null]}),v("button",{type:"button",onClick:()=>w(y),title:"Delete Personalization",css:{backgroundColor:"transparent",backgroundImage:"none",borderWidth:0},"data-test-id":"button-delete",children:v(Vt,{icon:Bt,iconColor:"red",size:"1.5rem"})}),y>0?v("div",{className:"criteria-group-operation",css:{position:"absolute",top:"-4rem",transform:"translateX(calc(1.5rem - 50%))"},children:v(Et,{"data-test-id":"dropdown-button-combine",disabled:y>1,value:(k=C.op)!=null?k:"&",options:[{label:"AND",value:"&"},{label:"OR",value:"|"}],onChange:x=>{p(x.value)}})}):null]},y)})}):v(Ne,{title:"Default variant",type:"info",css:{marginBlock:"var(--spacing-base)"},children:v(St,{children:'This personalized variant has no match criteria and will be shown to any visitor that does not match any preceding variants. Ensure that default variants come last in the variant list. Personalize this variant by clicking "Add Criteria" to get started.'})}),o.dimensions.length===0?l!=null&&l.NoDimensionsDefined?v(l.NoDimensionsDefined,{}):v(Ne,{title:"Dimensions",type:"info",css:{marginBlock:"var(--spacing-base)"},children:v("p",{children:"You do not have any dimensions configured."})}):v(Ot,{"data-test-id":"button-add-criteria",className:"add-more",buttonText:"Add Criteria",onButtonClick:m})]})};import*as D from"yup";import{useAsync as kt}from"react-use";function Qo(e){return Array.isArray(e)&&e.length>0&&e[0].cat!==void 0}function Zo(e){return e.crit!==void 0}function se(e){return e!=="+"&&e!=="-"}import{jsx as P,jsxs as zt}from"@emotion/react/jsx-runtime";function Nt(e){let t={crit:[]};return e.forEach(o=>{if(!o.path)return;let a=/\[(\d+)\]\.(\w+)/g,r=[...o.path.matchAll(a)][0];if((r==null?void 0:r.length)==3){let n=Number(r[1]),s=r[2];if(t.crit.length>n)t.crit[n]={...t.crit[n],[s]:o.message};else{let i={};i[s]=o.message,t.crit.push(i)}}}),t}async function le(e,t){let o=D.object().shape({l:D.string().required("Please select a dimension").oneOf(t==null?void 0:t.dimensions.map(a=>a.dim),"Select a criteria"),op:D.string().required(),r:D.mixed().nullable().when(["rDim","op"],{is:(a,r)=>se(r)&&!a,then:D.string().required("Choose a score or dimension")}),rDim:D.string().oneOf(t==null?void 0:t.dimensions.map(a=>a.dim),"Select a criteria").when(["r","op"],{is:(a,r)=>se(r)&&!a,then:D.string().required("Choose a score or dimension")})},["rDim","r"]);try{await D.object({crit:D.array(o)}).nullable().validate(e,{abortEarly:!1})}catch(a){return Nt(a.inner)}}var pr=({contextConfig:e,value:t,setValue:o,...a})=>{var C,p;let[r,n]=Pt(void 0),{loading:s,result:i,error:l}=V(e);return kt(async()=>{if(t&&i){let m=await le(t,i);n(m)}},[t,i,le]),l?P($e,{type:"danger",children:l}):s||i===null?P(Tt,{}):P(Le,{...a,value:t,setValue:async m=>{let f=await le(m,i);n(f),o(m)},errors:{lhs:(C=r==null?void 0:r.crit)==null?void 0:C.map(m=>m==null?void 0:m.l),rhs:(p=r==null?void 0:r.crit)==null?void 0:p.map(m=>m==null?void 0:m.rDim)},dimensions:i,components:{NoDimensionsDefined:()=>P($e,{title:"Dimensions",type:"info",css:{marginBlock:"var(--spacing-base)"},children:zt("p",{children:["You do not have any dimensions configured. Create your first"," ",P("a",{href:`${e.apiHost}/projects/${encodeURIComponent(e.projectId)}/personalization/signals`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}},children:"Dimension"})]})})}})};import{useEffect as Lt,useState as $t}from"react";import{ApiClientError as At,CachedManifestClient as Ut}from"@uniformdev/context/api";function F({apiHost:e,apiKey:t,projectId:o}){let[a,r]=$t({loading:!1,notConfigured:!1,error:null,result:null});return Lt(()=>{if(!o||!t||!e){r({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{r({notConfigured:!1,loading:!0,error:null,result:null});try{let i=await new Ut({projectId:o,apiKey:t,apiHost:e}).get({preview:!0});r({notConfigured:!1,loading:!1,error:null,result:i})}catch(s){let i;s instanceof At?(s.statusCode===403&&(i=`The API key ${t} did not have permissions to fetch the manifest. Ensure Context > Read Drafts permissions are granted.`),i=s.message):i=s.toString(),r({notConfigured:!1,loading:!1,error:i,result:null});return}})()},[e,t,o]),{result:a.result,error:a.error,loading:a.loading,notConfigured:a.notConfigured}}import{LoadingIndicator as Gt}from"@uniformdev/design-system";import{Fragment as Ht,jsx as me}from"@emotion/react/jsx-runtime";function xr({children:e,versionMap:t,contextConfig:o}){let{loading:a,result:r}=F(o);if(a)return me(Gt,{});if(r){let n=t[r.project.ui_version];if(n)return me(n,{})}return me(Ht,{children:e})}import{createContext as Wt,useContext as pe}from"react";import{LoadingIndicator as qt}from"@uniformdev/design-system";import{Fragment as Ae,jsx as E}from"@emotion/react/jsx-runtime";var j=Wt(null),Tr=({loadingComponent:e,errorComponent:t,contextConfig:o,children:a})=>{let r=F(o),n=V(o);return r.error||r.notConfigured?t?E(t,{contextConfig:o,result:r}):E(Ae,{children:"ErrorComponent is not configured"}):n.error||n.notConfigured?t?E(t,{contextConfig:o,result:n}):E(Ae,{children:"ErrorComponent is not configured"}):r.loading||n.loading?e?E(e,{}):E(qt,{}):E(j.Provider,{value:{manifest:r.result,dimensions:n.result,contextConfig:o},children:a})};function kr(){let e=pe(j);if(!(e!=null&&e.contextConfig))throw new Error("Not within DataContext! Configuration data is not exist.");return e.contextConfig}function Nr(){let e=pe(j);if(!(e!=null&&e.manifest))throw new Error("Not within DataContext! Manifest data is not exist.");return e.manifest}function zr(){let e=pe(j);if(!(e!=null&&e.dimensions))throw new Error("Not within DataContext! Dimensions data is not exist.");return e.dimensions}import{validate as _t}from"uuid";import{UncachedManifestClient as Ft}from"@uniformdev/context/api";var Ue=async e=>{if(!e)return{valid:!1,error:new Error("contextConfig was not defined.")};if(!e.apiHost)return{valid:!1,error:new Error("apiHost was not defined.")};if(!e.apiKey)return{valid:!1,error:new Error("apiKey was not defined.")};if(!_t(e.apiKey)&&!e.projectId)return{valid:!1,error:new Error("projectId is required when using a modern API key.")};let t=new Ft({projectId:e.projectId,apiKey:e.apiKey,apiHost:e.apiHost});try{return{valid:!0,result:await t.get({preview:!0})}}catch(o){return{valid:!1,error:o}}};import{useEffect as jt,useState as Kt}from"react";var jr=e=>{let[t,o]=Kt({validating:!1,error:void 0}),{apiKey:a,apiHost:r,projectId:n}=e||{};return jt(()=>{if(!a||!r)return;(async()=>{o({validating:!0,error:void 0});let{error:i,result:l}=await Ue({apiHost:r,apiKey:a,projectId:n});o(i?{error:i,validating:!1}:{error:void 0,validating:!1,result:l})})()},[r,a,n]),{validating:t.validating,error:t.error,result:t.result}};export*from"@uniformdev/design-system";export{Tr as ContextData,ke as CriteriaMatchMenu,Ee as CriteriaOperatorMenu,Te as DimensionMenu,Se as DimensionValue,ce as EditLink,Dn as EnrichmentTag,pr as PersonalizationCriteria,Le as PersonalizationCriteriaStatic,xr as ProjectUIVersion,it as addEnrichmentLink,Me as contextCriteriaMenuOperators,Nt as convertErrorsToObj,Qo as isEnrichmentTagData,Zo as isPersonalizationCriteriaData,se as opHasRhs,kr as useContextConfig,F as useContextData,V as useDimensions,zr as useDimensionsDataContext,Nr as useManifest,jr as useValidateContextConfig,Ue as validateContextConfig};
|
|
102
|
+
`;import{jsx as v,jsxs as le}from"@emotion/react/jsx-runtime";var $e=({value:e,setValue:t,dimensions:o,onMenuOpen:a,onMenuClose:r,onAddCriteria:n,onRemoveCriteria:s,displayTitle:i=!0,components:l,errors:d={}})=>{let C=e||{crit:[]},p=g=>{t({...C,op:g==="&"?void 0:g})},m=()=>{let g={...C,crit:[...C.crit,{l:"",op:">",r:0}]};t(g),n==null||n(g)},f=(g,y)=>{t(Le(C,R=>{R.crit[y]=g}))},w=g=>{let y=Le(C,b=>{b.crit.splice(g,1)}),R=y.crit.length===0?null:y;t(R),s==null||s(R)};return le("fieldset",{className:"personalization-criteria",children:[i?l!=null&&l.Title?v(l.Title,{}):v("legend",{css:{fontSize:"var(--fs-md)",fontWeight:"var(--fw-bold)"},children:"Personalize This"}):null,l!=null&&l.CustomVariantName?v(l.CustomVariantName,{}):null,C.crit.length?v("div",{children:C.crit.map((g,y)=>{var I,T,S,k;let R=((I=g.l)==null?void 0:I.length)>0,b=g.op!=="+"&&g.op!=="-";return le("div",{css:Te,"data-test-id":"criteria-container",children:[le("div",{css:Pt`
|
|
103
|
+
${ke}/* grid-template-columns: minmax(0, 1fr) ${b?"minmax(0, 79px) minmax(0, 1fr)":"minmax(0, 1fr)"} */
|
|
104
|
+
`,className:"criteriaItemInner",children:[v("div",{css:[F,se],className:"criteria-wrapper","data-test-id":"select-criteria",children:v(we,{errorMessage:(T=d.lhs)==null?void 0:T[y],css:j,styles:{control:x=>({...x,height:"100%"})},dimensions:o.dimensions,onChange:x=>{f({...g,l:x.dim},y)},value:o.dimIndex[g.l],onMenuOpen:a,onMenuClose:r})}),v("div",{css:[F,Ne],className:"criteria-wrapper","data-test-id":"select-operator",children:v(ge,{name:`op-${y}`,css:j,styles:{control:x=>({...x,height:"100%"})},value:g.op,onChange:x=>{f(x==="+"||x==="-"?{...g,op:x,r:void 0,rDim:void 0}:{...g,op:x},y)},onMenuOpen:a,onMenuClose:r})}),b?v("div",{css:[F,se],className:"criteria-wrapper","data-test-id":"select-match-criteria",children:v(De,{errorMessage:(S=d.rhs)==null?void 0:S[y],css:j,styles:{control:x=>({...x,height:"100%"})},criteriaMatch:g,onChange:x=>{f(x,y)},isDisabled:!R,dimensions:o,onMenuOpen:a,onMenuClose:r})}):null]}),v("button",{type:"button",onClick:()=>w(y),title:"Delete Personalization",css:{backgroundColor:"transparent",backgroundImage:"none",borderWidth:0},"data-test-id":"button-delete",children:v(kt,{icon:Lt,iconColor:"red",size:"1.5rem"})}),y>0?v("div",{className:"criteria-group-operation",css:{position:"absolute",top:"-4rem",transform:"translateX(calc(1.5rem - 50%))"},children:v(Nt,{"data-test-id":"dropdown-button-combine",disabled:y>1,value:(k=C.op)!=null?k:"&",options:[{label:"AND",value:"&"},{label:"OR",value:"|"}],onChange:x=>{p(x.value)}})}):null]},y)})}):v(ze,{title:"Default variant",type:"info",css:{marginBlock:"var(--spacing-base)"},children:v(zt,{children:'This personalized variant has no match criteria and will be shown to any visitor that does not match any preceding variants. Ensure that default variants come last in the variant list. Personalize this variant by clicking "Add Criteria" to get started.'})}),o.dimensions.length===0?l!=null&&l.NoDimensionsDefined?v(l.NoDimensionsDefined,{}):v(ze,{title:"Dimensions",type:"info",css:{marginBlock:"var(--spacing-base)"},children:v("p",{children:"You do not have any dimensions configured."})}):v(Tt,{"data-test-id":"button-add-criteria",className:"add-more",buttonText:"Add Criteria",onButtonClick:m})]})};import{jsx as P,jsxs as Ht}from"@emotion/react/jsx-runtime";function Gt(e){let t={crit:[]};return e.forEach(o=>{if(!o.path)return;let a=/\[(\d+)\]\.(\w+)/g,r=[...o.path.matchAll(a)][0];if((r==null?void 0:r.length)==3){let n=Number(r[1]),s=r[2];if(t.crit.length>n)t.crit[n]={...t.crit[n],[s]:o.message};else{let i={};i[s]=o.message,t.crit.push(i)}}}),t}async function me(e,t){let o=D.object().shape({l:D.string().required("Please select a dimension").oneOf(t==null?void 0:t.dimensions.map(a=>a.dim),"Select a criteria"),op:D.string().required(),r:D.mixed().nullable().when(["rDim","op"],{is:(a,r)=>ie(r)&&!a,then:D.string().required("Choose a score or dimension")}),rDim:D.string().oneOf(t==null?void 0:t.dimensions.map(a=>a.dim),"Select a criteria").when(["r","op"],{is:(a,r)=>ie(r)&&!a,then:D.string().required("Choose a score or dimension")})},["rDim","r"]);try{await D.object({crit:D.array(o)}).nullable().validate(e,{abortEarly:!1})}catch(a){return Gt(a.inner)}}var Sr=({contextConfig:e,value:t,setValue:o,...a})=>{var C,p;let[r,n]=At(void 0),{loading:s,result:i,error:l}=V(e);return Ut(async()=>{if(t&&i){let m=await me(t,i);n(m)}},[t,i,me]),l?P(Ae,{type:"danger",children:l}):s||i===null?P($t,{}):P($e,{...a,value:t,setValue:async m=>{let f=await me(m,i);n(f),o(m)},errors:{lhs:(C=r==null?void 0:r.crit)==null?void 0:C.map(m=>m==null?void 0:m.l),rhs:(p=r==null?void 0:r.crit)==null?void 0:p.map(m=>m==null?void 0:m.rDim)},dimensions:i,components:{NoDimensionsDefined:()=>P(Ae,{title:"Dimensions",type:"info",css:{marginBlock:"var(--spacing-base)"},children:Ht("p",{children:["You do not have any dimensions configured. Create your first"," ",P("a",{href:`${e.apiHost}/projects/${encodeURIComponent(e.projectId)}/personalization/signals`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}},children:"Dimension"})]})})}})};import{LoadingIndicator as Wt}from"@uniformdev/design-system";import{Fragment as qt,jsx as pe}from"@emotion/react/jsx-runtime";function zr({children:e,versionMap:t,contextConfig:o}){let{loading:a,result:r}=z(o);if(a)return pe(Wt,{});if(r){let n=t[r.project.ui_version];if(n)return pe(n,{})}return pe(qt,{children:e})}import{useEffect as jt,useState as Kt}from"react";import{UncachedManifestClient as _t}from"@uniformdev/context/api";import{validate as Ft}from"uuid";var Ue=async e=>{if(!e)return{valid:!1,error:new Error("contextConfig was not defined.")};if(!e.apiHost)return{valid:!1,error:new Error("apiHost was not defined.")};if(!e.apiKey)return{valid:!1,error:new Error("apiKey was not defined.")};if(!Ft(e.apiKey)&&!e.projectId)return{valid:!1,error:new Error("projectId is required when using a modern API key.")};let t=new _t({projectId:e.projectId,apiKey:e.apiKey,apiHost:e.apiHost});try{return{valid:!0,result:await t.get({preview:!0})}}catch(o){return{valid:!1,error:o}}};var jr=e=>{let[t,o]=Kt({validating:!1,error:void 0}),{apiKey:a,apiHost:r,projectId:n}=e||{};return jt(()=>{if(!a||!r)return;(async()=>{o({validating:!0,error:void 0});let{error:i,result:l}=await Ue({apiHost:r,apiKey:a,projectId:n});o(i?{error:i,validating:!1}:{error:void 0,validating:!1,result:l})})()},[r,a,n]),{validating:t.validating,error:t.error,result:t.result}};export*from"@uniformdev/design-system";export{$n as ContextData,De as CriteriaMatchMenu,ge as CriteriaOperatorMenu,we as DimensionMenu,ye as DimensionValue,Me as EditLink,or as EnrichmentTag,Sr as PersonalizationCriteria,$e as PersonalizationCriteriaStatic,zr as ProjectUIVersion,Mt as addEnrichmentLink,fe as contextCriteriaMenuOperators,Gt as convertErrorsToObj,sr as isEnrichmentTagData,lr as isPersonalizationCriteriaData,ie as opHasRhs,An as useContextConfig,z as useContextData,V as useDimensions,Gn as useDimensionsDataContext,Un as useManifest,jr as useValidateContextConfig,Ue as validateContextConfig};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uniformdev/context-ui",
|
|
3
|
-
"version": "17.5.1-alpha.
|
|
3
|
+
"version": "17.5.1-alpha.130+3fac779b1",
|
|
4
4
|
"description": "React-based functionality and components for Uniform Context",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -31,8 +31,8 @@
|
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
33
|
"@emotion/react": "11.10.5",
|
|
34
|
-
"@uniformdev/context": "^17.5.1-alpha.
|
|
35
|
-
"@uniformdev/design-system": "^17.5.1-alpha.
|
|
34
|
+
"@uniformdev/context": "^17.5.1-alpha.130+3fac779b1",
|
|
35
|
+
"@uniformdev/design-system": "^17.5.1-alpha.130+3fac779b1",
|
|
36
36
|
"immer": "9.0.16",
|
|
37
37
|
"react-beautiful-dnd": "13.1.1",
|
|
38
38
|
"react-icons": "^4.3.1",
|
|
@@ -74,5 +74,5 @@
|
|
|
74
74
|
"publishConfig": {
|
|
75
75
|
"access": "public"
|
|
76
76
|
},
|
|
77
|
-
"gitHead": "
|
|
77
|
+
"gitHead": "3fac779b1b42a1afeb05156cb51768a98573438f"
|
|
78
78
|
}
|