@adobedjangir/commerce-admin-management 0.0.2

package/web/index.js

@@ -0,0 +1,7 @@
+/*
+Copyright 2025 Adobe. All rights reserved.
+Licensed under the Apache License, Version 2.0
+*/
+
+import './dist/index.css'
+export * from './dist/index.js'

package/web/src/components/App.js

@@ -0,0 +1,54 @@
+/*
+Copyright 2025 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+*/
+
+import React from 'react'
+import { Provider, lightTheme } from '@adobe/react-spectrum'
+import { ErrorBoundary } from 'react-error-boundary'
+import { Route, Routes, HashRouter } from 'react-router-dom'
+import ExtensionRegistration from './ExtensionRegistration'
+
+function App (props) {
+  props.runtime.on('configuration', ({ imsOrg, imsToken }) => {
+    console.log('configuration change', { imsOrg, imsToken })
+  })
+
+  return (
+    <ErrorBoundary onError={onError} FallbackComponent={fallbackComponent}>
+      <HashRouter>
+        <Provider
+          theme={lightTheme}
+          colorScheme="light"
+          UNSAFE_className="sm-provider"
+        >
+          <Routes>
+            {/* Catch-all: every hash path renders the same shell. MainPage's
+                nav registry (getNavItems/getPageComponent) reads
+                location.pathname and chooses which page component to mount,
+                so React-Router only needs one route here. */}
+            <Route
+              path="*"
+              element={<ExtensionRegistration runtime={props.runtime} ims={props.ims} />}
+            />
+          </Routes>
+        </Provider>
+      </HashRouter>
+    </ErrorBoundary>
+  )
+
+  function onError (e, componentStack) {}
+
+  function fallbackComponent ({ componentStack, error }) {
+    return (
+      <React.Fragment>
+        <h1 style={{ textAlign: 'center', marginTop: '20px' }}>Something went wrong :(</h1>
+        <pre>{componentStack + '\n' + error.message}</pre>
+      </React.Fragment>
+    )
+  }
+}
+
+export default App

package/web/src/components/AppSectionNav.js

@@ -0,0 +1,49 @@
+/*
+Copyright 2025 Adobe. All rights reserved.
+Licensed under the Apache License, Version 2.0
+*/
+
+import { useLocation, useNavigate } from 'react-router-dom'
+import { getNavItems } from '../settings'
+import { getNavIcon } from '../nav-icons'
+
+/**
+ * Top-level navigation. Driven entirely by nav.json + configureWeb({ extraNav }).
+ * To add a tab: register a page in pages/ and add a matching entry to nav.json
+ * (or pass it via host configureWeb).
+ */
+export default function AppSectionNav ({ rightSlot } = {}) {
+  const navigate = useNavigate()
+  const location = useLocation()
+  const items = getNavItems()
+  const activeKey = items.some((it) => it.path === location.pathname)
+    ? location.pathname
+    : (items[0] && items[0].path) || '/'
+
+  return (
+    <div className="sm-tab-bar">
+      <div className="sm-tab-bar__track" role="tablist" aria-label="Application sections">
+        {items.map(({ id, path, label, icon }) => {
+          const Icon = getNavIcon(icon)
+          const active = path === activeKey
+          return (
+            <button
+              key={id}
+              type="button"
+              role="tab"
+              aria-selected={active}
+              className={`sm-tab${active ? ' is-active' : ''}`}
+              onClick={() => { if (!active) navigate(path) }}
+            >
+              <span className="sm-tab__icon">
+                <Icon size="XS" />
+              </span>
+              {label}
+            </button>
+          )
+        })}
+      </div>
+      {rightSlot ? <div className="sm-tab-bar__actions">{rightSlot}</div> : null}
+    </div>
+  )
+}

package/web/src/components/CommerceSetupWizard.js

@@ -0,0 +1,160 @@
+/*
+Copyright 2025 Adobe. All rights reserved.
+Licensed under the Apache License, Version 2.0
+*/
+
+import React, { useState } from 'react'
+import {
+  View,
+  Flex,
+  Heading,
+  Text,
+  TextField,
+  Button,
+  ButtonGroup,
+  ProgressCircle,
+  StatusLight,
+  Divider,
+  Form
+} from '@adobe/react-spectrum'
+import { callAction } from '../utils'
+import { getActionKey } from '../settings'
+
+const FIELD_DEFS = [
+  { key: 'baseUrl',           label: 'Commerce base URL',           placeholder: 'https://store.example.com/', type: 'text' },
+  { key: 'consumerKey',       label: 'Consumer key',                placeholder: '',                            type: 'text' },
+  { key: 'consumerSecret',    label: 'Consumer secret',             placeholder: '',                            type: 'password' },
+  { key: 'accessToken',       label: 'Access token',                placeholder: '',                            type: 'text' },
+  { key: 'accessTokenSecret', label: 'Access token secret',         placeholder: '',                            type: 'password' }
+]
+
+const EMPTY = FIELD_DEFS.reduce((a, f) => { a[f.key] = ''; return a }, {})
+
+/**
+ * First-run wizard for Adobe Commerce REST connection.
+ *
+ * Props:
+ *   runtime, ims        — passed through to callAction
+ *   initial             — masked saved values (used to prefill the URL when "Reconfigure")
+ *   onCompleted()       — called after a successful save; parent should refetch status
+ *   onCancel?()         — only rendered when present (Reconfigure mode)
+ */
+export default function CommerceSetupWizard ({ runtime, ims, initial, onCompleted, onCancel }) {
+  const [values, setValues] = useState(() => ({
+    ...EMPTY,
+    ...(initial && initial.baseUrl ? { baseUrl: initial.baseUrl } : {})
+  }))
+  const [testState, setTestState] = useState({ status: 'idle', message: '' })
+  const [saveState, setSaveState] = useState({ status: 'idle', message: '' })
+
+  const set = (k) => (v) => setValues((prev) => ({ ...prev, [k]: v }))
+
+  const allFilled = FIELD_DEFS.every((f) => String(values[f.key] || '').trim() !== '')
+
+  async function handleTest () {
+    setTestState({ status: 'running', message: 'Testing connection…' })
+    try {
+      const res = await callAction(
+        { runtime, ims },
+        getActionKey('commerceConnectionTest'),
+        '',
+        values
+      )
+      const body = res && res.body ? res.body : res
+      if (body && body.ok) {
+        setTestState({ status: 'ok', message: body.message || 'Connection OK' })
+      } else {
+        setTestState({ status: 'fail', message: (body && body.message) || 'Connection failed' })
+      }
+    } catch (e) {
+      setTestState({ status: 'fail', message: e.message || 'Connection failed' })
+    }
+  }
+
+  async function handleSave () {
+    setSaveState({ status: 'running', message: 'Saving…' })
+    try {
+      const res = await callAction(
+        { runtime, ims },
+        getActionKey('commerceConnectionSave'),
+        '',
+        values
+      )
+      const body = res && res.body ? res.body : res
+      if (body && body.ok && body.saved) {
+        setSaveState({ status: 'ok', message: 'Saved. Loading the rest of the app…' })
+        // Hand off to parent — it should refetch status and unmount the wizard.
+        if (typeof onCompleted === 'function') onCompleted(body)
+      } else {
+        setSaveState({ status: 'fail', message: (body && body.message) || 'Save failed' })
+      }
+    } catch (e) {
+      setSaveState({ status: 'fail', message: e.message || 'Save failed' })
+    }
+  }
+
+  const testLight = testState.status === 'ok' ? 'positive'
+    : testState.status === 'fail' ? 'negative'
+    : testState.status === 'running' ? 'notice'
+    : 'neutral'
+
+  return (
+    <View padding="size-400" maxWidth="size-6000" margin="0 auto">
+      <Heading level={2}>Connect to Adobe Commerce</Heading>
+      <Text>
+        Enter the REST/OAuth credentials for your Commerce instance. They are encrypted before
+        being saved to App Builder Database. The rest of the app stays disabled until the
+        connection is verified.
+      </Text>
+      <Divider size="S" marginY="size-300" />
+
+      <Form isRequired necessityIndicator="icon" labelPosition="top">
+        {FIELD_DEFS.map((f) => (
+          <TextField
+            key={f.key}
+            label={f.label}
+            placeholder={f.placeholder}
+            type={f.type === 'password' ? 'password' : 'text'}
+            value={values[f.key]}
+            onChange={set(f.key)}
+            autoComplete="off"
+            isRequired
+            width="100%"
+          />
+        ))}
+      </Form>
+
+      <View marginTop="size-300">
+        <Flex alignItems="center" gap="size-200" wrap>
+          <ButtonGroup>
+            <Button variant="secondary" onPress={handleTest} isDisabled={!allFilled || testState.status === 'running'}>
+              {testState.status === 'running' ? 'Testing…' : 'Test connection'}
+            </Button>
+            <Button
+              variant="cta"
+              onPress={handleSave}
+              isDisabled={!allFilled || testState.status === 'running' || saveState.status === 'running'}
+            >
+              {saveState.status === 'running' ? 'Saving…' : 'Save & continue'}
+            </Button>
+            {onCancel ? (
+              <Button variant="secondary" onPress={onCancel}>Cancel</Button>
+            ) : null}
+          </ButtonGroup>
+          {testState.status !== 'idle' && (
+            <Flex alignItems="center" gap="size-100">
+              {testState.status === 'running' && <ProgressCircle size="S" isIndeterminate aria-label="Testing" />}
+              <StatusLight variant={testLight}>{testState.message}</StatusLight>
+            </Flex>
+          )}
+        </Flex>
+        {saveState.status === 'fail' && (
+          <View marginTop="size-150"><StatusLight variant="negative">{saveState.message}</StatusLight></View>
+        )}
+        {saveState.status === 'ok' && (
+          <View marginTop="size-150"><StatusLight variant="positive">{saveState.message}</StatusLight></View>
+        )}
+      </View>
+    </View>
+  )
+}

package/web/src/components/ExtensionRegistration.js

@@ -0,0 +1,33 @@
+/*
+Copyright 2025 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { register } from '@adobe/uix-guest'
+import { MainPage } from './MainPage'
+import { useEffect } from 'react'
+import { getExtensionId } from '../settings'
+
+export default function ExtensionRegistration(props) {
+
+  useEffect(() => {
+    (async () => {
+
+      await register({
+        id: getExtensionId(),
+        methods: {
+        }
+      })
+
+    })()
+  }, [])
+
+  return <MainPage ims={props.ims} runtime={props.runtime} />
+}

package/web/src/components/MainPage.js

@@ -0,0 +1,147 @@
+/*
+Copyright 2025 Adobe. All rights reserved.
+Licensed under the Apache License, Version 2.0
+*/
+
+import { View, Flex, ProgressCircle, Text, Button, IllustratedMessage, Heading } from '@adobe/react-spectrum'
+import { attach } from '@adobe/uix-guest'
+import React, { useEffect, useState, useCallback } from 'react'
+import { ErrorBoundary } from 'react-error-boundary'
+import { useLocation } from 'react-router-dom'
+import { getExtensionId, getActionKey, getNavItems, getPageComponent } from '../settings'
+import { callAction } from '../utils'
+import AppSectionNav from './AppSectionNav'
+import CommerceSetupWizard from './CommerceSetupWizard'
+
+export const MainPage = props => {
+  const location = useLocation()
+
+  // Commerce connection gate. `status === 'unknown'` while we're loading,
+  // 'configured' / 'unconfigured' after the first probe. `reconfiguring`
+  // re-shows the wizard for an already-configured connection.
+  const [status, setStatus] = useState('unknown')
+  const [maskedCreds, setMaskedCreds] = useState(null)
+  const [error, setError] = useState(null)
+  const [reconfiguring, setReconfiguring] = useState(false)
+
+  const fetchStatus = useCallback(async () => {
+    try {
+      const res = await callAction(
+        props,
+        getActionKey('commerceConnectionStatus'),
+        '',
+        { fresh: true }
+      )
+      const body = res && res.body ? res.body : res
+      setMaskedCreds(body && body.creds ? body.creds : null)
+      setStatus(body && body.configured ? 'configured' : 'unconfigured')
+      setError(null)
+    } catch (e) {
+      setError(e.message || 'Failed to load Commerce connection status')
+      setStatus('error')
+    }
+  }, [props])
+
+  useEffect(() => {
+    // Kick off connection-status check immediately — the action is configured
+    // with require-adobe-auth: false, so it doesn't need an IMS token. The
+    // IMS handshake runs in parallel and is best-effort: in raw localhost
+    // (outside the Experience Cloud Shell iframe) `attach()` would hang
+    // forever waiting for a parent that isn't there, so we time it out.
+    fetchStatus()
+
+    if (props.ims.token) return
+    let cancelled = false
+    const handshake = Promise.race([
+      attach({ id: getExtensionId() }).then((gc) => ({
+        token: gc?.sharedContext?.get('imsToken'),
+        org: gc?.sharedContext?.get('imsOrgId')
+      })),
+      new Promise((resolve) => setTimeout(() => resolve(null), 2000))
+    ])
+    handshake.then((res) => {
+      if (cancelled || !res) return
+      if (res.token) props.ims.token = res.token
+      if (res.org) props.ims.org = res.org
+    }).catch(() => {})
+    return () => { cancelled = true }
+  }, [fetchStatus])
+
+  if (status === 'unknown') {
+    return (
+      <Flex alignItems="center" justifyContent="center" height="size-3000">
+        <Flex direction="column" alignItems="center" gap="size-150">
+          <ProgressCircle size="L" isIndeterminate aria-label="Loading" />
+          <Text>Checking Commerce connection…</Text>
+        </Flex>
+      </Flex>
+    )
+  }
+
+  if (status === 'error') {
+    return (
+      <View padding="size-400">
+        <IllustratedMessage>
+          <Heading>Could not load connection status</Heading>
+          <Text>{error}</Text>
+        </IllustratedMessage>
+        <Flex marginTop="size-200" justifyContent="center">
+          <Button variant="cta" onPress={fetchStatus}>Retry</Button>
+        </Flex>
+      </View>
+    )
+  }
+
+  if (status === 'unconfigured' || reconfiguring) {
+    return (
+      <CommerceSetupWizard
+        runtime={props.runtime}
+        ims={props.ims}
+        initial={maskedCreds}
+        onCompleted={() => {
+          setReconfiguring(false)
+          fetchStatus()
+        }}
+        onCancel={reconfiguring ? () => setReconfiguring(false) : undefined}
+      />
+    )
+  }
+
+  // Pick the page component for the active path from the nav registry.
+  // To add a new page: register it in pages/index.js (or host extraPages)
+  // and add an entry to nav.json (or host extraNav).
+  const items = getNavItems()
+  const match = items.find((it) => it.path === location.pathname) || items[0]
+  const Page = match ? getPageComponent(match.id) : null
+
+  const pageFallback = ({ error }) => (
+    <View padding="size-400">
+      <Heading level={3}>This page crashed</Heading>
+      <Text>
+        {match ? `Error in page "${match.id}": ` : ''}{error && error.message ? error.message : String(error)}
+      </Text>
+    </View>
+  )
+
+  return (
+    <View UNSAFE_style={{ overflowX: 'clip' }}>
+      <AppSectionNav
+        rightSlot={
+          <Button variant="secondary" onPress={() => setReconfiguring(true)}>
+            Reconfigure Commerce
+          </Button>
+        }
+      />
+      <View>
+        {Page
+          ? (
+            <ErrorBoundary FallbackComponent={pageFallback}>
+              <Page runtime={props.runtime} ims={props.ims} />
+            </ErrorBoundary>
+          )
+          : <View padding="size-400"><Text>No page registered for this route.</Text></View>
+        }
+      </View>
+    </View>
+  )
+}