@pradip1995/segment-store-faqs 0.2.0

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@pradip1995/segment-store-faqs",
+  "version": "0.2.0",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "src/segment.css"
+  ],
+  "files": [
+    "src"
+  ],
+  "exports": {
+    ".": "./src/index.ts",
+    "./manifest": "./src/manifest.ts"
+  },
+  "peerDependencies": {
+    "@pradip1995/plugin-sdk": "^0.2.0",
+    "react": ">=19",
+    "react-dom": ">=19",
+    "next": ">=15"
+  },
+  "dependencies": {
+    "@pradip1995/segment-primitives": "0.3.0",
+    "@pradip1995/segment-tokens": "0.3.2"
+  },
+  "devDependencies": {
+    "@pradip1995/plugin-sdk": "^0.2.0",
+    "@types/react": "^19",
+    "react": "19.0.3",
+    "typescript": "^5.7.2"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "lint": "tsc --noEmit"
+  }
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./segment"
+export { default as manifest } from "./manifest"

package/src/manifest.ts

@@ -0,0 +1,11 @@
+import type { SegmentManifest } from "@pradip1995/plugin-sdk"
+
+const manifest: SegmentManifest = {
+  id: "store-faqs",
+  type: "segment",
+  version: "0.1.0",
+  compatibleFramework: ["^1.0.0"],
+  dataKey: "storeFaqs",
+}
+
+export default manifest

package/src/segment.css

@@ -0,0 +1,82 @@
+.store-faqs {
+  width: 100%;
+  padding: 2rem 0;
+}
+
+.store-faqs__inner {
+  max-width: var(--container-max);
+  margin: 0 auto;
+  padding: 2rem 1.5rem;
+  background: var(--color-brand-accent-muted);
+  border-radius: 1.25rem;
+}
+
+.store-faqs__title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  margin-bottom: 2rem;
+  color: var(--color-text-heading);
+}
+
+.store-faqs__category + .store-faqs__category {
+  margin-top: 2rem;
+}
+
+.store-faqs__category-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--color-brand-accent);
+}
+
+.store-faqs__question {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  text-align: left;
+  background: none;
+  border: none;
+  padding: 0.75rem 0;
+  color: var(--color-text-heading);
+}
+
+.store-faqs__number {
+  color: var(--color-brand-accent);
+  font-weight: 600;
+}
+
+.store-faqs__toggle {
+  color: var(--color-brand-accent);
+  font-size: 1.5rem;
+  line-height: 1;
+}
+
+.store-faqs__answer {
+  margin: 0 0 0.75rem;
+  color: var(--color-text-body);
+  line-height: 1.6;
+  white-space: pre-line;
+}
+
+.store-faqs__divider {
+  height: 1px;
+  background: var(--color-brand-accent);
+}
+
+.store-faqs__more-wrap {
+  display: flex;
+  justify-content: center;
+  padding-top: 1.5rem;
+}
+
+.store-faqs__more-btn {
+  border-radius: 9999px;
+  padding: 0.75rem 2rem;
+  background: var(--color-brand-accent);
+  color: var(--color-text-inverse);
+  font-weight: 600;
+  text-transform: uppercase;
+}

package/src/segment.tsx

