diff --git a/docs/content/user-guide/regions/shipping-options.mdx b/docs/content/user-guide/regions/shipping-options.mdx index cf013e7fd5..aeb5112b5f 100644 --- a/docs/content/user-guide/regions/shipping-options.mdx +++ b/docs/content/user-guide/regions/shipping-options.mdx @@ -2,6 +2,8 @@ sidebar_position: 4 --- +import UiIcon from '@site/src/components/UiIcon'; + # Manage Shipping Options In this document, you’ll learn how to manage a region’s shipping options in your Medusa Admin. diff --git a/www/docs/.yarn/install-state.gz b/www/docs/.yarn/install-state.gz index e41da6eb17..1bfbb90ab8 100644 Binary files a/www/docs/.yarn/install-state.gz and b/www/docs/.yarn/install-state.gz differ diff --git a/www/docs/package.json b/www/docs/package.json index ee6d98ad7e..43c2a2f2df 100644 --- a/www/docs/package.json +++ b/www/docs/package.json @@ -30,6 +30,7 @@ "prism-react-renderer": "^1.3.1", "react": "^17.0.1", "react-dom": "^17.0.1", + "react-transition-group": "^4.4.5", "redocusaurus": "^1.3.0", "url-loader": "^4.1.1" }, diff --git a/www/docs/src/components/Feedback/index.css b/www/docs/src/components/Feedback/index.css new file mode 100644 index 0000000000..5505a90e38 --- /dev/null +++ b/www/docs/src/components/Feedback/index.css @@ -0,0 +1,123 @@ +.inline-feedback { + display: flex; + flex-direction: row; + align-items: center; +} + +.inline-question, +.feedback-message { + display: flex; + flex-direction: column; +} + +.inline-feedback span, +.inline-question span { + font-weight: bold; +} + +.inline-feedback span { + margin-right: 13px; +} + +.inline-question span { + margin-bottom: 13px; +} + +.feedback-btn { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + font-size: 13px; + padding: 12px 16px; + border-radius: 8px; + cursor: pointer; + font-weight: 600; + background-color: transparent; + border: 1px solid #E5E7EB; + color: var(--ifm-font-color-base); +} + +.feedback-btn:focus { + box-shadow: 0px 0px 0px 4px rgba(124, 58, 237, 0.1); +} + +html:not([data-theme="dark"]) .feedback-btn:hover { + background: #F3F4F6; +} + +html:not([data-theme="dark"]) .feedback-btn:active, +html:not([data-theme="dark"]) .feedback-btn:disabled { + background: #E5E7EB; +} + +[data-theme="dark"] .feedback-btn, +[data-theme="dark"] .inline-question textarea { + border-color: rgba(255, 255, 255, 0.15); +} + +.feedback-btn:not(:last-child) { + margin-right: 13px; +} + +.inline-question .feedback-btn { + margin-top: 13px; + width: fit-content; +} + +.inline-question textarea { + border-radius: 4px; + background-color: transparent; + border: 1px solid #E5E7EB; + padding: 8px; + font-family: var(--ifm-font-family-base); +} + +.feedback-message { + text-align: center; + font-size: 18px; +} + +.fade-in { + -webkit-animation: fade-in .3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; + animation: fade-in .3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; +} + +@-webkit-keyframes fade-in { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@keyframes fade-in { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +.fade-out { + -webkit-animation: fade-out .3s ease-out both; + animation: fade-out .3s ease-out both; +} + +@-webkit-keyframes fade-out { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} +@keyframes fade-out { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} \ No newline at end of file diff --git a/www/docs/src/components/Feedback/index.js b/www/docs/src/components/Feedback/index.js new file mode 100644 index 0000000000..ffc4a6ce54 --- /dev/null +++ b/www/docs/src/components/Feedback/index.js @@ -0,0 +1,88 @@ +import React, { useRef, useState } from 'react'; +import { CSSTransition, SwitchTransition } from 'react-transition-group'; +import './index.css'; + +import useIsBrowser from '@docusaurus/useIsBrowser'; +import {useLocation} from '@docusaurus/router'; + +export default function Feedback () { + const [showForm, setShowForm] = useState(false); + const [submittedFeedback, setSubmittedFeedback] = useState(false); + const [loading, setLoading] = useState(false); + const inlineFeedbackRef = useRef(null); + const inlineQuestionRef = useRef(null); + const inlineMessageRef = useRef(null) + const [positiveFeedback, setPositiveFeedbac] = useState(false); + const [message, setMessage] = useState(""); + const nodeRef = submittedFeedback ? inlineMessageRef : (showForm ? inlineQuestionRef : inlineFeedbackRef); + + const isBrowser = useIsBrowser(); + const location = useLocation(); + + function handleFeedback (e) { + setPositiveFeedbac(e.target.classList.contains('positive')); + setShowForm(true); + } + + function submitFeedback (e) { + if (isBrowser) { + if (window.analytics) { + setLoading(true); + window.analytics.track('survey', { + url: location.pathname, + label: document.title, + feedback: positiveFeedback ? 'yes' : 'no', + message + }, function () { + setLoading(false); + setShowForm(false); + setSubmittedFeedback(true); + }) + } else { + setShowForm(false); + setSubmittedFeedback(true); + } + } + } + + return ( +
+ + { + nodeRef.current.addEventListener("transitionend", done, false); + }} + classNames={{ + enter: 'fade-in', + exit: 'fade-out' + }} + > + <> + {(!showForm && !submittedFeedback) && ( +
+ Was this page helpful? + + +
+ )} + {(showForm && !submittedFeedback) && ( +
+ {positiveFeedback ? 'What was most helpful?' : 'What can we improve?'} + + +
+ )} + {submittedFeedback && ( +
+ Thank you for helping improve our documentation! +
+ )} + + + +
+ ) +} \ No newline at end of file diff --git a/www/docs/src/components/Layout/Layout.js b/www/docs/src/components/Layout/Layout.js deleted file mode 100644 index 8fb93152c5..0000000000 --- a/www/docs/src/components/Layout/Layout.js +++ /dev/null @@ -1,13 +0,0 @@ -import React, { useEffect } from "react" - -import RootLayout from "@theme/Layout" - -const Layout = ({ children, ...props }) => { - return ( - -
{children}
- - ) -} - -export default Layout diff --git a/www/docs/src/components/Layout/index.js b/www/docs/src/components/Layout/index.js deleted file mode 100644 index 306f58fd8f..0000000000 --- a/www/docs/src/components/Layout/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default as Layout } from "./Layout" diff --git a/www/docs/src/components/Tabs/TabItem/TabItem.js b/www/docs/src/components/Tabs/TabItem/TabItem.js deleted file mode 100644 index 6b7c3b28c0..0000000000 --- a/www/docs/src/components/Tabs/TabItem/TabItem.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from "react" -import styles from "./tab.module.css" - -const TabItem = ({ title, isOverviewCard, items }) => { - const overviewModeList = () => - items.map((item) =>

{item.title}

) - return ( -
-
-
-

{title}

-
{isOverviewCard && overviewModeList()}
-
-
-
- ) -} - -export default TabItem diff --git a/www/docs/src/components/Tabs/TabItem/index.js b/www/docs/src/components/Tabs/TabItem/index.js deleted file mode 100644 index 39410a50a7..0000000000 --- a/www/docs/src/components/Tabs/TabItem/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default as TabItem } from "./TabItem" diff --git a/www/docs/src/components/Tabs/TabItem/tab.module.css b/www/docs/src/components/Tabs/TabItem/tab.module.css deleted file mode 100644 index e425152248..0000000000 --- a/www/docs/src/components/Tabs/TabItem/tab.module.css +++ /dev/null @@ -1,18 +0,0 @@ -.card { - background-color: var(--ifm-medusa-gray); - min-height: 257px; - border-radius: 5px; - padding: 20px 13px; - height: 100%; -} - -.cardContent { - height: 100%; - display: flex; - flex-direction: column; - justify-content: space-between; -} - -.cardContent p { - font-size: 18px; -} diff --git a/www/docs/src/components/Tabs/TabsPanel.js b/www/docs/src/components/Tabs/TabsPanel.js deleted file mode 100644 index 0d85cf02ee..0000000000 --- a/www/docs/src/components/Tabs/TabsPanel.js +++ /dev/null @@ -1,77 +0,0 @@ -import clsx from "clsx" -import React, { useState } from "react" -import { TabItem } from "./TabItem/" - -const BUTTONS_DATA = [ - { buttonTitle: "Overview", value: "overview" }, - { buttonTitle: "Tutorial", value: "tutorial" }, - { buttonTitle: "Guides", value: "guide" }, - { buttonTitle: "Reference", value: "reference" }, -] - -const OVERVIEW_DATA = ["Tutorial", "Guides", "Reference"] - -const TabsPanel = ({ items }) => { - const [sort, setSort] = useState("overview") - - const buttons = BUTTONS_DATA.map((item) => ( - // -
  • setSort(item.value)} - > - {item.buttonTitle} -
    • - )) - - const getOverviewCardItemsSet = (currentCard) => - items.filter((item) => item.key === currentCard.toLowerCase()) - - const overviewCardsSet = () => - OVERVIEW_DATA.map((item) => ( - - )) - - const getSortedArray = () => { - return items.filter((entry) => entry.type === sort) - } - - const renderTabItems = () => { - if (sort === "overview") return overviewCardsSet() - return getSortedArray().length > 0 ? ( - getSortedArray().map((item) => { - return - }) - ) : ( -

    hold tight! we are building these things

    - ) - } - - return ( -
    - {/* - {buttons} - */} -
      {buttons}
    -
    -
    {renderTabItems()}
    -
    -
    - ) -} - -export default TabsPanel diff --git a/www/docs/src/components/Tabs/index.js b/www/docs/src/components/Tabs/index.js deleted file mode 100644 index bf7cd87ade..0000000000 --- a/www/docs/src/components/Tabs/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default as TabsPanel } from "./TabsPanel" diff --git a/www/docs/src/components/Tabs/tabs.module.css b/www/docs/src/components/Tabs/tabs.module.css deleted file mode 100644 index 41e999ef4c..0000000000 --- a/www/docs/src/components/Tabs/tabs.module.css +++ /dev/null @@ -1,14 +0,0 @@ -.button { - background-color: transparent; - border: none; - cursor: pointer; - height: 30px; - font-size: 16px; - margin-right: 10px; -} - -.buttonActive { - color: var(--ifm-color-primary); - border-bottom: 3px solid var(--ifm-color-primary) !important; - font-weight: 500; -} diff --git a/www/docs/src/theme/DocItem/Footer/index.js b/www/docs/src/theme/DocItem/Footer/index.js new file mode 100644 index 0000000000..02feffda41 --- /dev/null +++ b/www/docs/src/theme/DocItem/Footer/index.js @@ -0,0 +1,12 @@ +import React from 'react'; +import Footer from '@theme-original/DocItem/Footer'; +import Feedback from '../../../components/Feedback'; + +export default function FooterWrapper(props) { + return ( +
    + +
    + ); +} diff --git a/www/docs/yarn.lock b/www/docs/yarn.lock index 9191d3de25..50482fb3a2 100644 --- a/www/docs/yarn.lock +++ b/www/docs/yarn.lock @@ -2883,6 +2883,15 @@ __metadata: languageName: node linkType: hard +"@babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.7": + version: 7.19.0 + resolution: "@babel/runtime@npm:7.19.0" + dependencies: + regenerator-runtime: ^0.13.4 + checksum: 42d4f11d6a5bfcf5a3d05346e7f1aef79a53b9e1968b4dc54a0682df60284300c97de3be63f4d5dd47b404d3a1022a8a57444b5d150822ec8974757de7233f6e + languageName: node + linkType: hard + "@babel/runtime@npm:^7.8.4": version: 7.17.8 resolution: "@babel/runtime@npm:7.17.8" @@ -6427,6 +6436,7 @@ __metadata: prism-react-renderer: ^1.3.1 react: ^17.0.1 react-dom: ^17.0.1 + react-transition-group: ^4.4.5 redocusaurus: ^1.3.0 url-loader: ^4.1.1 languageName: unknown @@ -6488,6 +6498,16 @@ __metadata: languageName: node linkType: hard +"dom-helpers@npm:^5.0.1": + version: 5.2.1 + resolution: "dom-helpers@npm:5.2.1" + dependencies: + "@babel/runtime": ^7.8.7 + csstype: ^3.0.2 + checksum: f735074d66dd759b36b158fa26e9d00c9388ee0e8c9b16af941c38f014a37fc80782de83afefd621681b19ac0501034b4f1c4a3bff5caa1b8667f0212b5e124c + languageName: node + linkType: hard + "dom-serializer@npm:^1.0.1": version: 1.3.2 resolution: "dom-serializer@npm:1.3.2" @@ -10858,6 +10878,21 @@ __metadata: languageName: node linkType: hard +"react-transition-group@npm:^4.4.5": + version: 4.4.5 + resolution: "react-transition-group@npm:4.4.5" + dependencies: + "@babel/runtime": ^7.5.5 + dom-helpers: ^5.0.1 + loose-envify: ^1.4.0 + prop-types: ^15.6.2 + peerDependencies: + react: ">=16.6.0" + react-dom: ">=16.6.0" + checksum: 2ba754ba748faefa15f87c96dfa700d5525054a0141de8c75763aae6734af0740e77e11261a1e8f4ffc08fd9ab78510122e05c21c2d79066c38bb6861a886c82 + languageName: node + linkType: hard + "react@npm:^17.0.1": version: 17.0.2 resolution: "react@npm:17.0.2"