Docs/pos only products

[kilbot]

Summary by CodeRabbit

• New Features

  • Rich component-based docs UI (accordions, cards, steps, badges, link blocks) and POS Only Products guide.
  • Expanded icon set and FontAwesome integration for richer visuals.

• Documentation

  • Major docs overhaul: testing guidance, sidebar/versioning instructions, custom component and swizzle guidelines, common mistakes.

• Style

  • New responsive styles and theming for cards, grids, accordions, badges, timelines, and dark mode.

• Chores

  • Added client-side FontAwesome initialization and related dependencies.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
docs	Ready	Preview, Comment	Jan 28, 2026 6:49pm

[coderabbitai]

Important

Review skipped

Too many files!

This PR contains 298 files, which is 198 over the limit of 100.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

• 🔍 Trigger a full review

📝 Walkthrough

Walkthrough

This PR adds a reusable documentation UI component library, integrates FontAwesome client module, swizzles Docusaurus DocCard/DocCardList theme components, injects extensive CSS, and updates 40+ versioned MDX pages to use the new components and metadata.

Changes

Cohort / File(s)	Summary
React Component Library src/components/Accordion.js, src/components/AccordionItem.js, src/components/DocCards.js, src/components/FeatureCard.js, src/components/FeatureGrid.js, src/components/LinkCard.js, src/components/LinkCards.js, src/components/PlatformBadge.js, src/components/ProBadge.js, src/components/RequirementItem.js, src/components/RequirementsList.js, src/components/StepCard.js, src/components/Steps.js, src/components/SupportContact.js, src/components/UseCaseCard.js, src/components/UseCases.js	Added ~16 new stateless React components for cards, accordions, steps, badges, requirements, and support contacts; exported defaults/named exports for reuse.
Icon System & Client Module src/components/Icon.js, src/fontawesome.js, package.json, docusaurus.config.js	Expanded FontAwesome icon set (many solids + Discord brand), added @fortawesome/free-brands-svg-icons dependency, added src/fontawesome.js and registered it via clientModules to ensure SSR-safe icon loading.
Swizzled Theme Components src/theme/DocCard/index.tsx, src/theme/DocCard/styles.module.css, src/theme/DocCardList/index.js, src/theme/DocCardList/styles.module.css	Added custom DocCard and DocCardList theme components with icon mapping, category/link handling, pluralization, and supporting CSS modules.
Global Styles src/css/custom.css	Added ~532 lines of CSS styling for new components (cards, grids, accordions, steps, badges, tables) including dark-mode adjustments and responsive rules; contains some duplicated blocks.
Documentation Content (MDX) & Sidebars versioned_docs/version-1.x/**/*.mdx (40+ files), versioned_sidebars/version-1.x-sidebars.json	Updated 40+ versioned MDX pages: added description frontmatter, replaced plain lists/links with component-based UI (FeatureGrid/FeatureCard, Steps/StepCard, LinkCards/LinkCard, Accordion/AccordionItem, UseCases/UseCaseCard, RequirementsList/RequirementItem, SupportContact), and inserted new POS-only products page; updated sidebar to include products/pos-only-products.
Static Content static/llms.txt	Added a new LLM-readable overview document for WCPOS (features, requirements, support, license).

Sequence Diagram(s)

sequenceDiagram
  participant Browser as Client (Browser)
  participant Docusaurus as Docusaurus App
  participant FA as FontAwesome module (src/fontawesome.js)
  participant Theme as Swizzled Theme (DocCard/DocCardList)
  participant Docs as MDX Content (versioned_docs)

  Browser->>Docusaurus: Request page
  Docusaurus->>FA: Load clientModules (register icons, autoAddCss=false)
  Docusaurus->>Theme: Render DocCardList
  Theme->>Docs: Resolve items (useDocById / sidebar)
  Theme->>Browser: Render DocCard components (icons, links)
  Browser->>Browser: User clicks DocCard -> navigates to doc page

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~35 minutes