@@ -0,0 +1,147 @@
+"use client"
+
+import "./segment.css"
+import { useMemo, useState } from "react"
+
+type FaqItem = {
+  question: string
+  answer: string
+}
+
+type FaqCategory = {
+  title: string
+  faqs: FaqItem[]
+}
+
+const DEFAULT_CATEGORIES: FaqCategory[] = [
+  {
+    title: "Orders & delivery",
+    faqs: [
+      {
+        question: "When will I receive my order?",
+        answer: "Orders are typically processed within 1–2 business days. Delivery takes 3–5 business days depending on your location.",
+      },
+      {
+        question: "How can I track my order?",
+        answer: "Once your order ships, you will receive a tracking link via email. You can also track it from your account under My Orders.",
+      },
+    ],
+  },
+  {
+    title: "Returns & exchanges",
+    faqs: [
+      {
+        question: "What is your return policy?",
+        answer: "We offer a 7-day return policy for unused items in original packaging with tags attached.",
+      },
+      {
+        question: "How do I initiate a return?",
+        answer: "Go to your account, open the order, and select Return Items to generate a pickup request.",
+      },
+    ],
+  },
+]
+
+export default function StoreFaqs({
+  categories,
+  title = "FAQs",
+  initialVisibleCount = 6,
+}: {
+  categories?: FaqCategory[] | null
+  title?: string
+  initialVisibleCount?: number
+}) {
+  const faqCategories = categories && categories.length > 0 ? categories : DEFAULT_CATEGORIES
+  const [openIndex, setOpenIndex] = useState<{ category: number; faq: number } | null>(null)
+  const [visibleCount, setVisibleCount] = useState(initialVisibleCount)
+
+  const totalFaqs = useMemo(
+    () => faqCategories.reduce((sum, category) => sum + category.faqs.length, 0),
+    [faqCategories]
+  )
+
+  const hasMore = totalFaqs > visibleCount
+  const showLessButton = visibleCount > initialVisibleCount
+
+  let globalIndex = 0
+
+  return (
+    <section className="store-faqs" aria-label={title}>
+      <div className="store-faqs__inner">
+        <h2 className="store-faqs__title">{title}</h2>
+
+        <div className="store-faqs__categories">
+          {faqCategories.map((category, catIndex) => {
+            const firstFaqIndex = globalIndex
+            if (firstFaqIndex >= visibleCount) return null
+
+            const visibleFaqs = category.faqs.filter((_, idx) => firstFaqIndex + idx < visibleCount)
+            if (visibleFaqs.length === 0) return null
+
+            return (
+              <div key={`${category.title}-${catIndex}`} className="store-faqs__category">
+                {category.title ? <h3 className="store-faqs__category-title">{category.title}</h3> : null}
+                <div className="store-faqs__list">
+                  {visibleFaqs.map((faq, faqIndex) => {
+                    const isExpanded = openIndex?.category === catIndex && openIndex?.faq === faqIndex
+                    globalIndex += 1
+                    const displayIndex = globalIndex
+
+                    return (
+                      <div key={`${faq.question}-${faqIndex}`} className="store-faqs__item">
+                        <button
+                          type="button"
+                          onClick={() =>
+                            setOpenIndex(isExpanded ? null : { category: catIndex, faq: faqIndex })
+                          }
+                          className="store-faqs__question"
+                          aria-expanded={isExpanded}
+                        >
+                          <span>
+                            <span className="store-faqs__number">{displayIndex}.</span> {faq.question}
+                          </span>
+                          <span className="store-faqs__toggle" aria-hidden>
+                            {isExpanded ? "−" : "+"}
+                          </span>
+                        </button>
+                        {isExpanded ? (
+                          <p className="store-faqs__answer">{faq.answer}</p>
+                        ) : null}
+                        <div className="store-faqs__divider" aria-hidden />
+                      </div>
+                    )
+                  })}
+                </div>
+              </div>
+            )
+          })}
+        </div>
+
+        {(hasMore || showLessButton) && (
+          <div className="store-faqs__more-wrap">
+            {hasMore ? (
+              <button
+                type="button"
+                onClick={() => setVisibleCount((prev) => Math.min(prev + initialVisibleCount, totalFaqs))}
+                className="store-faqs__more-btn"
+              >
+                More
+              </button>
+            ) : (
+              <button
+                type="button"
+                onClick={() => {
+                  setVisibleCount(initialVisibleCount)
+                  setOpenIndex(null)
+                }}
+                className="store-faqs__more-btn"
+              >
+                Less
+              </button>
+            )}
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}