+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/sap-commerce-cloud/coverage/src/AppConfig/AppConfig.tsx.html b/apps/sap-commerce-cloud/coverage/src/AppConfig/AppConfig.tsx.html
new file mode 100644
index 0000000000..9f11aace09
--- /dev/null
+++ b/apps/sap-commerce-cloud/coverage/src/AppConfig/AppConfig.tsx.html
@@ -0,0 +1,733 @@
+
+
+
+
+
+
+
+
+ All files / src/AppConfig AppConfig.styles.ts
+
+
+
+
+ 100%
+ Statements
+ 45/45
+
+
+
+
+ 100%
+ Branches
+ 1/1
+
+
+
+
+ 100%
+ Functions
+ 1/1
+
+
+
+
+ 100%
+ Lines
+ 45/45
+
+
+
+ + Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +
+ Filter:
+
+
+
+ | 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 | 1x +1x + +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +2x +2x +2x +2x +2x +2x +2x +2x +2x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + | import { css } from 'emotion';
+import tokens from '@contentful/f36-tokens';
+
+export const styles = {
+ body: css({
+ height: 'auto',
+ minHeight: '65vh',
+ margin: '0 auto',
+ marginTop: tokens.spacingXl,
+ padding: `${tokens.spacingXl} ${tokens.spacing2Xl}`,
+ maxWidth: tokens.contentWidthText,
+ backgroundColor: tokens.colorWhite,
+ zIndex: 2,
+ boxShadow: '0px 0px 20px rgba(0, 0, 0, 0.1)',
+ borderRadius: '2px',
+ }),
+ background: (color: string) =>
+ css({
+ display: 'block',
+ position: 'absolute',
+ zIndex: -1,
+ top: 0,
+ width: '100%',
+ height: '300px',
+ backgroundColor: color,
+ }),
+ section: css({
+ margin: `${tokens.spacingXl} 0`,
+ }),
+ splitter: css({
+ marginTop: tokens.spacingL,
+ marginBottom: tokens.spacingL,
+ border: 0,
+ height: '1px',
+ backgroundColor: tokens.gray300,
+ }),
+ icon: css({
+ display: 'flex',
+ justifyContent: 'center',
+ '> img': {
+ display: 'block',
+ width: '70px',
+ margin: `${tokens.spacingXl} 0`,
+ },
+ }),
+};
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/sap-commerce-cloud/coverage/src/AppConfig/FieldSelector.styles.ts.html b/apps/sap-commerce-cloud/coverage/src/AppConfig/FieldSelector.styles.ts.html
new file mode 100644
index 0000000000..4ba12d1783
--- /dev/null
+++ b/apps/sap-commerce-cloud/coverage/src/AppConfig/FieldSelector.styles.ts.html
@@ -0,0 +1,103 @@
+
+
+
+
+
+
+
+
+ All files / src/AppConfig AppConfig.tsx
+
+
+
+
+ 89.86%
+ Statements
+ 133/148
+
+
+
+
+ 61.53%
+ Branches
+ 8/13
+
+
+
+
+ 71.42%
+ Functions
+ 5/7
+
+
+
+
+ 89.86%
+ Lines
+ 133/148
+
+
+
+ + Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +
+ Filter:
+
+
+
+ | 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 | 1x + + + + + + + + + + +1x + +1x + +1x + + + + + + + + + +1x + + + +1x + + + + + + + + + + + + + + + + + + +2x +2x +2x +2x +2x +2x +2x +2x +2x + +2x +2x +2x + +2x +1x + +1x + +1x +1x +1x +1x +1x + +1x +1x + +1x +1x +1x +1x +1x + +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + +2x +1x +1x + +1x + + + + +1x +1x +1x +1x +1x + +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x + +2x + +2x + + + + + + + +2x + + + +1x +2x +2x +2x +2x +2x + +2x +2x +2x +2x +2x +2x +2x +2x + +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x + +2x +2x +2x +2x + +2x +2x + + + + + + +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x +2x + +2x + +2x + +2x +2x + +2x +2x +2x +2x +2x +2x +2x + +2x +1x + | import * as React from 'react';
+
+import { CollectionResponse, ConfigAppSDK } from '@contentful/app-sdk';
+import {
+ Form,
+ FormControl,
+ Heading,
+ Note,
+ Paragraph,
+ TextInput,
+ TextLink,
+} from '@contentful/f36-components';
+
+import FieldSelector from './FieldSelector';
+
+import { toAppParameters, toInputParameters } from './parameters';
+
+import {
+ CompatibleFields,
+ ContentType,
+ EditorInterface,
+ editorInterfacesToSelectedFields,
+ getCompatibleFields,
+ SelectedFields,
+ selectedFieldsToTargetState,
+} from './fields';
+
+import { AppParameters, Config, ParameterDefinition, ValidateParametersFn } from '../interfaces';
+
+import { styles } from './AppConfig.styles';
+
+interface Props {
+ sdk: ConfigAppSDK<AppParameters>;
+ parameterDefinitions: ParameterDefinition[];
+ validateParameters: ValidateParametersFn;
+ logo: string;
+ name: string;
+ color: string;
+ description: string;
+}
+
+interface State {
+ contentTypes: ContentType[];
+ compatibleFields: CompatibleFields;
+ selectedFields: SelectedFields;
+ parameters: Config;
+}
+
+export default class AppConfig extends React.Component<Props, State> {
+ state = {
+ contentTypes: [],
+ compatibleFields: {},
+ selectedFields: {},
+ parameters: toInputParameters(this.props.parameterDefinitions, null),
+ verifying: false,
+ token: null,
+ };
+
+ componentDidMount() {
+ this.init();
+ }
+
+ init = async () => {
+ const { space, app, ids } = this.props.sdk;
+
+ app.onConfigure(this.onAppConfigure);
+
+ const [contentTypesResponse, eisResponse, parameters] = await Promise.all([
+ space.getContentTypes(),
+ space.getEditorInterfaces(),
+ app.getParameters(),
+ ]);
+
+ const contentTypes = (contentTypesResponse as CollectionResponse<ContentType>).items;
+ const editorInterfaces = (eisResponse as CollectionResponse<EditorInterface>).items;
+
+ const compatibleFields = getCompatibleFields(contentTypes);
+ const filteredContentTypes = contentTypes.filter((ct) => {
+ const fields = compatibleFields[ct.sys.id];
+ return fields && fields.length > 0;
+ });
+
+ this.setState(
+ {
+ contentTypes: filteredContentTypes,
+ compatibleFields,
+ selectedFields: editorInterfacesToSelectedFields(editorInterfaces, ids.app),
+ parameters: toInputParameters(this.props.parameterDefinitions, parameters),
+ },
+ () => app.setReady()
+ );
+ };
+
+ onAppConfigure = () => {
+ const { parameters, contentTypes, selectedFields } = this.state;
+ const error = this.props.validateParameters(parameters);
+
+ if (error) {
+ this.props.sdk.notifier.error(error);
+ return false;
+ }
+
+ return {
+ parameters: toAppParameters(this.props.parameterDefinitions, parameters),
+ targetState: selectedFieldsToTargetState(contentTypes, selectedFields),
+ };
+ };
+
+ render() {
+ return (
+ <>
+ <div className={styles.background(this.props.color)} />
+ <div className={styles.body}>
+ <Heading>About {this.props.name}</Heading>
+ <Paragraph>{this.props.description}</Paragraph>
+ <hr className={styles.splitter} />
+ {this.renderApp()}
+ </div>
+ <div className={styles.icon}>
+ <img src={this.props.logo} alt="App logo" />
+ </div>
+ </>
+ );
+ }
+
+ onParameterChange = (key: string, e: React.ChangeEvent<HTMLInputElement>) => {
+ const { value } = e.currentTarget;
+
+ this.setState((state) => ({
+ parameters: { ...state.parameters, [key]: value },
+ }));
+ };
+
+ onSelectedFieldsChange = (selectedFields: SelectedFields) => {
+ this.setState({ selectedFields });
+ };
+
+ renderApp() {
+ const { contentTypes, compatibleFields, selectedFields, parameters } = this.state;
+ const { parameterDefinitions, sdk } = this.props;
+ const { ids, hostnames } = sdk;
+ const { space, environment } = ids;
+ const hasConfigurationOptions = parameterDefinitions && parameterDefinitions.length > 0;
+
+ return (
+ <>
+ {hasConfigurationOptions && (
+ <>
+ <Heading>Configuration</Heading>
+ <Form>
+ {parameterDefinitions.map((def) => {
+ const key = `config-input-${def.id}`;
+
+ return (
+ <FormControl id={key}>
+ <FormControl.Label>{def.name}</FormControl.Label>
+ <TextInput
+ isRequired={def.required}
+ key={key}
+ id={key}
+ name={key}
+ maxLength={255}
+ width={def.type === 'Symbol' ? 'large' : 'medium'}
+ type={def.type === 'Symbol' ? 'text' : 'number'}
+ value={parameters[def.id]}
+ onChange={this.onParameterChange.bind(this, def.id)}
+ />
+ <FormControl.HelpText>{def.description}</FormControl.HelpText>
+ </FormControl>
+ );
+ })}
+ </Form>
+ <hr className={styles.splitter} />
+ </>
+ )}
+ <Heading>Assign to fields</Heading>
+ {contentTypes.length > 0 ? (
+ <Paragraph>
+ This app can only be used with <strong>Short text</strong> or{' '}
+ <strong>Short text, list</strong> fields. Select which fields you’d like to enable for
+ this app.
+ </Paragraph>
+ ) : (
+ <>
+ <Paragraph>
+ This app can only be used with <strong>Short text</strong> or{' '}
+ <strong>Short text, list</strong> fields.
+ </Paragraph>
+ <Note variant="warning">
+ There are <strong>no content types with Short text or Short text, list</strong> fields
+ in this environment. You can add one in your{' '}
+ <TextLink
+ variant="primary"
+ target="_blank"
+ rel="noopener noreferrer"
+ href={
+ environment === 'master'
+ ? `https://${hostnames.webapp}/spaces/${space}/content_types`
+ : `https://${hostnames.webapp}/spaces/${space}/environments/${environment}/content_types`
+ }>
+ content model
+ </TextLink>{' '}
+ and assign it to the app from this screen.
+ </Note>
+ </>
+ )}
+ <FieldSelector
+ contentTypes={contentTypes}
+ compatibleFields={compatibleFields}
+ selectedFields={selectedFields}
+ onSelectedFieldsChange={this.onSelectedFieldsChange}
+ />
+ </>
+ );
+ }
+}
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/sap-commerce-cloud/coverage/src/AppConfig/FieldSelector.tsx.html b/apps/sap-commerce-cloud/coverage/src/AppConfig/FieldSelector.tsx.html
new file mode 100644
index 0000000000..d4eb51f7aa
--- /dev/null
+++ b/apps/sap-commerce-cloud/coverage/src/AppConfig/FieldSelector.tsx.html
@@ -0,0 +1,271 @@
+
+
+
+
+
+
+
+
+ All files / src/AppConfig FieldSelector.styles.ts
+
+
+
+
+ 100%
+ Statements
+ 5/5
+
+
+
+
+ 100%
+ Branches
+ 0/0
+
+
+
+
+ 100%
+ Functions
+ 0/0
+
+
+
+
+ 100%
+ Lines
+ 5/5
+
+
+
+ + Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +
+ Filter:
+
+
+
+ | 1 +2 +3 +4 +5 +6 +7 | 1x +1x + +1x +1x +1x + | import { css } from 'emotion';
+import tokens from '@contentful/f36-tokens';
+
+export const styles = {
+ fieldSelector: css({ marginTop: tokens.spacingL }),
+};
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/sap-commerce-cloud/coverage/src/AppConfig/fields.ts.html b/apps/sap-commerce-cloud/coverage/src/AppConfig/fields.ts.html
new file mode 100644
index 0000000000..b190ee2c4f
--- /dev/null
+++ b/apps/sap-commerce-cloud/coverage/src/AppConfig/fields.ts.html
@@ -0,0 +1,328 @@
+
+
+
+
+
+
+
+
+ All files / src/AppConfig FieldSelector.tsx
+
+
+
+
+ 30.43%
+ Statements
+ 14/46
+
+
+
+
+ 100%
+ Branches
+ 2/2
+
+
+
+
+ 66.66%
+ Functions
+ 2/3
+
+
+
+
+ 30.43%
+ Lines
+ 14/46
+
+
+
+ + Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +
+ Filter:
+
+
+
+ | 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 | 1x +1x +1x + + + + + + + + + + +1x +1x + + + + + + + + + + + + + + + +1x +2x + +2x +2x +2x + + + + + + + + + + + + + + + + + + + + + +2x +2x + +2x +1x + | import * as React from 'react';
+import { styles } from './FieldSelector.styles';
+import { Form, Subheading, FormControl, Checkbox } from '@contentful/f36-components';
+
+import { ContentType, CompatibleFields, SelectedFields } from './fields';
+
+interface Props {
+ contentTypes: ContentType[];
+ compatibleFields: CompatibleFields;
+ selectedFields: SelectedFields;
+ onSelectedFieldsChange: Function;
+}
+
+export default class FieldSelector extends React.Component<Props> {
+ onSelectedFieldChange = (
+ ctId: string,
+ fieldId: string,
+ e: React.ChangeEvent<HTMLInputElement>
+ ) => {
+ const updated = { ...this.props.selectedFields };
+
+ if (e.currentTarget.checked) {
+ updated[ctId] = (updated[ctId] || []).concat([fieldId]);
+ } else {
+ updated[ctId] = (updated[ctId] || []).filter((cur) => cur !== fieldId);
+ }
+
+ this.props.onSelectedFieldsChange(updated);
+ };
+
+ render() {
+ const { compatibleFields, contentTypes, selectedFields } = this.props;
+
+ return (
+ <>
+ {contentTypes.map((ct) => {
+ const fields = compatibleFields[ct.sys.id];
+ return (
+ <div key={ct.sys.id} className={styles.fieldSelector}>
+ <Subheading>{ct.name}</Subheading>
+ <Form>
+ {fields.map((field) => (
+ <FormControl id={`field-box-${ct.sys.id}-${field.id}`}>
+ <Checkbox
+ key={field.id}
+ helpText={`${
+ field.type === 'Symbol' ? 'Short text' : 'Short text, list'
+ } · Field ID: ${field.id}`}
+ isChecked={(selectedFields[ct.sys.id] || []).includes(field.id)}
+ onChange={this.onSelectedFieldChange.bind(this, ct.sys.id, field.id)}>
+ {field.name}
+ </Checkbox>
+ </FormControl>
+ ))}
+ </Form>
+ </div>
+ );
+ })}
+ </>
+ );
+ }
+}
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/sap-commerce-cloud/coverage/src/AppConfig/index.html b/apps/sap-commerce-cloud/coverage/src/AppConfig/index.html
new file mode 100644
index 0000000000..1f810771cf
--- /dev/null
+++ b/apps/sap-commerce-cloud/coverage/src/AppConfig/index.html
@@ -0,0 +1,191 @@
+
+
+
+
+
+
+
+
+ All files / src/AppConfig fields.ts
+
+
+
+
+ 86.36%
+ Statements
+ 38/44
+
+
+
+
+ 66.66%
+ Branches
+ 6/9
+
+
+
+
+ 100%
+ Functions
+ 4/4
+
+
+
+
+ 86.36%
+ Lines
+ 38/44
+
+
+
+ + Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +
+ Filter:
+
+
+
+ | 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 | 1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x +1x +1x +1x + +1x +1x +1x +1x +1x +1x +1x +1x + +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + +1x + +1x +1x +1x +1x +1x + +1x +1x +1x +1x +1x +1x + + + + + + +1x +1x +1x + | import get from 'lodash.get';
+
+interface FieldItems {
+ type: string;
+}
+
+interface Field {
+ id: string;
+ name: string;
+ type: string;
+ items?: FieldItems;
+}
+
+export interface ContentType {
+ sys: { id: string };
+ name: string;
+ fields?: Field[];
+}
+
+interface Control {
+ fieldId: string;
+ widgetNamespace: string;
+ widgetId: string;
+}
+
+export interface EditorInterface {
+ sys: { contentType: { sys: { id: string } } };
+ controls?: Control[];
+}
+
+export type CompatibleFields = Record<string, Field[]>;
+export type SelectedFields = Record<string, string[] | undefined>;
+
+function isCompatibleField(field: Field) {
+ const isArray = field.type === 'Array';
+ return field.type === 'Symbol' || (isArray && (field.items as FieldItems).type === 'Symbol');
+}
+
+export function getCompatibleFields(contentTypes: ContentType[]): CompatibleFields {
+ return contentTypes.reduce((acc, ct) => {
+ return {
+ ...acc,
+ [ct.sys.id]: (ct.fields || []).filter(isCompatibleField),
+ };
+ }, {});
+}
+
+export function editorInterfacesToSelectedFields(
+ eis: EditorInterface[],
+ appId?: string
+): SelectedFields {
+ return eis.reduce((acc, ei) => {
+ const ctId = get(ei, ['sys', 'contentType', 'sys', 'id']);
+ const fieldIds = get(ei, ['controls'], [])
+ .filter((control) => control.widgetNamespace === 'app' && control.widgetId === appId)
+ .map((control) => control.fieldId)
+ .filter((fieldId) => typeof fieldId === 'string' && fieldId.length > 0);
+
+ if (ctId && fieldIds.length > 0) {
+ return { ...acc, [ctId]: fieldIds };
+ } else {
+ return acc;
+ }
+ }, {});
+}
+
+export function selectedFieldsToTargetState(
+ contentTypes: ContentType[],
+ selectedFields: SelectedFields
+) {
+ return {
+ EditorInterface: contentTypes.reduce((acc, ct) => {
+ const { id } = ct.sys;
+ const fields = selectedFields[id] || [];
+ const targetState =
+ fields.length > 0 ? { controls: fields.map((fieldId) => ({ fieldId })) } : {};
+
+ return { ...acc, [id]: targetState };
+ }, {}),
+ };
+}
+ |
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/sap-commerce-cloud/coverage/src/AppConfig/parameters.ts.html b/apps/sap-commerce-cloud/coverage/src/AppConfig/parameters.ts.html
new file mode 100644
index 0000000000..557413b22d
--- /dev/null
+++ b/apps/sap-commerce-cloud/coverage/src/AppConfig/parameters.ts.html
@@ -0,0 +1,172 @@
+
+
+
+
+
+
+
+
+ All files src/AppConfig
+
+
+
+
+ 83.06%
+ Statements
+ 260/313
+
+
+
+
+ 71.87%
+ Branches
+ 23/32
+
+
+
+
+ 82.35%
+ Functions
+ 14/17
+
+
+
+
+ 83.06%
+ Lines
+ 260/313
+
+
+
+ + Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +
+ Filter:
+
+
+
+
+
+
+
+
+
+ | File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| AppConfig.styles.ts | +
+
+ |
+ 100% | +45/45 | +100% | +1/1 | +100% | +1/1 | +100% | +45/45 | +
| AppConfig.tsx | +
+
+ |
+ 89.86% | +133/148 | +61.53% | +8/13 | +71.42% | +5/7 | +89.86% | +133/148 | +
| FieldSelector.styles.ts | +
+
+ |
+ 100% | +5/5 | +100% | +0/0 | +100% | +0/0 | +100% | +5/5 | +
| FieldSelector.tsx | +
+
+ |
+ 30.43% | +14/46 | +100% | +2/2 | +66.66% | +2/3 | +30.43% | +14/46 | +
| fields.ts | +
+
+ |
+ 86.36% | +38/44 | +66.66% | +6/9 | +100% | +4/4 | +86.36% | +38/44 | +
| parameters.ts | +
+
+ |
+ 100% | +25/25 | +85.71% | +6/7 | +100% | +2/2 | +100% | +25/25 | +
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/sap-commerce-cloud/coverage/src/__mocks__/index.html b/apps/sap-commerce-cloud/coverage/src/__mocks__/index.html
new file mode 100644
index 0000000000..af3a24ea1f
--- /dev/null
+++ b/apps/sap-commerce-cloud/coverage/src/__mocks__/index.html
@@ -0,0 +1,146 @@
+
+
+
+
+
+
+
+
+ All files / src/AppConfig parameters.ts
+
+
+
+
+ 100%
+ Statements
+ 25/25
+
+
+
+
+ 85.71%
+ Branches
+ 6/7
+
+
+
+
+ 100%
+ Functions
+ 2/2
+
+
+
+
+ 100%
+ Lines
+ 25/25
+
+
+
+ + Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +
+ Filter:
+
+
+
+ | 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 | 1x + + + +1x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x +4x + +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + | import get from 'lodash.get';
+
+import { Config, ParameterDefinition } from '../interfaces';
+
+export function toInputParameters(
+ parameterDefinitions: ParameterDefinition[],
+ parameterValues: Config | null
+): Record<string, string> {
+ return parameterDefinitions.reduce((acc, def) => {
+ const defaultValue = typeof def.default === 'undefined' ? '' : `${def.default}`;
+ return {
+ ...acc,
+ [def.id]: `${get(parameterValues, [def.id], defaultValue)}`,
+ };
+ }, {});
+}
+
+export function toAppParameters(
+ parameterDefinitions: ParameterDefinition[],
+ inputValues: Record<string, string>
+): Config {
+ return parameterDefinitions.reduce((acc, def) => {
+ const value = inputValues[def.id];
+ return {
+ ...acc,
+ [def.id]: def.type === 'Number' ? parseInt(value, 10) : value,
+ };
+ }, {});
+}
+ |
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/sap-commerce-cloud/coverage/src/__mocks__/index.ts.html b/apps/sap-commerce-cloud/coverage/src/__mocks__/index.ts.html
new file mode 100644
index 0000000000..3138804684
--- /dev/null
+++ b/apps/sap-commerce-cloud/coverage/src/__mocks__/index.ts.html
@@ -0,0 +1,91 @@
+
+
+
+
+
+
+
+
+ All files src/__mocks__
+
+
+
+
+ 100%
+ Statements
+ 17/17
+
+
+
+
+ 100%
+ Branches
+ 1/1
+
+
+
+
+ 100%
+ Functions
+ 1/1
+
+
+
+
+ 100%
+ Lines
+ 17/17
+
+
+
+ + Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +
+ Filter:
+
+
+
+
+
+
+
+
+
+ | File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| index.ts | +
+
+ |
+ 100% | +1/1 | +100% | +0/0 | +100% | +0/0 | +100% | +1/1 | +
| mockProductPreview.ts | +
+
+ |
+ 100% | +8/8 | +100% | +0/0 | +100% | +0/0 | +100% | +8/8 | +
| mockSdk.ts | +
+
+ |
+ 100% | +8/8 | +100% | +1/1 | +100% | +1/1 | +100% | +8/8 | +
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/sap-commerce-cloud/coverage/src/__mocks__/mockProductPreview.ts.html b/apps/sap-commerce-cloud/coverage/src/__mocks__/mockProductPreview.ts.html
new file mode 100644
index 0000000000..54f206aa23
--- /dev/null
+++ b/apps/sap-commerce-cloud/coverage/src/__mocks__/mockProductPreview.ts.html
@@ -0,0 +1,115 @@
+
+
+
+
+
+
+
+
+ All files / src/__mocks__ index.ts
+
+
+
+
+ 100%
+ Statements
+ 1/1
+
+
+
+
+ 100%
+ Branches
+ 0/0
+
+
+
+
+ 100%
+ Functions
+ 0/0
+
+
+
+
+ 100%
+ Lines
+ 1/1
+
+
+
+ + Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +
+ Filter:
+
+
+
+ | 1 +2 +3 | 1x + + | export { makeSdkMock } from './mockSdk';
+export { mockProductPreview } from './mockProductPreview';
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/sap-commerce-cloud/coverage/src/__mocks__/mockSdk.ts.html b/apps/sap-commerce-cloud/coverage/src/__mocks__/mockSdk.ts.html
new file mode 100644
index 0000000000..741f79a3a9
--- /dev/null
+++ b/apps/sap-commerce-cloud/coverage/src/__mocks__/mockSdk.ts.html
@@ -0,0 +1,109 @@
+
+
+
+
+
+
+
+
+ All files / src/__mocks__ mockProductPreview.ts
+
+
+
+
+ 100%
+ Statements
+ 8/8
+
+
+
+
+ 100%
+ Branches
+ 0/0
+
+
+
+
+ 100%
+ Functions
+ 0/0
+
+
+
+
+ 100%
+ Lines
+ 8/8
+
+
+
+ + Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +
+ Filter:
+
+
+
+ | 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 | + +1x +1x +1x +1x +1x +1x +1x +1x + | import { Product } from '../interfaces';
+
+export const mockProductPreview: Product = {
+ sku: 'abc1234',
+ image: '',
+ id: '123',
+ name: 'Mock Product',
+ isMissing: false,
+ productUrl: '/product/abc1234',
+};
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/sap-commerce-cloud/coverage/src/api/dataTransformers.ts.html b/apps/sap-commerce-cloud/coverage/src/api/dataTransformers.ts.html
new file mode 100644
index 0000000000..3f451ee07a
--- /dev/null
+++ b/apps/sap-commerce-cloud/coverage/src/api/dataTransformers.ts.html
@@ -0,0 +1,199 @@
+
+
+
+
+
+
+
+
+ All files / src/__mocks__ mockSdk.ts
+
+
+
+
+ 100%
+ Statements
+ 8/8
+
+
+
+
+ 100%
+ Branches
+ 1/1
+
+
+
+
+ 100%
+ Functions
+ 1/1
+
+
+
+
+ 100%
+ Lines
+ 8/8
+
+
+
+ + Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +
+ Filter:
+
+
+
+ | 1 +2 +3 +4 +5 +6 +7 +8 +9 | 1x +1x +1x +1x +1x +1x +1x +1x + | export const makeSdkMock = () => ({
+ ids: {
+ app: 'some-app',
+ },
+ hostnames: {
+ webapp: 'app.contentful.com',
+ },
+});
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/sap-commerce-cloud/coverage/src/api/fetchBaseSites.ts.html b/apps/sap-commerce-cloud/coverage/src/api/fetchBaseSites.ts.html
new file mode 100644
index 0000000000..4cdb5af63f
--- /dev/null
+++ b/apps/sap-commerce-cloud/coverage/src/api/fetchBaseSites.ts.html
@@ -0,0 +1,139 @@
+
+
+
+
+
+
+
+
+ All files / src/api dataTransformers.ts
+
+
+
+
+ 0%
+ Statements
+ 0/33
+
+
+
+
+ 0%
+ Branches
+ 0/1
+
+
+
+
+ 0%
+ Functions
+ 0/1
+
+
+
+
+ 0%
+ Lines
+ 0/33
+
+
+
+ + Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +
+ Filter:
+
+
+
+ | 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import get from 'lodash/get'; +import { Product, Hash, ConfigurationParameters } from '../interfaces'; + +export const productTransformer = + ( + { apiEndpoint }: ConfigurationParameters, + skuIdsToSkusMap: { [key: string]: string }, + baseSite?: string + ) => + (item: Hash): Product => { + const id = get(item, ['id'], ''); + let imageUrl = get(item, ['images', 0, 'url'], ''); + if (imageUrl.length > 0) { + imageUrl = apiEndpoint + imageUrl; + } + const sku = get(item, ['code'], ''); + const productUrl = skuIdsToSkusMap[sku] + ? skuIdsToSkusMap[sku] + : baseSite + ? `${apiEndpoint}/occ/v2/${baseSite}/products/${sku}` + : ''; + + return { + id, + image: imageUrl, + name: get(item, ['name'], '') + .replaceAll('<em class="search-results-highlight">', '') + .replaceAll('</em>', ''), + sku, + productUrl: productUrl, + }; + }; + +export const baseSiteTransformer = + () => + (item: Hash): string => { + return get(item, ['uid'], ''); + }; + |
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/sap-commerce-cloud/coverage/src/api/fetchProductList.ts.html b/apps/sap-commerce-cloud/coverage/src/api/fetchProductList.ts.html
new file mode 100644
index 0000000000..08a4f9de23
--- /dev/null
+++ b/apps/sap-commerce-cloud/coverage/src/api/fetchProductList.ts.html
@@ -0,0 +1,229 @@
+
+
+
+
+
+
+
+
+ All files / src/api fetchBaseSites.ts
+
+
+
+
+ 0%
+ Statements
+ 0/15
+
+
+
+
+ 0%
+ Branches
+ 0/1
+
+
+
+
+ 0%
+ Functions
+ 0/1
+
+
+
+
+ 0%
+ Lines
+ 0/15
+
+
+
+ + Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +
+ Filter:
+
+
+
+ | 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 | + + + + + + + + + + + + + + + + + + | import { baseSiteTransformer } from './dataTransformers'; +import { SAPParameters } from '../interfaces'; + +export async function fetchBaseSites(parameters: SAPParameters): Promise<string[]> { + const url = `${parameters.installation.apiEndpoint}/occ/v2/basesites`; + + try { + const response = await fetch(url); + if (response.ok) { + const responseJson = await response.json(); + const baseSites = responseJson['baseSites'].map(baseSiteTransformer()); + return baseSites; + } + throw new Error(response.statusText); + } catch (error) { + throw error; + } +} + |
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/sap-commerce-cloud/coverage/src/api/fetchProductPreviews.ts.html b/apps/sap-commerce-cloud/coverage/src/api/fetchProductPreviews.ts.html
new file mode 100644
index 0000000000..f25740b8af
--- /dev/null
+++ b/apps/sap-commerce-cloud/coverage/src/api/fetchProductPreviews.ts.html
@@ -0,0 +1,208 @@
+
+
+
+
+
+
+
+
+ All files / src/api fetchProductList.ts
+
+
+
+
+ 0%
+ Statements
+ 0/45
+
+
+
+
+ 0%
+ Branches
+ 0/1
+
+
+
+
+ 0%
+ Functions
+ 0/1
+
+
+
+
+ 0%
+ Lines
+ 0/45
+
+
+
+ + Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +
+ Filter:
+
+
+
+ | 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { Response, SAPParameters, UpdateTotalPagesFn } from '../interfaces'; +import { productTransformer } from './dataTransformers'; + +export async function fetchProductList( + baseSite: string, + searchQuery: string, + page: number, + parameters: SAPParameters, + updateTotalPages: UpdateTotalPagesFn +): Promise<Response> { + if (!baseSite.length) { + return { + products: [], + errors: [], + }; + } + + const response: any = await fetch( + parameters.installation.apiEndpoint + + '/occ/v2/' + + baseSite + + '/products/search' + + '?query=' + + searchQuery + + '&fields=FULL¤tPage=' + + page + ); + const responseJson = await response.json(); + if (response.ok) { + const products = responseJson['products'].map( + productTransformer(parameters.installation, {}, baseSite) + ); + updateTotalPages(responseJson['pagination']['totalPages']); + if (!products.length) { + return { + products: [], + errors: [ + { + message: `Products not found for search term ${searchQuery}`, + type: 'Not Found', + }, + ], + }; + } + return { products, errors: [] }; + } + return { products: [], errors: responseJson['errors'] }; +} + |
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/sap-commerce-cloud/coverage/src/api/index.html b/apps/sap-commerce-cloud/coverage/src/api/index.html
new file mode 100644
index 0000000000..62b14b8c38
--- /dev/null
+++ b/apps/sap-commerce-cloud/coverage/src/api/index.html
@@ -0,0 +1,161 @@
+
+
+
+
+
+
+
+
+ All files / src/api fetchProductPreviews.ts
+
+
+
+
+ 0%
+ Statements
+ 0/35
+
+
+
+
+ 0%
+ Branches
+ 0/1
+
+
+
+
+ 0%
+ Functions
+ 0/1
+
+
+
+
+ 0%
+ Lines
+ 0/35
+
+
+
+ + Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +
+ Filter:
+
+
+
+ | 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import difference from 'lodash/difference'; +import { Product, SAPParameters } from '../interfaces'; +import { productTransformer } from './dataTransformers'; + +export async function fetchProductPreviews( + skus: string[], + parameters: SAPParameters +): Promise<Product[]> { + if (!skus.length) { + return []; + } + + let totalResponse: any[] = []; + let skuIds: string[] = []; + let skuIdsToSkusMap: { [key: string]: string } = {}; + + for (const sku of skus) { + const skuId = sku.split('/products/').pop() as string; + skuIds.push(skuId); + skuIdsToSkusMap[skuId] = sku; + + const url = `${sku}?fields=code,name,summary,price(formattedValue,DEFAULT),images(galleryIndex,FULL),averageRating,stock(DEFAULT),description,availableForPickup,url,numberOfReviews,manufacturer,categories(FULL),priceRange,multidimensional,configuratorType,configurable,tags`; + const response = await fetch(url); + if (response.ok) { + let responseJson = await response.json(); + totalResponse.push(responseJson); + } + } + + const products = totalResponse.map(productTransformer(parameters.installation, skuIdsToSkusMap)); + const foundSKUs = products.map((product: { sku: any }) => product.sku); + const missingProducts = difference(skuIds, foundSKUs).map((sku) => ({ + sku: sku.split('/products/').pop(), + image: '', + id: '', + name: '', + isMissing: true, + productUrl: skuIdsToSkusMap[sku], + })); + return [...products, ...missingProducts]; +} + |
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/sap-commerce-cloud/coverage/src/components/Dialog/Dialog.styles.ts.html b/apps/sap-commerce-cloud/coverage/src/components/Dialog/Dialog.styles.ts.html
new file mode 100644
index 0000000000..c5877786c6
--- /dev/null
+++ b/apps/sap-commerce-cloud/coverage/src/components/Dialog/Dialog.styles.ts.html
@@ -0,0 +1,121 @@
+
+
+
+
+
+
+
+
+ All files src/api
+
+
+
+
+ 0%
+ Statements
+ 0/128
+
+
+
+
+ 0%
+ Branches
+ 0/4
+
+
+
+
+ 0%
+ Functions
+ 0/4
+
+
+
+
+ 0%
+ Lines
+ 0/128
+
+
+
+ + Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +
+ Filter:
+
+
+
+
+
+
+
+
+
+ | File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| dataTransformers.ts | +
+
+ |
+ 0% | +0/33 | +0% | +0/1 | +0% | +0/1 | +0% | +0/33 | +
| fetchBaseSites.ts | +
+
+ |
+ 0% | +0/15 | +0% | +0/1 | +0% | +0/1 | +0% | +0/15 | +
| fetchProductList.ts | +
+
+ |
+ 0% | +0/45 | +0% | +0/1 | +0% | +0/1 | +0% | +0/45 | +
| fetchProductPreviews.ts | +
+
+ |
+ 0% | +0/35 | +0% | +0/1 | +0% | +0/1 | +0% | +0/35 | +
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/sap-commerce-cloud/coverage/src/components/Dialog/Dialog.tsx.html b/apps/sap-commerce-cloud/coverage/src/components/Dialog/Dialog.tsx.html
new file mode 100644
index 0000000000..92c36d2eee
--- /dev/null
+++ b/apps/sap-commerce-cloud/coverage/src/components/Dialog/Dialog.tsx.html
@@ -0,0 +1,976 @@
+
+
+
+
+
+
+
+
+ All files / src/components/Dialog Dialog.styles.ts
+
+
+
+
+ 0%
+ Statements
+ 0/11
+
+
+
+
+ 0%
+ Branches
+ 0/1
+
+
+
+
+ 0%
+ Functions
+ 0/1
+
+
+
+
+ 0%
+ Lines
+ 0/11
+
+
+
+ + Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +
+ Filter:
+
+
+
+ | 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 | + + + + + + + + + + + + | import { css } from 'emotion'; +import tokens from '@contentful/f36-tokens'; + +export const styles = { + textInput: css({ width: '250px' }), + grid: css({ margin: `${tokens.spacingM} 0`, paddingLeft: tokens.spacingL }), + table: css({ padding: tokens.spacingL }), + tableCell: css({ width: '10%' }), + pagination: css({ margin: tokens.spacingL }), + nextButton: (page: number) => css({ marginLeft: page > 0 ? tokens.spacingL : '' }), + selectProductsButton: css({ margin: tokens.spacingL }), +}; + |
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/sap-commerce-cloud/coverage/src/components/Dialog/ProductList.tsx.html b/apps/sap-commerce-cloud/coverage/src/components/Dialog/ProductList.tsx.html
new file mode 100644
index 0000000000..97a1acea43
--- /dev/null
+++ b/apps/sap-commerce-cloud/coverage/src/components/Dialog/ProductList.tsx.html
@@ -0,0 +1,274 @@
+
+
+
+
+
+
+
+
+ All files / src/components/Dialog Dialog.tsx
+
+
+
+
+ 0%
+ Statements
+ 0/233
+
+
+
+
+ 0%
+ Branches
+ 0/1
+
+
+
+
+ 0%
+ Functions
+ 0/1
+
+
+
+
+ 0%
+ Lines
+ 0/233
+
+
+
+ + Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +
+ Filter:
+
+
+
+ | 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import React from 'react'; +import { + Button, + Grid, + GridItem, + IconButton, + Option, + Select, + Table, + TableBody, + TableCell, + TableHead, + TableRow, + TextInput, +} from '@contentful/f36-components'; +import { DialogAppSDK } from '@contentful/app-sdk'; +import { ProductList } from './ProductList'; +import { fetchProductList } from '../../api/fetchProductList'; +import { fetchBaseSites } from '../../api/fetchBaseSites'; +import { AppParameters, Error, Product, SAPParameters } from '../../interfaces'; +import get from 'lodash/get'; +import union from 'lodash/union'; +import { formatProductUrl } from '../../utils'; +import { styles } from './Dialog.styles'; +import { cx } from '@emotion/css'; +import { DoneIcon, SearchIcon } from '@contentful/f36-icons'; + +interface DialogProps { + sdk: DialogAppSDK<AppParameters>; +} + +interface State { + baseSite: string; + baseSites: string[]; + query: string; + page: number; + totalPages: number; + products: Product[]; + selectedProducts: string[]; + errors: Error[]; +} + +export default class Dialog extends React.Component<DialogProps, State> { + state: State = { + baseSite: '', + baseSites: [], + query: '', + page: 0, + totalPages: 0, + products: [], + selectedProducts: [], + errors: [], + }; + + componentDidMount() { + this.loadBaseSites().then(() => { + this.load(); + }); + } + + load = async () => { + const { products, errors } = await fetchProductList( + this.state.baseSite, + this.state.query, + this.state.page, + this.props.sdk.parameters as SAPParameters, + this.updateTotalPages + ); + this.setState({ + baseSite: this.state.baseSite, + baseSites: this.state.baseSites, + query: this.state.query, + products: products, + selectedProducts: this.state.selectedProducts, + errors: errors, + }); + }; + + loadBaseSites = async () => { + const baseSites = await fetchBaseSites(this.props.sdk.parameters as SAPParameters); + let finalBaseSites: string[] = []; + const installationConfigBaseSites = get(this.props.sdk.parameters.invocation, 'baseSites', ''); + if (installationConfigBaseSites.length > 0) { + for (const baseSite of baseSites) { + if (installationConfigBaseSites.split(',').includes(baseSite)) { + finalBaseSites.push(baseSite); + } + } + } else { + finalBaseSites = baseSites; + } + this.setState({ + baseSite: finalBaseSites[0], + baseSites: finalBaseSites, + query: this.state.query, + page: this.state.page, + products: [], + selectedProducts: [], + }); + }; + + updateSearchTerm = (event: any) => { + this.setState({ + ...this.state, + query: event.target.value, + }); + }; + + updateBaseSite = (event: any) => { + this.setState( + { + ...this.state, + baseSite: event.target.value, + }, + () => { + this.load(); + } + ); + }; + + multiProductsCheckBoxClickEvent = (event: any) => { + let existingProducts: string[] = this.state.selectedProducts; + const skuId: string = event.target.id; + + if (event.target.checked) { + if (!existingProducts.includes(skuId)) { + const apiEndpoint = get(this.props.sdk.parameters.invocation, 'apiEndpoint', ''); + existingProducts.push(formatProductUrl(apiEndpoint, this.state.baseSite, skuId)); + this.setState({ + selectedProducts: existingProducts, + }); + } + } else { + if (existingProducts.includes(skuId)) { + const skuIndex = existingProducts.indexOf(skuId); + existingProducts.splice(skuIndex, 1); + this.setState({ + selectedProducts: existingProducts, + }); + } + } + }; + + updateTotalPages = (totalPages: number) => { + this.setState({ totalPages }); + }; + + selectMultipleProductsClickEvent = () => { + const currentField = get(this.props.sdk.parameters.invocation, 'fieldValue', [] as string[]); + const updatedField = union(currentField, this.state.selectedProducts); + + this.props.sdk.close(updatedField); + }; + + searchButtonClickEvent() { + this.load(); + } + + nextPageButtonEvent = () => { + this.setState({ page: this.state.page + 1 }, this.load); + }; + + prevPageButtonEvent = () => { + this.setState({ page: this.state.page - 1 }, this.load); + }; + + render() { + const isFieldTypeArray = + (get(this.props.sdk.parameters.invocation, 'fieldType', '') as string) === 'Array'; + return ( + <> + <Grid + columns="1fr 1fr 1fr 1fr 1fr" + rowGap="spacingM" + columnGap="spacingM" + className={styles.grid}> + <GridItem> + <TextInput + type="text" + placeholder={'Search Term...'} + className={cx(styles.textInput, 'f36-margin-bottom--m')} + value={this.state.query} + onChange={this.updateSearchTerm} + onKeyPress={(event) => { + if (event.key === 'Enter') { + this.load(); + } + }} + /> + </GridItem> + <GridItem> + <Select onChange={this.updateBaseSite}> + {this.state.baseSites.map((baseSite) => ( + <Option key={baseSite} value={baseSite}> + {baseSite} + </Option> + ))} + </Select> + </GridItem> + <GridItem> + <IconButton + variant="primary" + icon={<SearchIcon />} + aria-label="search" + onClick={() => this.searchButtonClickEvent()}> + Search + </IconButton> + </GridItem> + {isFieldTypeArray ? ( + <GridItem> + <IconButton + variant="primary" + icon={<DoneIcon />} + onClick={this.selectMultipleProductsClickEvent} + aria-label="Select Products"> + Select Products + </IconButton> + </GridItem> + ) : ( + <></> + )} + </Grid> + + <Table className={styles.table}> + {this.state.errors?.length ? ( + <TableBody> + <TableRow> + {this.state.errors.map((error) => ( + <TableCell key={error.message}> + {' '} + {error.type} : {error.message} + </TableCell> + ))} + </TableRow> + </TableBody> + ) : ( + <></> + )} + {this.state.products?.length ? ( + <> + <TableHead> + <TableRow> + <TableCell className={styles.tableCell}>Select</TableCell> + <TableCell>Code</TableCell> + <TableCell>Name</TableCell> + <TableCell>Image</TableCell> + </TableRow> + </TableHead> + <TableBody> + <ProductList + sdk={this.props.sdk} + products={this.state.products} + baseSite={this.state.baseSite} + selectedProducts={this.state.selectedProducts} + checkboxFn={this.multiProductsCheckBoxClickEvent} + /> + </TableBody> + </> + ) : ( + <></> + )} + </Table> + <div className={styles.pagination}> + {this.state.page > 0 ? ( + <Button variant="primary" onClick={this.prevPageButtonEvent}> + Previous + </Button> + ) : ( + <></> + )} + {this.state.page + 1 < this.state.totalPages ? ( + <Button + variant="primary" + className={styles.nextButton(this.state.page)} + onClick={this.nextPageButtonEvent}> + Next + </Button> + ) : ( + <></> + )} + </div> + {isFieldTypeArray ? ( + <IconButton + variant="primary" + icon={<DoneIcon />} + onClick={this.selectMultipleProductsClickEvent} + aria-label="Select Products" + className={styles.selectProductsButton}> + Select Products + </IconButton> + ) : ( + <></> + )} + </> + ); + } +} + |
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/sap-commerce-cloud/coverage/src/components/Dialog/index.html b/apps/sap-commerce-cloud/coverage/src/components/Dialog/index.html
new file mode 100644
index 0000000000..6b07a65339
--- /dev/null
+++ b/apps/sap-commerce-cloud/coverage/src/components/Dialog/index.html
@@ -0,0 +1,146 @@
+
+
+
+
+
+
+
+
+ All files / src/components/Dialog ProductList.tsx
+
+
+
+
+ 0%
+ Statements
+ 0/45
+
+
+
+
+ 0%
+ Branches
+ 0/1
+
+
+
+
+ 0%
+ Functions
+ 0/1
+
+
+
+
+ 0%
+ Lines
+ 0/45
+
+
+
+ + Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +
+ Filter:
+
+
+
+ | 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import React from 'react'; +import { DialogExtensionSDK } from '@contentful/app-sdk'; +import { CheckBoxFn, Product } from '../../interfaces'; +import { Checkbox, IconButton, TableCell, TableRow } from '@contentful/f36-components'; +import get from 'lodash/get'; +import { formatProductUrl } from '../../utils'; +import { DoneIcon } from '@contentful/f36-icons'; + +interface Props { + sdk: DialogExtensionSDK; + products: Product[]; + selectedProducts: string[]; + baseSite: string; + checkboxFn: CheckBoxFn; +} + +export class ProductList extends React.Component<Props> { + selectButtonClickEvent(sku: string) { + const apiEndpoint = get(this.props.sdk.parameters.invocation, 'apiEndpoint', ''); + this.props.sdk.close([formatProductUrl(apiEndpoint, this.props.baseSite, sku)]); + } + + render() { + const isFieldTypeSymbol = + (get(this.props.sdk.parameters.invocation, 'fieldType', '') as string) === 'Symbol'; + + return ( + <> + {this.props.products.map((product, index) => { + const checkboxValue = this.props.selectedProducts.includes( + this.props.baseSite + ':' + product.sku + ); + return ( + <TableRow key={product.sku}> + <TableCell> + {isFieldTypeSymbol ? ( + <IconButton + variant="primary" + icon={<DoneIcon />} + onClick={() => this.selectButtonClickEvent(product.sku)} + aria-label="Select"> + Select + </IconButton> + ) : ( + <Checkbox + id={product.sku} + defaultChecked={checkboxValue} + onChange={this.props.checkboxFn} + /> + )} + </TableCell> + <TableCell>{product.sku}</TableCell> + <TableCell>{product.name}</TableCell> + <TableCell> + <img src={product.image} alt="product" /> + </TableCell> + </TableRow> + ); + })} + </> + ); + } +} + |
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/sap-commerce-cloud/coverage/src/components/Field/Field.styles.ts.html b/apps/sap-commerce-cloud/coverage/src/components/Field/Field.styles.ts.html
new file mode 100644
index 0000000000..5add39b4f5
--- /dev/null
+++ b/apps/sap-commerce-cloud/coverage/src/components/Field/Field.styles.ts.html
@@ -0,0 +1,133 @@
+
+
+
+
+
+
+
+
+ All files src/components/Dialog
+
+
+
+
+ 0%
+ Statements
+ 0/289
+
+
+
+
+ 0%
+ Branches
+ 0/3
+
+
+
+
+ 0%
+ Functions
+ 0/3
+
+
+
+
+ 0%
+ Lines
+ 0/289
+
+
+
+ + Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +
+ Filter:
+
+
+
+
+
+
+
+
+
+ | File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| Dialog.styles.ts | +
+
+ |
+ 0% | +0/11 | +0% | +0/1 | +0% | +0/1 | +0% | +0/11 | +
| Dialog.tsx | +
+
+ |
+ 0% | +0/233 | +0% | +0/1 | +0% | +0/1 | +0% | +0/233 | +
| ProductList.tsx | +
+
+ |
+ 0% | +0/45 | +0% | +0/1 | +0% | +0/1 | +0% | +0/45 | +
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/sap-commerce-cloud/coverage/src/components/Field/Field.tsx.html b/apps/sap-commerce-cloud/coverage/src/components/Field/Field.tsx.html
new file mode 100644
index 0000000000..f5c65c4bf3
--- /dev/null
+++ b/apps/sap-commerce-cloud/coverage/src/components/Field/Field.tsx.html
@@ -0,0 +1,460 @@
+
+
+
+
+
+
+
+
+ All files / src/components/Field Field.styles.ts
+
+
+
+
+ 0%
+ Statements
+ 0/15
+
+
+
+
+ 0%
+ Branches
+ 0/1
+
+
+
+
+ 0%
+ Functions
+ 0/1
+
+
+
+
+ 0%
+ Lines
+ 0/15
+
+
+
+ + Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +
+ Filter:
+
+
+
+ | 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 | + + + + + + + + + + + + + + + + | import { css } from 'emotion'; +import tokens from '@contentful/f36-tokens'; + +export const styles = { + sortable: css({ + marginBottom: tokens.spacingM, + }), + container: css({ + display: 'flex', + }), + logo: css({ + display: 'block', + height: '30px', + marginRight: tokens.spacingM, + }), +}; + |
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/sap-commerce-cloud/coverage/src/components/Field/index.html b/apps/sap-commerce-cloud/coverage/src/components/Field/index.html
new file mode 100644
index 0000000000..e3d57916aa
--- /dev/null
+++ b/apps/sap-commerce-cloud/coverage/src/components/Field/index.html
@@ -0,0 +1,131 @@
+
+
+
+
+
+
+
+
+ All files / src/components/Field Field.tsx
+
+
+
+
+ 0%
+ Statements
+ 0/95
+
+
+
+
+ 0%
+ Branches
+ 0/1
+
+
+
+
+ 0%
+ Functions
+ 0/1
+
+
+
+
+ 0%
+ Lines
+ 0/95
+
+
+
+ + Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +
+ Filter:
+
+
+
+ | 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import React from 'react'; +import { IconButton } from '@contentful/f36-components'; +import { FieldAppSDK } from '@contentful/app-sdk'; +import get from 'lodash/get'; +import { SortableComponent } from '../ProductPreviews/SortableComponent'; +import { fetchProductPreviews } from '../../api/fetchProductPreviews'; +import logo from '../../logo.png'; +import { AppParameters, SAPParameters } from '../../interfaces'; +import { styles } from './Field.styles'; +import { ShoppingCartIcon } from '@contentful/f36-icons'; + +interface Props { + sdk: FieldAppSDK<AppParameters>; +} + +interface State { + value: string[]; + editingDisabled: boolean; +} + +function fieldValueToState(value?: string | string[]): string[] { + if (!value) { + return []; + } + return Array.isArray(value) ? value : [value]; +} + +function makeCTAText(fieldType: string) { + const isArray = fieldType === 'Array'; + const beingSelected = isArray ? 'products' : 'a product'; + return `Select ${beingSelected}`; +} + +export default class Field extends React.Component<Props, State> { + state = { + value: fieldValueToState(this.props.sdk.field.getValue()), + editingDisabled: true, + }; + + componentDidMount() { + this.props.sdk.window.startAutoResizer(); + + // Handle external changes (e.g. when multiple authors are working on the same entry). + this.props.sdk.field.onValueChanged((value?: string[] | string) => { + this.setState({ value: fieldValueToState(value) }); + }); + + // Disable editing (e.g. when field is not editable due to R&P). + this.props.sdk.field.onIsDisabledChanged((editingDisabled: boolean) => { + this.setState({ editingDisabled }); + }); + } + + updateStateValue = (skus: string[]) => { + this.setState({ value: skus }); + + if (skus.length > 0) { + const value = this.props.sdk.field.type === 'Array' ? skus : skus[0]; + this.props.sdk.field.setValue(value); + } else { + this.props.sdk.field.removeValue(); + } + }; + + onDialogOpen = async () => { + const { sdk } = this.props; + + const skus = await sdk.dialogs.openCurrentApp({ + allowHeightOverflow: true, + position: 'center', + title: makeCTAText(sdk.field.type), + shouldCloseOnOverlayClick: true, + shouldCloseOnEscapePress: true, + parameters: { + ...sdk.parameters.installation, + fieldValue: fieldValueToState(sdk.field.getValue()), + fieldType: sdk.field.type, + fieldId: sdk.field.id, + }, + width: 1400, + minHeight: 600, + }); + const result = Array.isArray(skus) ? skus : []; + + if (result.length) { + this.updateStateValue(result); + } + }; + + render = () => { + const { value: data, editingDisabled } = this.state; + + const hasItems = data.length > 0; + const fieldType = get(this.props, ['sdk', 'field', 'type'], ''); + + return ( + <> + {hasItems && ( + <div className={styles.sortable}> + <SortableComponent + sdk={this.props.sdk} + disabled={editingDisabled} + skus={data} + onChange={this.updateStateValue} + fetchProductPreviews={(skus) => + fetchProductPreviews(skus, this.props.sdk.parameters as SAPParameters) + } + /> + </div> + )} + <div className={styles.container}> + <img src={logo} alt="Logo" className={styles.logo} /> + <IconButton + variant="secondary" + icon={<ShoppingCartIcon size="small" variant="muted" />} + onClick={this.onDialogOpen} + aria-label={makeCTAText(fieldType)} + isDisabled={editingDisabled}> + {makeCTAText(fieldType)} + </IconButton> + </div> + </> + ); + }; +} + |
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/sap-commerce-cloud/coverage/src/components/ProductPreviews/SortableComponent.tsx.html b/apps/sap-commerce-cloud/coverage/src/components/ProductPreviews/SortableComponent.tsx.html
new file mode 100644
index 0000000000..de34fb686f
--- /dev/null
+++ b/apps/sap-commerce-cloud/coverage/src/components/ProductPreviews/SortableComponent.tsx.html
@@ -0,0 +1,502 @@
+
+
+
+
+
+
+
+
+ All files src/components/Field
+
+
+
+
+ 0%
+ Statements
+ 0/110
+
+
+
+
+ 0%
+ Branches
+ 0/2
+
+
+
+
+ 0%
+ Functions
+ 0/2
+
+
+
+
+ 0%
+ Lines
+ 0/110
+
+
+
+ + Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +
+ Filter:
+
+
+
+
+
+
+
+
+
+ | File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| Field.styles.ts | +
+
+ |
+ 0% | +0/15 | +0% | +0/1 | +0% | +0/1 | +0% | +0/15 | +
| Field.tsx | +
+
+ |
+ 0% | +0/95 | +0% | +0/1 | +0% | +0/1 | +0% | +0/95 | +
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/sap-commerce-cloud/coverage/src/components/ProductPreviews/SortableList.styles.ts.html b/apps/sap-commerce-cloud/coverage/src/components/ProductPreviews/SortableList.styles.ts.html
new file mode 100644
index 0000000000..731f1155db
--- /dev/null
+++ b/apps/sap-commerce-cloud/coverage/src/components/ProductPreviews/SortableList.styles.ts.html
@@ -0,0 +1,109 @@
+
+
+
+
+
+
+
+
+ All files / src/components/ProductPreviews SortableComponent.tsx
+
+
+
+
+ 80.45%
+ Statements
+ 70/87
+
+
+
+
+ 88.88%
+ Branches
+ 8/9
+
+
+
+
+ 100%
+ Functions
+ 3/3
+
+
+
+
+ 80.45%
+ Lines
+ 70/87
+
+
+
+ + Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +
+ Filter:
+
+
+
+ | 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 | 1x + + + + + + + + +1x + + + + + +1x + +1x +1x + +1x + + + + + + + + + + + + +1x +12x +12x +12x +12x + + + + + + +1x +9x + +9x +5x +9x + +9x +9x + +1x +9x +9x +9x +9x +9x +9x +9x +9x + +9x +4x +4x + +4x +4x +4x +4x +4x +4x + + +9x + + + + + + +9x +8x + +8x +4x +4x +9x + +9x +9x + + + + +9x +9x + +9x +9x + + + + + + + + + + + + + +9x +9x + +9x +9x +9x +9x +9x +9x +9x +9x +9x +9x + +9x +9x +9x +9x +9x +9x +9x +9x + +9x + | import { FC, useState, useEffect, useCallback, useRef } from 'react';
+import {
+ DndContext,
+ closestCenter,
+ KeyboardSensor,
+ PointerSensor,
+ useSensor,
+ useSensors,
+ DragEndEvent,
+} from '@dnd-kit/core';
+import {
+ arrayMove,
+ SortableContext,
+ sortableKeyboardCoordinates,
+ verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { FieldAppSDK } from '@contentful/app-sdk';
+import { mapSort } from '../../utils';
+import { SortableList } from './SortableList';
+import { Product, PreviewsFn } from '../../interfaces';
+import { isEqual } from 'lodash';
+
+interface Props {
+ sdk: FieldAppSDK;
+ disabled: boolean;
+ onChange: (skus: string[]) => void;
+ skus: string[];
+ fetchProductPreviews: PreviewsFn;
+}
+
+/**
+ * @description - helper function to compare two lists of skus for order agnostic equality
+ */
+const skusAreEqual = (prevSkus: string[], currentSkus: string[]): boolean => {
+ const sortedPreviousSkus = [...prevSkus].sort();
+ const sortedCurrentSkus = [...currentSkus].sort();
+ return !isEqual(sortedPreviousSkus, sortedCurrentSkus);
+};
+
+/**
+ * @description - hook to track previous version of skus prop
+ * @param skus - list of most current skus
+ * @returns previous list of skus
+ */
+const usePreviousSkus = (skus: string[]) => {
+ const skusRef = useRef<string[]>([]);
+
+ useEffect(() => {
+ skusRef.current = skus;
+ }, [skus]);
+
+ return skusRef.current;
+};
+
+export const SortableComponent: FC<Props> = ({
+ sdk,
+ disabled,
+ onChange,
+ skus,
+ fetchProductPreviews,
+}) => {
+ const [productPreviews, setProductPreviews] = useState<Product[]>([]);
+ const previousSkus = usePreviousSkus(skus);
+
+ const getProductPreviews = useCallback(async () => {
+ try {
+ const shouldRefetch = skusAreEqual([...previousSkus], [...skus]);
+
+ if (shouldRefetch) {
+ const productPreviewsUnsorted = await fetchProductPreviews(skus);
+ const sortedProductPreviews = mapSort(productPreviewsUnsorted, skus, 'productUrl');
+ setProductPreviews(sortedProductPreviews);
+ }
+ } catch (error) {
+ sdk.notifier.error('There was an error fetching the data for the selected products.');
+ }
+ }, [skus, fetchProductPreviews, setProductPreviews, sdk.notifier, previousSkus]);
+
+ /**
+ * @description - Compare previous list of skus (see `usePreviousSkus`) to the list of skus
+ * passed as a prop. If the previous & current skus differ (a sku was added/removed, order agnostic),
+ * then fetch/refetch associated productPreviews given list of skus.
+ */
+ useEffect(() => {
+ const shouldRefetch = skusAreEqual([...previousSkus], [...skus]);
+
+ if (shouldRefetch) {
+ getProductPreviews();
+ }
+ }, [skus, getProductPreviews, previousSkus]);
+
+ const deleteItem = useCallback(
+ (index: number) => {
+ const newSkus = [...skus];
+ newSkus.splice(index, 1);
+ onChange(newSkus);
+ },
+ [onChange, skus]
+ );
+
+ const handleDragEnd = useCallback(
+ (event: DragEndEvent) => {
+ const { active, over } = event;
+ console.log('active', active);
+ console.log('over', over);
+
+ if (active.id !== over?.id) {
+ const oldIndex = productPreviews.findIndex((product) => product.productUrl === active.id);
+ const newIndex = productPreviews.findIndex((product) => product.productUrl === over?.id);
+ const sortedProductPreviews: Product[] = arrayMove(productPreviews, oldIndex, newIndex);
+
+ onChange(sortedProductPreviews.map((p) => p.productUrl));
+ setProductPreviews(sortedProductPreviews);
+ }
+ },
+ [productPreviews, onChange, setProductPreviews]
+ );
+
+ const sensors = useSensors(
+ useSensor(PointerSensor, {
+ activationConstraint: {
+ distance: 8,
+ },
+ }),
+ useSensor(KeyboardSensor, {
+ coordinateGetter: sortableKeyboardCoordinates,
+ })
+ );
+
+ return (
+ <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+ <SortableContext
+ items={productPreviews.map((p) => p.productUrl)}
+ strategy={verticalListSortingStrategy}>
+ <SortableList disabled={disabled} productPreviews={productPreviews} deleteFn={deleteItem} />
+ </SortableContext>
+ </DndContext>
+ );
+};
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/sap-commerce-cloud/coverage/src/components/ProductPreviews/SortableList.tsx.html b/apps/sap-commerce-cloud/coverage/src/components/ProductPreviews/SortableList.tsx.html
new file mode 100644
index 0000000000..022a2e2f66
--- /dev/null
+++ b/apps/sap-commerce-cloud/coverage/src/components/ProductPreviews/SortableList.tsx.html
@@ -0,0 +1,175 @@
+
+
+
+
+
+
+
+
+ All files / src/components/ProductPreviews SortableList.styles.ts
+
+
+
+
+ 100%
+ Statements
+ 6/6
+
+
+
+
+ 100%
+ Branches
+ 0/0
+
+
+
+
+ 100%
+ Functions
+ 0/0
+
+
+
+
+ 100%
+ Lines
+ 6/6
+
+
+
+ + Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +
+ Filter:
+
+
+
+ | 1 +2 +3 +4 +5 +6 +7 +8 +9 | 1x + + +1x +1x +1x +1x +1x + | import { css } from 'emotion';
+import tokens from '@contentful/f36-tokens';
+
+export const styles = {
+ container: css({
+ marginRight: '0.4rem',
+ }),
+};
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/sap-commerce-cloud/coverage/src/components/ProductPreviews/SortableListItem.styles.ts.html b/apps/sap-commerce-cloud/coverage/src/components/ProductPreviews/SortableListItem.styles.ts.html
new file mode 100644
index 0000000000..39ba111ae4
--- /dev/null
+++ b/apps/sap-commerce-cloud/coverage/src/components/ProductPreviews/SortableListItem.styles.ts.html
@@ -0,0 +1,364 @@
+
+
+
+
+
+
+
+
+ All files / src/components/ProductPreviews SortableList.tsx
+
+
+
+
+ 100%
+ Statements
+ 19/19
+
+
+
+
+ 100%
+ Branches
+ 2/2
+
+
+
+
+ 50%
+ Functions
+ 1/2
+
+
+
+
+ 100%
+ Lines
+ 19/19
+
+
+
+ + Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +
+ Filter:
+
+
+
+ | 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 | 1x + +1x +1x + + + + + + + +1x +10x + +10x +10x +10x +5x +5x +5x +5x +5x +5x +5x +5x + +10x +10x + +10x + | import { FC } from 'react';
+import { DeleteFn, Product } from '../../interfaces';
+import { SortableListItem } from './SortableListItem';
+import { styles } from './SortableList.styles';
+
+export interface Props {
+ disabled: boolean;
+ productPreviews: Product[];
+ deleteFn: DeleteFn;
+}
+
+export const SortableList: FC<Props> = ({ disabled, deleteFn, productPreviews = [] }) => {
+ const itemsAreSortable = productPreviews.length > 1;
+
+ return (
+ <div className={styles.container}>
+ {productPreviews.map((product, index) => {
+ return (
+ <SortableListItem
+ disabled={disabled}
+ key={`${product.image}-${product.sku}`}
+ product={product}
+ onDelete={() => deleteFn(index)}
+ isSortable={itemsAreSortable}
+ />
+ );
+ })}
+ </div>
+ );
+};
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/sap-commerce-cloud/coverage/src/components/ProductPreviews/SortableListItem.tsx.html b/apps/sap-commerce-cloud/coverage/src/components/ProductPreviews/SortableListItem.tsx.html
new file mode 100644
index 0000000000..184d5f0459
--- /dev/null
+++ b/apps/sap-commerce-cloud/coverage/src/components/ProductPreviews/SortableListItem.tsx.html
@@ -0,0 +1,409 @@
+
+
+
+
+
+
+
+
+ All files / src/components/ProductPreviews SortableListItem.styles.ts
+
+
+
+
+ 100%
+ Statements
+ 90/90
+
+
+
+
+ 88.88%
+ Branches
+ 8/9
+
+
+
+
+ 100%
+ Functions
+ 2/2
+
+
+
+
+ 100%
+ Lines
+ 90/90
+
+
+
+ + Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +
+ Filter:
+
+
+
+ | 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 | 1x +1x + + +1x + +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +14x +14x +14x +14x +14x +14x +14x +14x +14x +14x +14x +14x +14x +14x +14x +14x +14x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +15x +15x +15x +15x +15x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x +1x + | import { css } from 'emotion';
+import tokens from '@contentful/f36-tokens';
+import { Product } from '../../interfaces';
+
+const IMAGE_SIZE = 48;
+
+export const styles = {
+ card: css({
+ display: 'flex',
+ padding: 0,
+ position: 'relative',
+ ':not(:first-of-type)': css({
+ marginTop: tokens.spacingXs,
+ }),
+ }),
+ imageWrapper: (imageHasLoaded: boolean) =>
+ css({
+ width: imageHasLoaded ? `${IMAGE_SIZE}px` : 0,
+ height: imageHasLoaded ? `${IMAGE_SIZE}px` : 0,
+ overflow: 'hidden',
+ margin: imageHasLoaded ? tokens.spacingM : 0,
+ position: 'relative',
+ '> img': css({
+ display: 'block',
+ height: `${IMAGE_SIZE}px`,
+ minWidth: 'auto',
+ userSelect: 'none',
+ position: 'absolute',
+ left: '50%',
+ top: '50%',
+ transform: 'translate(-50%, -50%)',
+ }),
+ }),
+ dragHandle: css({
+ height: 'auto',
+ }),
+ actions: css({
+ position: 'absolute',
+ top: tokens.spacingXs,
+ right: tokens.spacingXs,
+ a: css({
+ display: 'inline-block',
+ marginRight: tokens.spacingXs,
+ svg: css({
+ transition: `fill ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,
+ }),
+ '&:hover': {
+ svg: css({
+ fill: tokens.colorBlack,
+ }),
+ },
+ }),
+ }),
+ description: css({
+ flex: '1 0 auto',
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'center',
+ }),
+ heading: (product: Product) =>
+ css({
+ fontSize: tokens.fontSizeL,
+ marginBottom: product.isMissing || !product.name ? 0 : tokens.spacing2Xs,
+ ...(product.name && { textTransform: 'capitalize' }),
+ }),
+ subheading: css({
+ color: tokens.gray500,
+ fontSize: tokens.fontSizeS,
+ marginBottom: 0,
+ }),
+ skeletonImage: css({
+ width: `${IMAGE_SIZE}px`,
+ height: `${IMAGE_SIZE}px`,
+ padding: tokens.spacingM,
+ }),
+ errorImage: css({
+ backgroundColor: tokens.gray100,
+ borderRadius: '3px',
+ margin: tokens.spacingM,
+ width: `${IMAGE_SIZE}px`,
+ height: `${IMAGE_SIZE}px`,
+ position: 'relative',
+ svg: css({
+ fill: tokens.gray600,
+ width: '100%',
+ height: '50%',
+ position: 'absolute',
+ top: '50%',
+ left: '50%',
+ transform: 'translate(-50%, -50%)',
+ }),
+ }),
+};
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/sap-commerce-cloud/coverage/src/components/ProductPreviews/index.html b/apps/sap-commerce-cloud/coverage/src/components/ProductPreviews/index.html
new file mode 100644
index 0000000000..794bdd0ad1
--- /dev/null
+++ b/apps/sap-commerce-cloud/coverage/src/components/ProductPreviews/index.html
@@ -0,0 +1,176 @@
+
+
+
+
+
+
+
+
+ All files / src/components/ProductPreviews SortableListItem.tsx
+
+
+
+
+ 94.73%
+ Statements
+ 72/76
+
+
+
+
+ 73.33%
+ Branches
+ 11/15
+
+
+
+
+ 100%
+ Functions
+ 3/3
+
+
+
+
+ 94.73%
+ Lines
+ 72/76
+
+
+
+ + Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +
+ Filter:
+
+
+
+ | 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 | 1x +1x +1x + + + + + + + + + + + +1x +1x +1x +1x + + + + + + + + +1x + +1x +15x +15x + +15x +15x +15x + +15x +4x +4x +4x +4x +4x +11x + +15x +15x +15x +15x +15x +15x +15x +15x +15x +15x +15x +12x +12x +12x + +15x +1x +1x + + +1x + +1x + +15x +14x +14x +14x +14x +14x +14x +14x +14x +14x +14x + +15x +15x +15x +15x +15x +15x +15x + +15x +15x +15x +15x + + + + +15x +15x +15x +15x +15x +15x + +15x +15x +15x + +15x + | import { FC, useState } from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { Product } from '../../interfaces';
+import {
+ AssetIcon,
+ Badge,
+ Card,
+ Flex,
+ Heading,
+ IconButton,
+ SkeletonContainer,
+ SkeletonImage,
+ Subheading,
+} from '@contentful/f36-components';
+import tokens from '@contentful/f36-tokens';
+import { styles } from './SortableListItem.styles';
+import { CloseIcon, ErrorCircleIcon, ExternalLinkIcon } from '@contentful/f36-icons';
+
+export interface Props {
+ product: Product;
+ disabled: boolean;
+ onDelete: () => void;
+ isSortable: boolean;
+}
+
+const IMAGE_SIZE = 48;
+
+export const SortableListItem: FC<Props> = ({ product, disabled, onDelete, isSortable }: Props) => {
+ const [imageHasLoaded, setImageLoaded] = useState(false);
+ const [imageHasErrored, setImageHasErrored] = useState(false);
+
+ const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
+ id: product.productUrl,
+ });
+
+ const style = isSortable
+ ? {
+ transform: CSS.Transform.toString(transform),
+ transition,
+ marginTop: tokens.spacingS,
+ }
+ : { marginTop: tokens.spacingS };
+
+ return (
+ <div
+ ref={setNodeRef}
+ style={style}
+ key={product.id}
+ {...attributes}
+ {...listeners}
+ data-testid={`sortable-item-${product.id}`}>
+ <Card withDragHandle={isSortable} className={styles.card} data-testid="sortable-list-item">
+ <Flex>
+ {!imageHasLoaded && !imageHasErrored && (
+ <SkeletonContainer className={styles.skeletonImage}>
+ <SkeletonImage width={IMAGE_SIZE} height={IMAGE_SIZE} />
+ </SkeletonContainer>
+ )}
+ {imageHasErrored && (
+ <div className={styles.errorImage}>
+ {product.isMissing ? (
+ <ErrorCircleIcon data-testid="icon" />
+ ) : (
+ <AssetIcon data-testid="icon" />
+ )}
+ </div>
+ )}
+ {!imageHasErrored && (
+ <div className={styles.imageWrapper(imageHasLoaded)}>
+ <img
+ style={{ display: imageHasLoaded ? 'block' : 'none' }}
+ onLoad={() => setImageLoaded(true)}
+ onError={() => setImageHasErrored(true)}
+ src={product.image}
+ alt={product.name}
+ data-testid="image"
+ />
+ </div>
+ )}
+ <section className={styles.description}>
+ <Heading className={styles.heading(product)}>
+ {product.isMissing || !product.name ? product.sku : product.name}
+ </Heading>
+ {product.isMissing && <Badge variant="negative">Product missing</Badge>}
+ {!product.isMissing && product.name && (
+ <Subheading className={styles.subheading}>{product.sku}</Subheading>
+ )}
+ </section>
+ {!disabled && (
+ <div className={styles.actions}>
+ {product.externalLink && (
+ <a target="_blank" rel="noopener noreferrer" href={product.externalLink}>
+ <ExternalLinkIcon variant="muted" />
+ </a>
+ )}
+ <IconButton
+ icon={<CloseIcon variant="muted" />}
+ aria-label="Delete"
+ onClick={onDelete}
+ />
+ </div>
+ )}
+ </Flex>
+ </Card>
+ </div>
+ );
+};
+ |
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/sap-commerce-cloud/coverage/src/components/fields.ts.html b/apps/sap-commerce-cloud/coverage/src/components/fields.ts.html
new file mode 100644
index 0000000000..758c38f88e
--- /dev/null
+++ b/apps/sap-commerce-cloud/coverage/src/components/fields.ts.html
@@ -0,0 +1,346 @@
+
+
+
+
+
+
+
+
+ All files src/components/ProductPreviews
+
+
+
+
+ 92.44%
+ Statements
+ 257/278
+
+
+
+
+ 82.85%
+ Branches
+ 29/35
+
+
+
+
+ 90%
+ Functions
+ 9/10
+
+
+
+
+ 92.44%
+ Lines
+ 257/278
+
+
+
+ + Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +
+ Filter:
+
+
+
+
+
+
+
+
+
+ | File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| SortableComponent.tsx | +
+
+ |
+ 80.45% | +70/87 | +88.88% | +8/9 | +100% | +3/3 | +80.45% | +70/87 | +
| SortableList.styles.ts | +
+
+ |
+ 100% | +6/6 | +100% | +0/0 | +100% | +0/0 | +100% | +6/6 | +
| SortableList.tsx | +
+
+ |
+ 100% | +19/19 | +100% | +2/2 | +50% | +1/2 | +100% | +19/19 | +
| SortableListItem.styles.ts | +
+
+ |
+ 100% | +90/90 | +88.88% | +8/9 | +100% | +2/2 | +100% | +90/90 | +
| SortableListItem.tsx | +
+
+ |
+ 94.73% | +72/76 | +73.33% | +11/15 | +100% | +3/3 | +94.73% | +72/76 | +
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/sap-commerce-cloud/coverage/src/components/index.html b/apps/sap-commerce-cloud/coverage/src/components/index.html
new file mode 100644
index 0000000000..0599e45498
--- /dev/null
+++ b/apps/sap-commerce-cloud/coverage/src/components/index.html
@@ -0,0 +1,116 @@
+
+
+
+
+
+
+
+
+ All files / src/components fields.ts
+
+
+
+
+ 0%
+ Statements
+ 0/50
+
+
+
+
+ 0%
+ Branches
+ 0/1
+
+
+
+
+ 0%
+ Functions
+ 0/1
+
+
+
+
+ 0%
+ Lines
+ 0/50
+
+
+
+ + Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +
+ Filter:
+
+
+
+ | 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import get from 'lodash/get'; +import set from 'lodash/set'; + +interface FieldItems { + type: string; +} + +interface Field { + id: string; + name: string; + type: string; + items?: FieldItems; +} + +export interface ContentType { + sys: { id: string }; + name: string; + fields?: Field[]; +} + +interface Control { + fieldId: string; + widgetNamespace: string; + widgetId: string; +} + +export interface EditorInterface { + sys: { contentType: { sys: { id: string } } }; + controls?: Control[]; +} + +export type CompatibleFields = Record<string, Field[]>; +export type FieldsConfig = Record<string, Record<string, string | undefined> | undefined>; + +function isCompatibleField(field: Field): boolean { + return field.type === 'Symbol'; +} + +export function getCompatibleFields(contentTypes: ContentType[]): CompatibleFields { + return contentTypes.reduce((acc, ct) => { + return { + ...acc, + [ct.sys.id]: (ct.fields || []).filter(isCompatibleField), + }; + }, {}); +} + +export function editorInterfacesToSelectedFields( + eis: EditorInterface[], + fieldsConfig: FieldsConfig, + appId?: string +): FieldsConfig { + return eis.reduce((acc, ei) => { + const ctId = get(ei, ['sys', 'contentType', 'sys', 'id']); + const fieldIds = get(ei, ['controls'], []) + .filter((control) => control.widgetNamespace === 'app' && control.widgetId === appId) + .map((control) => control.fieldId) + .filter((fieldId) => typeof fieldId === 'string' && fieldId.length > 0); + + if (ctId && fieldIds.length > 0) { + const fields = fieldIds.reduce((acc, fieldId) => { + const type = get(fieldsConfig, [ctId, fieldId], 'product'); + set(acc, [fieldId], type); + return acc; + }, {}); + return { ...acc, [ctId]: fields }; + } else { + return acc; + } + }, {}); +} + +export function selectedFieldsToTargetState( + contentTypes: ContentType[], + selectedFields: FieldsConfig +) { + return { + EditorInterface: contentTypes.reduce((acc, ct) => { + const { id } = ct.sys; + const fields = Object.keys(selectedFields[id] || {}); + const targetState = + fields.length > 0 ? { controls: fields.map((fieldId) => ({ fieldId })) } : {}; + + return { ...acc, [id]: targetState }; + }, {}), + }; +} + |
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/sap-commerce-cloud/coverage/src/index.html b/apps/sap-commerce-cloud/coverage/src/index.html
new file mode 100644
index 0000000000..e8505ba737
--- /dev/null
+++ b/apps/sap-commerce-cloud/coverage/src/index.html
@@ -0,0 +1,161 @@
+
+
+
+
+
+
+
+
+ All files src/components
+
+
+
+
+ 0%
+ Statements
+ 0/50
+
+
+
+
+ 0%
+ Branches
+ 0/1
+
+
+
+
+ 0%
+ Functions
+ 0/1
+
+
+
+
+ 0%
+ Lines
+ 0/50
+
+
+
+ + Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +
+ Filter:
+
+
+
+
+
+
+
+
+
+ | File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| fields.ts | +
+
+ |
+ 0% | +0/50 | +0% | +0/1 | +0% | +0/1 | +0% | +0/50 | +
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/sap-commerce-cloud/coverage/src/index.tsx.html b/apps/sap-commerce-cloud/coverage/src/index.tsx.html
new file mode 100644
index 0000000000..73b3986495
--- /dev/null
+++ b/apps/sap-commerce-cloud/coverage/src/index.tsx.html
@@ -0,0 +1,289 @@
+
+
+
+
+
+
+
+
+ All files src
+
+
+
+
+ 16%
+ Statements
+ 12/75
+
+
+
+
+ 66.66%
+ Branches
+ 2/3
+
+
+
+
+ 50%
+ Functions
+ 2/4
+
+
+
+
+ 16%
+ Lines
+ 12/75
+
+
+
+ + Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +
+ Filter:
+
+
+
+
+
+
+
+
+
+ | File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| index.tsx | +
+
+ |
+ 0% | +0/58 | +0% | +0/1 | +0% | +0/1 | +0% | +0/58 | +
| interfaces.ts | +
+
+ |
+ 0% | +0/0 | +0% | +1/1 | +0% | +1/1 | +0% | +0/0 | +
| setupTests.ts | +
+
+ |
+ 100% | +2/2 | +100% | +0/0 | +100% | +0/0 | +100% | +2/2 | +
| utils.ts | +
+
+ |
+ 66.66% | +10/15 | +100% | +1/1 | +50% | +1/2 | +66.66% | +10/15 | +
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/sap-commerce-cloud/coverage/src/interfaces.ts.html b/apps/sap-commerce-cloud/coverage/src/interfaces.ts.html
new file mode 100644
index 0000000000..cdac104033
--- /dev/null
+++ b/apps/sap-commerce-cloud/coverage/src/interfaces.ts.html
@@ -0,0 +1,964 @@
+
+
+
+
+
+
+
+
+ All files / src index.tsx
+
+
+
+
+ 0%
+ Statements
+ 0/58
+
+
+
+
+ 0%
+ Branches
+ 0/1
+
+
+
+
+ 0%
+ Functions
+ 0/1
+
+
+
+
+ 0%
+ Lines
+ 0/58
+
+
+
+ + Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +
+ Filter:
+
+
+
+ | 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { createRoot } from 'react-dom/client'; + +import { init, locations, FieldAppSDK, DialogAppSDK, ConfigAppSDK } from '@contentful/app-sdk'; +import './index.css'; +import AppConfig from './AppConfig/AppConfig'; + +import Field from './components/Field/Field'; +import Dialog from './components/Dialog/Dialog'; +import { AppParameters } from './interfaces'; + +init(async (sdk) => { + const rootEl = document.getElementById('root'); + if (!rootEl) { + throw new Error('Root element not found'); + } + const root = createRoot(rootEl); + + const ComponentLocationSettings = [ + { + location: locations.LOCATION_APP_CONFIG, + component: ( + <AppConfig + sdk={sdk as ConfigAppSDK<AppParameters>} + name="SAP Commerce Cloud App" + description={` + The SAP Commerce Cloud app allows content creators to select products from their + SAP Commerce Cloud instance and reference them inside of Contentful entries.`} + logo="https://images.ctfassets.net/lpjm8d10rkpy/6pMn4nHfKoOZGwFFcqaqqe/70272257dc1d2d0bbcc3ebdde13a7358/1493030643828.svg" + color="212F3F" + parameterDefinitions={[ + { + id: 'apiEndpoint', + name: 'API Endpoint', + description: 'The API URL', + type: 'Symbol', + required: true, + }, + { + id: 'baseSites', + name: 'Base Sites', + description: + 'Include all base sites that you want to have available in the app. Separate each base site with a comma.', + type: 'Symbol', + required: true, + default: '', + }, + ]} + validateParameters={() => null} + /> + ), + }, + { + location: locations.LOCATION_ENTRY_FIELD, + component: <Field sdk={sdk as FieldAppSDK<AppParameters>} />, + }, + { + location: locations.LOCATION_DIALOG, + component: <Dialog sdk={sdk as DialogAppSDK<AppParameters>} />, + }, + ]; + + // Select a component depending on a location in which the app is rendered. + ComponentLocationSettings.forEach((componentLocationSetting) => { + if (sdk.location.is(componentLocationSetting.location)) { + root.render(componentLocationSetting.component); + } + }); +}); + |
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/sap-commerce-cloud/coverage/src/setupTests.ts.html b/apps/sap-commerce-cloud/coverage/src/setupTests.ts.html
new file mode 100644
index 0000000000..c065814666
--- /dev/null
+++ b/apps/sap-commerce-cloud/coverage/src/setupTests.ts.html
@@ -0,0 +1,100 @@
+
+
+
+
+
+
+
+
+ All files / src interfaces.ts
+
+
+
+
+ 0%
+ Statements
+ 0/0
+
+
+
+
+ 0%
+ Branches
+ 1/1
+
+
+
+
+ 0%
+ Functions
+ 1/1
+
+
+
+
+ 0%
+ Lines
+ 0/0
+
+
+
+ + Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +
+ Filter:
+
+
+
+ | 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { DialogExtensionSDK, FieldExtensionSDK, ParametersAPI } from '@contentful/app-sdk';
+import { FieldsConfig } from './components/fields';
+
+/**
+ * Object containing all information configured on the app configuration page.
+ */
+export type Config = Record<string, any>;
+
+/**
+ * Definition of app configuration parameters
+ */
+export interface ParameterDefinition {
+ /**
+ * Unique id. Used as key in Config object.
+ */
+ id: string;
+
+ /**
+ * Name / Label
+ */
+ name: string;
+
+ /**
+ * Short description/explanation
+ */
+ description: string;
+
+ /**
+ * Default value
+ */
+ default?: any;
+
+ /**
+ * Parameter type
+ * - Symbol: Text
+ * - List: List of texts
+ * - Number: Integer
+ */
+ type: 'Symbol' | 'List' | 'Number';
+
+ /**
+ * Whether it is possible without providing a value.
+ */
+ required: boolean;
+}
+
+export type AppParameters = {
+ apiEndpoint: string;
+ baseSites: string;
+};
+
+export interface SAPParameters extends ParametersAPI<AppParameters, {}, {}> {
+ installation: {
+ apiEndpoint: string;
+ baseSites: string;
+ };
+}
+
+export interface Response {
+ products: Product[];
+ errors: Error[];
+}
+
+export interface Product {
+ sku: string;
+ image: string;
+ id: string;
+ name: string;
+ externalLink?: string;
+ isMissing?: boolean;
+ productUrl: string;
+}
+
+export interface Error {
+ message: string;
+ type: string;
+}
+
+export interface Pagination {
+ offset: number;
+ total: number;
+ count: number;
+ limit: number;
+ hasNextPage?: boolean;
+}
+
+interface ProductsFnResponse {
+ pagination: Pagination;
+ products: Product[];
+}
+
+export type ProductsFn = (
+ search: string,
+ pagination?: Partial<Pagination>
+) => Promise<ProductsFnResponse>;
+
+/**
+ * Returns the text that is displayed on the button in the field location.
+ *
+ * @param fieldType Type of the field the app is used for.
+ * @returns Text that should be displayed on the button
+ */
+export type MakeCTAFn = (fieldType: string) => string;
+
+/**
+ * Custom code that validates installation parameters that is run before saving.
+ *
+ * @param parameters Object containg the entered parameters.
+ * @returns `string` containing an error message. `null` if the parameters are valid.
+ */
+export type ValidateParametersFn = (parameters: Record<string, string>) => string | null;
+
+/**
+ * Function that returns a list for a given list of skus. The returned value is used to render a product preview.
+ *
+ * @param skus List of skus
+ * @param config App configuration
+ * @returns List of Products which is used to render a preview.
+ */
+export type ProductPreviewsFn = (skus: string[], config: Config) => Promise<Product[]>;
+export type DeleteFn = (index: number) => void;
+
+/**
+ * Function that gets called within the Iframe when the app is rendered in a dialog location.
+ *
+ * @example
+ * ```javascript
+ * function renderDialog(sdk) {
+ * const config = sdk.parameters.invocation;
+ *
+ * const container = document.createElement('div');
+ * container.innerHTML = `<iframe src="https://example.com/dam?folder=${config.folder}" width="400" height="650" style="border:none;"/>`;
+ * document.body.appendChild(container);
+ * }
+ * ```
+ *
+ * @param sdk [DialogExtensionSDK](https://www.contentful.com/developers/docs/extensibility/app-framework/sdk/)
+ */
+export type RenderDialogFn = (sdk: DialogExtensionSDK) => void;
+
+/**
+ * Function that gets called when app wants to open a dialog. Should return an updated list of skus as a Promise.
+ *
+ * You probably want to call [`sdk.openCurrentApp`](https://www.contentful.com/developers/docs/extensibility/app-framework/sdk/#open-the-current-app-in-a-dialog).
+ *
+ * @example
+ * ```javascript
+ * async function openDialog(sdk, currentValue, config) {
+ * return await sdk.dialogs.openCurrentApp({
+ * parameters: { config, currentValue },
+ * });
+ * }
+ *
+ * ```
+ *
+ * @param sdk [FieldExtensionSDK](https://www.contentful.com/developers/docs/extensibility/app-framework/sdk/)
+ * @param currentValue List of currently selected akus
+ * @param config App configuration
+ * @returns Promise containing a list of selected skus
+ */
+export type OpenDialogFn = (
+ sdk: FieldExtensionSDK,
+ currentValue: string[] | string,
+ config: Config
+) => Promise<string[]>;
+
+/**
+ * Function that should return true when the button should be disabled.
+ *
+ * @param currentValue Currently selected skus
+ * @param config App configuration
+ * @returns true, if the button in the field location should be disabled. false, if the button should be enabled
+ */
+export type DisabledPredicateFn = (currentValue: string[], config: Config) => boolean;
+
+export interface Integration {
+ /**
+ * Returns the text that is displayed on the button in the field location.
+ *
+ * @param fieldType Type of the field the app is used for.
+ * @returns Text that should be displayed on the button
+ */
+ makeCTA: MakeCTAFn;
+
+ /**
+ * Name of the app
+ */
+ name: string;
+
+ /**
+ * Path to the app's logo
+ */
+ logo: string;
+
+ /**
+ * The app's primary color
+ */
+ color: string;
+
+ /**
+ * Short description of the app
+ */
+ description: string;
+
+ /**
+ * Parameter definition which can be customized on the app configuration page and used in the callback functions.
+ */
+ parameterDefinitions: ParameterDefinition[];
+
+ /**
+ * Custom code that validates installation parameters that is run before saving.
+ *
+ * @param parameters Object containg the entered parameters.
+ * @returns `string` containing an error message. `null` if the parameters are valid.
+ */
+ validateParameters: ValidateParametersFn;
+
+ /**
+ * Function that returns a list for a given list of skus. The returned value is used to render a product preview.
+ *
+ * @param skus List of skus
+ * @param config App configuration
+ * @returns List of Products which is used to render a preview.
+ */
+ fetchProductPreviews: ProductPreviewsFn;
+
+ /**
+ * Function that gets called within the Iframe when the app is rendered in a dialog location.
+ *
+ * @example
+ * ```javascript
+ * function renderDialog(sdk) {
+ * const config = sdk.parameters.invocation;
+ *
+ * const container = document.createElement('div');
+ * container.innerHTML = `<iframe src="https://example.com/dam?folder=${config.folder}" width="400" height="650" style="border:none;"/>`;
+ * document.body.appendChild(container);
+ * }
+ * ```
+ *
+ * @param sdk [DialogExtensionSDK](https://www.contentful.com/developers/docs/extensibility/app-framework/sdk/)
+ */
+ renderDialog: RenderDialogFn;
+
+ /**
+ * Function that gets called when app wants to open a dialog. Should return an updated list of skus as a Promise.
+ *
+ * You probably want to call [`sdk.openCurrentApp`](https://www.contentful.com/developers/docs/extensibility/app-framework/sdk/#open-the-current-app-in-a-dialog).
+ *
+ * @example
+ * ```javascript
+ * async function openDialog(sdk, currentValue, config) {
+ * return await sdk.dialogs.openCurrentApp({
+ * parameters: { config, currentValue },
+ * });
+ * }
+ * ```
+ *
+ * @param sdk [FieldExtensionSDK](https://www.contentful.com/developers/docs/extensibility/app-framework/sdk/)
+ * @param currentValue Array of currently selected skus
+ * @param config App configuration
+ * @returns Promise containing a list of selected assets
+ */
+ openDialog: OpenDialogFn;
+
+ /**
+ * Function that should return true when the button should be disabled.
+ *
+ * @param currentValue Currently selected assets
+ * @param config App configuration
+ * @returns true, if the button in the field location should be disabled. false, if the button should be enabled
+ */
+ isDisabled: DisabledPredicateFn;
+}
+
+export type Hash = Record<string, any>;
+
+export interface ConfigurationParameters {
+ projectKey?: string;
+ clientId?: string;
+ clientSecret?: string;
+ apiEndpoint?: string;
+ authApiEndpoint?: string;
+ locale?: string;
+ fieldsConfig?: FieldsConfig;
+ baseSites?: string;
+}
+
+export type PreviewsFn = (skus: string[]) => Promise<Product[]>;
+
+export type CheckBoxFn = (event: any) => void;
+
+export type UpdateTotalPagesFn = (totalPages: number) => void;
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/sap-commerce-cloud/coverage/src/utils.ts.html b/apps/sap-commerce-cloud/coverage/src/utils.ts.html
new file mode 100644
index 0000000000..22b24b4c56
--- /dev/null
+++ b/apps/sap-commerce-cloud/coverage/src/utils.ts.html
@@ -0,0 +1,172 @@
+
+
+
+
+
+
+
+
+ All files / src setupTests.ts
+
+
+
+
+ 100%
+ Statements
+ 2/2
+
+
+
+
+ 100%
+ Branches
+ 0/0
+
+
+
+
+ 100%
+ Functions
+ 0/0
+
+
+
+
+ 100%
+ Lines
+ 2/2
+
+
+
+ + Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +
+ Filter:
+
+
+
+ | 1 +2 +3 +4 +5 +6 | 1x + + + +1x + | // jest-dom adds custom jest matchers for asserting on DOM nodes. +// allows you to do things like: +// expect(element).toHaveTextContent(/react/i) +// learn more: https://github.com/testing-library/jest-dom +import '@testing-library/jest-dom'; + |
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/sap-commerce-cloud/frontend/src/AppConfig/FieldSelector.spec.tsx b/apps/sap-commerce-cloud/frontend/src/AppConfig/FieldSelector.spec.tsx
new file mode 100644
index 0000000000..026e0e39ba
--- /dev/null
+++ b/apps/sap-commerce-cloud/frontend/src/AppConfig/FieldSelector.spec.tsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import FieldSelector from './FieldSelector';
+import { vi, describe, it, expect } from 'vitest';
+
+const contentTypes = [
+ {
+ sys: { id: 'ct1' },
+ name: 'Content Type 1',
+ },
+ {
+ sys: { id: 'ct2' },
+ name: 'Content Type 2',
+ },
+];
+
+const compatibleFields = {
+ ct1: [
+ { id: 'field1', name: 'Field 1', type: 'Symbol' },
+ { id: 'field2', name: 'Field 2', type: 'Symbol' },
+ ],
+ ct2: [
+ { id: 'field3', name: 'Field 3', type: 'Symbol' },
+ { id: 'field4', name: 'Field 4', type: 'Symbol' },
+ ],
+};
+
+const selectedFields = {
+ ct1: ['field1'],
+ ct2: [],
+};
+
+describe('FieldSelector', () => {
+ it('renders content types and fields correctly', () => {
+ render(
+
+
+
+ All files / src utils.ts
+
+
+
+
+ 66.66%
+ Statements
+ 10/15
+
+
+
+
+ 100%
+ Branches
+ 1/1
+
+
+
+
+ 50%
+ Functions
+ 1/2
+
+
+
+
+ 66.66%
+ Lines
+ 10/15
+
+
+
+ + Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +
+ Filter:
+
+
+
+ | 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 | + + + + + +1x +4x +4x +4x +4x +4x + + + +4x +4x +4x + + + + + + + + +1x + + + | import { Product } from './interfaces';
+/**
+ * Used to sort fetched products previews in the same
+ * order that the SKUs were added to the field value.
+ * @see https://gist.github.com/ecarter/1423674
+ */
+export const mapSort = <T extends Product, K extends keyof T>(
+ array: T[],
+ order: (T[K] | string)[],
+ key: K
+): T[] => {
+ const sorted = array.slice().sort((a, b) => {
+ const A = a[key];
+ const B = b[key];
+ return order.indexOf(A) > order.indexOf(B) ? 1 : -1;
+ });
+ return sorted;
+};
+
+/**
+ * Formats the product url saved to the field for the given sku
+ * @param sku
+ * @param apiEndpoint
+ * @param baseSite
+ * @returns string
+ */
+export const formatProductUrl = (apiEndpoint: string, baseSite: string, sku: string): string => {
+ return `${apiEndpoint}/occ/v2/${baseSite}/products/${sku}`;
+};
+ |
+
+
+
+`;
+
+exports[`Dialog > renders correctly and matches snapshot 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
diff --git a/apps/sap-commerce-cloud/frontend/src/components/Dialog/__snapshots__/ProductList.spec.tsx.snap b/apps/sap-commerce-cloud/frontend/src/components/Dialog/__snapshots__/ProductList.spec.tsx.snap
new file mode 100644
index 0000000000..7a83c49474
--- /dev/null
+++ b/apps/sap-commerce-cloud/frontend/src/components/Dialog/__snapshots__/ProductList.spec.tsx.snap
@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ProductList > renders 1`] = ``;
diff --git a/apps/sap-commerce-cloud/frontend/src/components/Field/Field.spec.tsx b/apps/sap-commerce-cloud/frontend/src/components/Field/Field.spec.tsx
new file mode 100644
index 0000000000..cd949ff83d
--- /dev/null
+++ b/apps/sap-commerce-cloud/frontend/src/components/Field/Field.spec.tsx
@@ -0,0 +1,90 @@
+import { FieldAppSDK } from '@contentful/app-sdk';
+import Field from './Field';
+import { render } from '@testing-library/react';
+import { AppParameters } from '../../interfaces';
+import { vi } from 'vitest';
+
+describe('Field', () => {
+ it('should render', () => {
+ const { container } = render(
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ | + Select + | ++ Code + | ++ Name + | ++ Image + | +
|---|---|---|---|
|
+
+
+
+ |
+ + P1 + | ++ Product 1 + | +
+ 
+ |
+
|
+
+
+
+ |
+ + P2 + | ++ Product 2 + | +
+ 
+ |
+
+
+
+
+
+`;
+
+exports[`Field > should render correctly 1`] = `
+
+ 
+
+
+
+
+
+
+`;
diff --git a/apps/sap-commerce-cloud/frontend/src/components/fields.spec.tsx b/apps/sap-commerce-cloud/frontend/src/components/fields.spec.tsx
new file mode 100644
index 0000000000..fa8a768903
--- /dev/null
+++ b/apps/sap-commerce-cloud/frontend/src/components/fields.spec.tsx
@@ -0,0 +1,89 @@
+import {
+ getCompatibleFields,
+ selectedFieldsToTargetState,
+ editorInterfacesToSelectedFields,
+} from './fields';
+
+describe('getCompatibleFields', () => {
+ it('should return compatible fields', () => {
+ const contentTypes = [
+ {
+ sys: { id: 'ct1' },
+ name: 'ct1',
+ fields: [
+ { id: 'f1', name: 'f1', type: 'Symbol' },
+ { id: 'f2', name: 'f2', type: 'Array', items: { type: 'Symbol' } },
+ { id: 'f3', name: 'f3', type: 'Array', items: { type: 'Link' } },
+ { id: 'f4', name: 'f4', type: 'Link' },
+ ],
+ },
+ {
+ sys: { id: 'ct2' },
+ name: 'ct2',
+ fields: [
+ { id: 'f5', name: 'f5', type: 'Symbol' },
+ { id: 'f6', name: 'f6', type: 'Array', items: { type: 'Symbol' } },
+ ],
+ },
+ ];
+
+ const result = getCompatibleFields(contentTypes);
+
+ expect(result).toEqual({
+ ct1: [{ id: 'f1', name: 'f1', type: 'Symbol' }],
+ ct2: [{ id: 'f5', name: 'f5', type: 'Symbol' }],
+ });
+ });
+});
+
+describe('editorInterfacesToSelectedFields', () => {
+ it('should return selected fields', () => {
+ const editorInterfaces = [
+ {
+ sys: { contentType: { sys: { id: 'ct1' } } },
+ controls: [
+ { fieldId: 'f1', widgetNamespace: 'app', widgetId: 'widget1' },
+ { fieldId: 'f2', widgetNamespace: 'app', widgetId: 'widget1' },
+ ],
+ },
+ {
+ sys: { contentType: { sys: { id: 'ct2' } } },
+ controls: [
+ { fieldId: 'f3', widgetNamespace: 'app', widgetId: 'widget1' },
+ { fieldId: 'f4', widgetNamespace: 'app', widgetId: 'widget1' },
+ ],
+ },
+ ];
+
+ const result = editorInterfacesToSelectedFields(editorInterfaces, {});
+
+ expect(result).toEqual({});
+ });
+});
+
+describe('selectedFieldsToTargetState', () => {
+ it('should return target state', () => {
+ const selectedFields = [
+ { ctId: 'ct1', fieldId: 'f1', sys: { id: 'f1' }, name: '' },
+ { ctId: 'ct1', fieldId: 'f2', sys: { id: 'f2' }, name: '' },
+ { ctId: 'ct2', fieldId: 'f3', sys: { id: 'f3' }, name: '' },
+ { ctId: 'ct2', fieldId: 'f4', sys: { id: 'f4' }, name: '' },
+ ];
+
+ const compatibleFields = {
+ ct1: {},
+ ct2: {},
+ };
+
+ const result = selectedFieldsToTargetState(selectedFields, compatibleFields);
+
+ expect(result).toEqual({
+ EditorInterface: {
+ f1: {},
+ f2: {},
+ f3: {},
+ f4: {},
+ },
+ });
+ });
+});
diff --git a/apps/sap-commerce-cloud/frontend/src/index.spec.tsx b/apps/sap-commerce-cloud/frontend/src/index.spec.tsx
new file mode 100644
index 0000000000..497b83eb6a
--- /dev/null
+++ b/apps/sap-commerce-cloud/frontend/src/index.spec.tsx
@@ -0,0 +1,55 @@
+import { vi } from 'vitest';
+import { locations } from '@contentful/app-sdk';
+import AppConfig from './AppConfig/AppConfig';
+
+let renderMock: any;
+
+vi.mock('@contentful/app-sdk', () => ({
+ init: vi.fn((cb) => {
+ const sdk = {
+ location: {
+ is: vi.fn((location) => location === mockLocation),
+ },
+ };
+ cb(sdk);
+ }),
+ locations: {
+ LOCATION_APP_CONFIG: 'app-config',
+ LOCATION_ENTRY_FIELD: 'entry-field',
+ LOCATION_DIALOG: 'dialog',
+ },
+}));
+
+let mockLocation: any = locations.LOCATION_APP_CONFIG;
+
+document.body.innerHTML = '';
+
+describe('index.tsx', () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ mockLocation = locations.LOCATION_APP_CONFIG;
+
+ renderMock = vi.fn();
+ vi.doMock('react-dom/client', () => ({
+ createRoot: vi.fn().mockReturnValue({
+ render: renderMock,
+ }),
+ }));
+ });
+
+ it('renders AppConfig component when location is LOCATION_APP_CONFIG', async () => {
+ await import('./index');
+
+ expect(renderMock).toHaveBeenCalledWith(
+
+
+
+
+
+
+
+
+
+
+
+