Possibly related PRs

• refactor: restructure documentation for screen-based navigation #62: Edits overlapping documentation pages and Docusaurus configuration; likely a parallel or dependent update to the same docs/component surface.

Poem

🐰 A little hop to brighten the docs today,
New cards and accordions to guide the way.
Icons that sparkle, steps in a row,
Docs dressed in style — now ready to show.
Hooray for components — we’ve made learning play!

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Docs/pos only products' directly corresponds to the main change: adding a new documentation page for POS Only Products feature with comprehensive content, components, and sidebar integration.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 7

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (3)

versioned_docs/version-1.x/pos/cart/open-orders.mdx (1)

107-107: Use British English spelling: "Organised" instead of "Organized".

As per coding guidelines, documentation should use British English spelling throughout. The heading uses American English "Organized" which should be "Organised" for consistency.

📝 Suggested fix

-### Keep Orders Organized
+### Keep Orders Organised

versioned_docs/version-1.x/templates/receipt-templates.mdx (1)

165-165: Use British English spelling: "Minimise" instead of "Minimize".

As per coding guidelines, British English spelling should be used throughout documentation.

Suggested fix

-2. **Minimize PHP**: Avoid complex logic in templates
+2. **Minimise PHP**: Avoid complex logic in templates

versioned_docs/version-1.x/payment/custom-gateways/sumup-terminal.mdx (1)

170-176: Use British English spelling: "optimised" instead of "optimized".

The coding guidelines require British English spelling throughout documentation.

Suggested fix

-The gateway is optimized to reduce API calls and avoid rate limiting:
+The gateway is optimised to reduce API calls and avoid rate limiting:

As per coding guidelines: "Use British English spelling throughout documentation... optimise..."

🤖 Fix all issues with AI agents

In `@src/components/PlatformBadge.js`:
- Around line 1-27: PlatformBadge currently imports and uses FontAwesomeIcon
directly; refactor PlatformBadge to import the shared Icon component (from
src/components/Icon) and change platformConfig to store icon name strings (e.g.,
'globe', 'windows', 'apple', 'android') and render with <Icon name={config.icon}
/> instead of FontAwesomeIcon; before that, update src/components/Icon.js to
import faWindows, faApple, faAndroid from `@fortawesome/free-brands-svg-icons` and
add mappings for 'windows', 'apple', and 'android' to the existing iconMap
(which currently contains 'globe'), ensuring Icon supports those names.

In `@static/llms.txt`:
- Around line 75-77: Change the phrase "WCPOS is open source software." to
hyphenate the compound adjective so it reads "WCPOS is open-source software."
Update the sentence in the block under the "## Licence" heading where the exact
string "WCPOS is open source software." appears to preserve consistency and
grammar.

In `@versioned_docs/version-1.x/error-codes/index.mdx`:
- Line 4: The frontmatter description is misleading: update the "description"
field in version-1.x/error-codes/index.mdx to accurately reflect the documented
domains by either listing all domains (API errors, database errors, payment
errors, system errors) and troubleshooting steps, or replace "sync issues" with
a more general phrase like "various error domains (API, database, payment,
system) and troubleshooting"; modify the description string (the description key
in the frontmatter) accordingly.

In `@versioned_docs/version-1.x/products/pos-only-products.mdx`:
- Around line 101-108: The JSX in the MDX uses HTML attributes "class" which
React/MDX expects as "className"; update the <div class="image-container"> and
the <p class="image-caption"> to use className instead, leaving the Image
component props (alt, img, style) unchanged so that the element identifiers are:
the div with image-container and the p with image-caption around the Image
component.
- Around line 88-95: The JSX in the MDX uses HTML attributes instead of React
props: replace the attributes on elements like the outer div ("image-container")
and the p tag ("image-caption") so they use className instead of class (e.g.,
change <div class="image-container"> and <p class="image-caption"> to use
className) to ensure proper styling in React/MDX rendering.
- Around line 67-74: The JSX/MDX uses HTML attributes "class" on the div and p
elements which should be "className"; update the attributes on the <div
class="image-container"> and <p class="image-caption"> (around the Image
component) to use className instead so the Image component and surrounding
elements conform to JSX/MDX conventions.

In `@versioned_docs/version-1.x/products/sync.mdx`:
- Line 36: Replace the US spelling "synchronization" with British English
"synchronisation" in the sentence that begins "Product synchronization in the
POS can be triggered in several ways:" (and any other occurrences in this
document) so the documentation uses British English consistently.

🧹 Nitpick comments (7)

src/components/Accordion.js (1)

3-9: Consider adding PropTypes for better developer experience.

The component is functional but lacks PropTypes validation. For a documentation site this is a minor concern, but adding PropTypes would improve maintainability and provide better error messages during development.

♻️ Optional: Add PropTypes

 import React from 'react';
+import PropTypes from 'prop-types';
 
 export default function Accordion({ children }) {
   return (
     <div className="accordion">
       {children}
     </div>
   );
 }
+
+Accordion.propTypes = {
+  children: PropTypes.node.isRequired,
+};

src/components/FeatureCard.js (1)

4-7: Consider using clsx or template literals for className construction.

The current conditional works, but could be simplified using a template literal or the commonly-used clsx utility for better readability, especially if more variants are added later.

Optional refactor using template literal

-export default function FeatureCard({ icon, title, children, variant }) {
-  const className = variant === 'pro' 
-    ? 'feature-card feature-card--pro' 
-    : 'feature-card';
+export default function FeatureCard({ icon, title, children, variant }) {
+  const className = `feature-card${variant === 'pro' ? ' feature-card--pro' : ''}`;

versioned_docs/version-1.x/payment/custom-gateways/stripe-terminal.mdx (2)

39-60: Inconsistent number prop type for StepCard.

The number prop is passed as a string ("1", "2", "3") here, but in versioned_docs/version-1.x/getting-started/index.mdx, it's passed as a number ({1}, {2}, etc.). Consider using a consistent type across all documentation files.

Suggested fix for consistency

-  <StepCard number="1" title="Download and Install">
+  <StepCard number={1} title="Download and Install">

-  <StepCard number="2" title="Configure Stripe Settings">
+  <StepCard number={2} title="Configure Stripe Settings">

-  <StepCard number="3" title="Enable in WooCommerce POS" isLast>
+  <StepCard number={3} title="Enable in WooCommerce POS" isLast>

---

114-121: Consider replacing Unicode symbols with the Icon component.

The coding guidelines recommend using the Icon component for FontAwesome icons instead of Unicode symbols. The checkmarks (✅) and crosses (❌) could be replaced with semantic icons for consistency.

As per coding guidelines: "Always use the Icon component for FontAwesome icons instead of Unicode symbols."

src/theme/DocCardList/index.js (1)

8-11: Unused title prop in helper component.

The title prop is destructured but never rendered in DocCardListForCurrentSidebarCategory. Either remove it from the destructuring or implement its rendering if needed.

Option 1: Remove unused prop

-function DocCardListForCurrentSidebarCategory({className, title}) {
+function DocCardListForCurrentSidebarCategory({className}) {
   const items = useCurrentSidebarSiblings();
-  return <DocCardList items={items} className={className} title={title} />;
+  return <DocCardList items={items} className={className} />;
 }

Option 2: If title should be rendered, add it to the main component

 return (
   <section className={className}>
+    {props.title && <h2>{props.title}</h2>}
     <div className="link-cards">

versioned_docs/version-1.x/payment/custom-gateways/sumup-terminal.mdx (2)

39-73: Inconsistent number prop type for StepCard.

Same as in stripe-terminal.mdx, the number prop is passed as a string here but as a number in getting-started/index.mdx. Consider using a consistent type.

---

125-130: Consider replacing Unicode symbols with the Icon component.

Same as in stripe-terminal.mdx, the checkmarks (✅) and crosses (❌) could be replaced with the Icon component for consistency with the coding guidelines.

As per coding guidelines: "Always use the Icon component for FontAwesome icons instead of Unicode symbols."

[coderabbitai]

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

# Find the Icon component file
fd "Icon" --type f --extension js --extension jsx --extension ts --extension tsx | grep -i "component\|icon" | head -20

Repository: wcpos/docs

Length of output: 76

---

🏁 Script executed:

# Also search more broadly for the Icon component
find . -name "Icon.js" -o -name "Icon.jsx" -o -name "Icon.ts" -o -name "Icon.tsx" 2>/dev/null

Repository: wcpos/docs

Length of output: 78

---

🏁 Script executed:

# Check if the path `@site/src/components/Icon` exists
ls -la site/src/components/ 2>/dev/null || echo "site/src/components not found"

Repository: wcpos/docs

Length of output: 83

---

🏁 Script executed:

# Search for any Icon component definition
rg "export.*Icon|function Icon|const Icon" --type js --type jsx --type ts --type tsx -A 5 2>/dev/null | head -50

Repository: wcpos/docs

Length of output: 36

---

🏁 Script executed:

cat -n src/components/Icon.js

Repository: wcpos/docs

Length of output: 3694

---

🏁 Script executed:

# Check for webpack/build config files
fd "webpack|tsconfig|docusaurus|vite" --type f | head -20

Repository: wcpos/docs

Length of output: 219

---

🏁 Script executed:

# Check for jsconfig or tsconfig that might define `@site` alias
cat jsconfig.json 2>/dev/null || cat tsconfig.json 2>/dev/null || echo "No config found"

Repository: wcpos/docs

Length of output: 69

---

🏁 Script executed:

# Check docusaurus config if this is a Docusaurus project
cat docusaurus.config.js 2>/dev/null | head -100

Repository: wcpos/docs

Length of output: 2666

---

🏁 Script executed:

# Check if `@site` is used elsewhere in the codebase
rg "@site" --type js --type jsx --type ts --type tsx | head -20

Repository: wcpos/docs

Length of output: 81

---

🏁 Script executed:

# Check if the PlatformBadge.js file actually exists and its current state
cat -n src/components/PlatformBadge.js 2>/dev/null || echo "File not found"

Repository: wcpos/docs

Length of output: 1494

---

Refactor to use the Icon component for platform badges.

This component directly uses FontAwesomeIcon instead of the shared Icon component, which violates the project guideline for **/*.js files. Refactor to use the Icon component, but note that icon names windows, apple, and android need to be added to src/components/Icon.js first (the component currently only supports globe). Also, the import path should be src/components/Icon, not @site/src/components/Icon.

♻️ Changes required

1. Update src/components/Icon.js to import and map the missing brand icons:

   • Add faWindows, faApple, faAndroid from @fortawesome/free-brands-svg-icons
   • Add mappings: 'windows', 'apple', 'android' in the iconMap

2. Update src/components/PlatformBadge.js:

   • Import Icon from src/components/Icon
   • Change platform config to use icon names as strings
   • Replace <FontAwesomeIcon icon={config.icon} /> with <Icon name={config.icon} />

🤖 Prompt for AI Agents

In `@src/components/PlatformBadge.js` around lines 1 - 27, PlatformBadge currently
imports and uses FontAwesomeIcon directly; refactor PlatformBadge to import the
shared Icon component (from src/components/Icon) and change platformConfig to
store icon name strings (e.g., 'globe', 'windows', 'apple', 'android') and
render with <Icon name={config.icon} /> instead of FontAwesomeIcon; before that,
update src/components/Icon.js to import faWindows, faApple, faAndroid from
`@fortawesome/free-brands-svg-icons` and add mappings for 'windows', 'apple', and
'android' to the existing iconMap (which currently contains 'globe'), ensuring
Icon supports those names.