{"_id":"@buyloop/pricing-tiers","_rev":"26-2d9f106f8d1926f85f69c9cbf6bf7c69","name":"@buyloop/pricing-tiers","description":"The `PricingTiers` component is a React component for rendering a pricing list using Buyloop's public API. It allows you to display pricing information for different tiers, and you can customize its behavior with various properties.","dist-tags":{"latest":"0.3.7"},"versions":{"0.3.4":{"name":"@buyloop/pricing-tiers","version":"0.3.4","keywords":["react","components"],"author":{"name":"Pavel Bosacky"},"license":"SEE LICENSE IN LICENSE","_id":"@buyloop/pricing-tiers@0.3.4","maintainers":[{"name":"martincabala","email":"cabala.mato@gmail.com"},{"name":"jozefmorvay","email":"jozef.morvay1@gmail.com"},{"name":"pavelbosacky","email":"pavel.bosacky@gmail.com"}],"homepage":"https://gitlab.com/buyloop/pricing-tiers#readme","bugs":{"url":"https://gitlab.com/buyloop/pricing-tiers/issues"},"dist":{"shasum":"611b1d05e22f04fbaad7200b5b856ddb7666ba00","tarball":"https://registry.npmjs.org/@buyloop/pricing-tiers/-/pricing-tiers-0.3.4.tgz","fileCount":13,"integrity":"sha512-VIj1vXgv9k+5Z8V4fVwE5IDGpTgSLNZ8u5kMjQhGmb1nUFOikV3uu8IPzjiVefuN6+Snitd4e5btBktCcIr1Ww==","signatures":[{"sig":"MEUCIQCaxJdYcwTomIgjOupp5Y12ROPeR5/e4I0caV/Q0zrACAIgRApTw854eOaUMVfkTiVsizAdBG6jH7v5KQXkXqLv1jY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208436},"main":"./dist/pricing-tiers.umd.js","type":"module","module":"./dist/pricing-tiers.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/pricing-tiers.es.js","require":"./dist/pricing-tiers.umd.js"}},"gitHead":"8393769dd0c3757c7032c7d17bdb4d726e97807c","scripts":{"dev":"vite --force","lint":"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0","test":"vitest run","watch":"vitest","preview":"vite preview","build:local":"tsc && vite build --mode local","build:production":"tsc && vite build --mode production","build:development":"tsc && vite build --mode development"},"_npmUser":{"name":"pavelbosacky","email":"pavel.bosacky@gmail.com"},"repository":{"url":"git+https://gitlab.com/buyloop/pricing-tiers.git","type":"git"},"_npmVersion":"10.2.4","description":"The `PricingTiers` component is a React component for rendering a pricing list using Buyloop's public API. It allows you to display pricing information for different tiers, and you can customize its behavior with various properties.","directories":{},"_nodeVersion":"20.11.0","dependencies":{"react":"^18.2.0","react-dom":"^18.2.0","@mui/material":"^5.14.8","react-ribbons":"^1.1.7","@emotion/react":"^11.11.1","@emotion/styled":"^11.11.0","@mui/icons-material":"^5.14.8"},"_hasShrinkwrap":false,"devDependencies":{"c8":"^8.0.1","vite":"^4.4.5","jsdom":"^22.1.0","eslint":"^8.48.0","vitest":"^0.34.4","typescript":"^5.0.2","@types/react":"^18.2.15","vite-plugin-dts":"^3.5.3","@types/react-dom":"^18.2.7","eslint-plugin-react":"^7.33.2","react-test-renderer":"^18.2.0","@testing-library/dom":"^9.3.1","@vitejs/plugin-react":"^4.0.3","@testing-library/react":"^14.0.0","@typescript-eslint/parser":"^6.0.0","eslint-plugin-react-hooks":"^4.6.0","@types/react-test-renderer":"^18.0.1","eslint-plugin-react-refresh":"^0.4.3","@typescript-eslint/eslint-plugin":"^6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/pricing-tiers_0.3.4_1708075546791_0.6410863648468625","host":"s3://npm-registry-packages"}},"0.3.5":{"name":"@buyloop/pricing-tiers","version":"0.3.5","keywords":["react","components"],"author":{"name":"Pavel Bosacky"},"license":"SEE LICENSE IN LICENSE","_id":"@buyloop/pricing-tiers@0.3.5","maintainers":[{"name":"martincabala","email":"cabala.mato@gmail.com"},{"name":"jozefmorvay","email":"jozef.morvay1@gmail.com"},{"name":"pavelbosacky","email":"pavel.bosacky@gmail.com"}],"homepage":"https://gitlab.com/buyloop/pricing-tiers#readme","bugs":{"url":"https://gitlab.com/buyloop/pricing-tiers/issues"},"dist":{"shasum":"eb0121a664b4933bc1b53fb4e212e118c39ea653","tarball":"https://registry.npmjs.org/@buyloop/pricing-tiers/-/pricing-tiers-0.3.5.tgz","fileCount":13,"integrity":"sha512-jncV40CX3wNl8eRt2WDFfaUFnQ2Y9UFgDn71ctbja8dP2Yj6pPNrktdypRc/DGNG0fvLj/E1dY2QNslHWdnT2A==","signatures":[{"sig":"MEUCIQC2HTuAJQgWdbdsYHEIMDliITPzevqW2Yqayt7SZ7PM3gIgATHh8k92QurmoD4h2OGA7RQ8prk+CjAITQzMd4XqfdM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208436},"main":"./dist/pricing-tiers.umd.js","type":"module","module":"./dist/pricing-tiers.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/pricing-tiers.es.js","require":"./dist/pricing-tiers.umd.js"}},"gitHead":"95f6f0d33405f2aba242c0e4b80bd22a56505ca4","scripts":{"dev":"vite --force","lint":"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0","test":"vitest run","watch":"vitest","preview":"vite preview","build:local":"tsc && vite build --mode local","build:production":"tsc && vite build --mode production","build:development":"tsc && vite build --mode development"},"_npmUser":{"name":"pavelbosacky","email":"pavel.bosacky@gmail.com"},"repository":{"url":"git+https://gitlab.com/buyloop/pricing-tiers.git","type":"git"},"_npmVersion":"10.2.4","description":"The `PricingTiers` component is a React component for rendering a pricing list using Buyloop's public API. It allows you to display pricing information for different tiers, and you can customize its behavior with various properties.","directories":{},"_nodeVersion":"20.11.1","dependencies":{"react":"^18.2.0","react-dom":"^18.2.0","@mui/material":"^5.14.8","react-ribbons":"^1.1.7","@emotion/react":"^11.11.1","@emotion/styled":"^11.11.0","@mui/icons-material":"^5.14.8"},"_hasShrinkwrap":false,"devDependencies":{"c8":"^8.0.1","vite":"^4.4.5","jsdom":"^22.1.0","eslint":"^8.48.0","vitest":"^0.34.4","typescript":"^5.0.2","@types/react":"^18.2.15","vite-plugin-dts":"^3.5.3","@types/react-dom":"^18.2.7","eslint-plugin-react":"^7.33.2","react-test-renderer":"^18.2.0","@testing-library/dom":"^9.3.1","@vitejs/plugin-react":"^4.0.3","@testing-library/react":"^14.0.0","@typescript-eslint/parser":"^6.0.0","eslint-plugin-react-hooks":"^4.6.0","@types/react-test-renderer":"^18.0.1","eslint-plugin-react-refresh":"^0.4.3","@typescript-eslint/eslint-plugin":"^6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/pricing-tiers_0.3.5_1708953729349_0.38556178698729915","host":"s3://npm-registry-packages"}},"0.3.6":{"name":"@buyloop/pricing-tiers","version":"0.3.6","keywords":["react","components"],"author":{"name":"Pavel Bosacky"},"license":"SEE LICENSE IN LICENSE","_id":"@buyloop/pricing-tiers@0.3.6","maintainers":[{"name":"martincabala","email":"cabala.mato@gmail.com"},{"name":"jozefmorvay","email":"jozef.morvay1@gmail.com"},{"name":"pavelbosacky","email":"pavel.bosacky@gmail.com"}],"homepage":"https://gitlab.com/buyloop/pricing-tiers#readme","bugs":{"url":"https://gitlab.com/buyloop/pricing-tiers/issues"},"dist":{"shasum":"70fe3f4c100495e0dc8c54159090c3d99286fe86","tarball":"https://registry.npmjs.org/@buyloop/pricing-tiers/-/pricing-tiers-0.3.6.tgz","fileCount":13,"integrity":"sha512-PgBC87B5pqNDYpuydpPNauSZU3SO5Pt86FrhTbVm2Y+YG6fVYceuSkOm048xKzgMBn6cecz/vwGo/GMzLgUVHQ==","signatures":[{"sig":"MEQCIAzdSgx5R7gqztJNY6p8sB54H0DFxwT8DnLJGSuOY9P0AiA0mrpjReKG5BmfvK3ucz3HmPuGKY1/Z/EFeBb6yip9Ng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208531},"main":"./dist/pricing-tiers.umd.js","type":"module","module":"./dist/pricing-tiers.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/pricing-tiers.es.js","require":"./dist/pricing-tiers.umd.js"}},"gitHead":"9266ec1449cb360e02aa0e6f7a869d85e7a82186","scripts":{"dev":"vite --force","lint":"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0","test":"vitest run","watch":"vitest","preview":"vite preview","build:local":"tsc && vite build --mode local","build:production":"tsc && vite build --mode production","build:development":"tsc && vite build --mode development"},"_npmUser":{"name":"pavelbosacky","email":"pavel.bosacky@gmail.com"},"repository":{"url":"git+https://gitlab.com/buyloop/pricing-tiers.git","type":"git"},"_npmVersion":"10.2.4","description":"The `PricingTiers` component is a React component for rendering a pricing list using Buyloop's public API. It allows you to display pricing information for different tiers, and you can customize its behavior with various properties.","directories":{},"_nodeVersion":"20.11.1","dependencies":{"react":"^18.2.0","react-dom":"^18.2.0","@mui/material":"^5.14.8","react-ribbons":"^1.1.7","@emotion/react":"^11.11.1","@emotion/styled":"^11.11.0","@mui/icons-material":"^5.14.8"},"_hasShrinkwrap":false,"devDependencies":{"c8":"^8.0.1","vite":"^4.4.5","jsdom":"^22.1.0","eslint":"^8.48.0","vitest":"^0.34.4","typescript":"^5.0.2","@types/react":"^18.2.15","vite-plugin-dts":"^3.5.3","@types/react-dom":"^18.2.7","eslint-plugin-react":"^7.33.2","react-test-renderer":"^18.2.0","@testing-library/dom":"^9.3.1","@vitejs/plugin-react":"^4.0.3","@testing-library/react":"^14.0.0","@typescript-eslint/parser":"^6.0.0","eslint-plugin-react-hooks":"^4.6.0","@types/react-test-renderer":"^18.0.1","eslint-plugin-react-refresh":"^0.4.3","@typescript-eslint/eslint-plugin":"^6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/pricing-tiers_0.3.6_1708958363195_0.5778604068991218","host":"s3://npm-registry-packages"}},"0.3.7":{"name":"@buyloop/pricing-tiers","version":"0.3.7","type":"module","scripts":{"dev":"vite --force","build:local":"tsc && vite build --mode local","build:production":"tsc && vite build --mode production","build:development":"tsc && vite build --mode development","lint":"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0","preview":"vite preview","test":"vitest run","watch":"vitest"},"main":"./dist/pricing-tiers.umd.js","module":"./dist/pricing-tiers.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/pricing-tiers.es.js","require":"./dist/pricing-tiers.umd.js"}},"dependencies":{"@emotion/react":"^11.11.1","@emotion/styled":"^11.11.0","@mui/icons-material":"^5.14.8","@mui/material":"^5.14.8","react":"^18.2.0","react-dom":"^18.2.0","react-ribbons":"^1.1.7"},"devDependencies":{"@testing-library/dom":"^9.3.1","@testing-library/react":"^14.0.0","@types/react":"^18.2.15","@types/react-dom":"^18.2.7","@types/react-test-renderer":"^18.0.1","@typescript-eslint/eslint-plugin":"^6.0.0","@typescript-eslint/parser":"^6.0.0","@vitejs/plugin-react":"^4.0.3","c8":"^8.0.1","eslint":"^8.48.0","eslint-plugin-react":"^7.33.2","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.4.3","jsdom":"^22.1.0","react-test-renderer":"^18.2.0","typescript":"^5.0.2","vite":"^4.4.5","vite-plugin-dts":"^3.5.3","vitest":"^0.34.4"},"repository":{"type":"git","url":"git+https://gitlab.com/buyloop/pricing-tiers.git"},"keywords":["react","components"],"author":{"name":"Pavel Bosacky"},"bugs":{"url":"https://gitlab.com/buyloop/pricing-tiers/issues"},"homepage":"https://gitlab.com/buyloop/pricing-tiers#readme","license":"SEE LICENSE IN LICENSE","_id":"@buyloop/pricing-tiers@0.3.7","gitHead":"cf6c4d6c076ccb39c37f0f34e7c2e29d4254fe22","description":"The `PricingTiers` component is a React component for rendering a pricing list using Buyloop's public API. It allows you to display pricing information for different tiers, and you can customize its behavior with various properties.","_nodeVersion":"22.2.0","_npmVersion":"10.8.1","dist":{"integrity":"sha512-C/vmL+CPgOtoKb31czwGyTvmHeJwfPu1d2npe+x1auHm2FSI+4/h9WSs0CuvBZpVh9pst0z9n991Hqo+EVe+xA==","shasum":"f0de4cda8e826ef7f339ced48610bf790822323a","tarball":"https://registry.npmjs.org/@buyloop/pricing-tiers/-/pricing-tiers-0.3.7.tgz","fileCount":13,"unpackedSize":208828,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGcqOgOkFEj2JFcaOx0/cQNm/3tl06VryhVrPq+bS02qAiATQjort1gBFM6W/d+sPtzUCm3UbC4uvqOt7aa9ezq+Eg=="}]},"_npmUser":{"name":"pavelbosacky","email":"pavel.bosacky@gmail.com"},"directories":{},"maintainers":[{"name":"martincabala","email":"cabala.mato@gmail.com"},{"name":"jozefmorvay","email":"jozef.morvay1@gmail.com"},{"name":"pavelbosacky","email":"pavel.bosacky@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/pricing-tiers_0.3.7_1718206913010_0.7985440617406845"},"_hasShrinkwrap":false}},"time":{"created":"2024-02-16T09:25:46.713Z","modified":"2024-06-12T15:41:53.435Z","0.0.1":"2023-09-23T10:47:47.063Z","0.0.2":"2023-09-23T12:23:22.143Z","0.0.3":"2023-09-23T12:26:54.180Z","0.0.4":"2023-09-24T12:36:36.315Z","0.0.5":"2023-09-24T17:57:10.718Z","0.1.0":"2023-09-24T18:20:44.836Z","0.0.7":"2023-09-24T18:28:40.516Z","0.1.1":"2023-10-01T13:05:44.218Z","0.1.2":"2023-10-02T05:07:39.160Z","0.1.3":"2023-10-05T17:29:46.466Z","0.1.4":"2023-10-05T17:31:31.700Z","0.2.0":"2023-10-05T17:31:58.276Z","0.1.5":"2023-10-06T11:51:40.724Z","0.1.6":"2023-10-12T08:58:04.670Z","0.1.7":"2023-10-12T18:30:26.286Z","0.1.8":"2024-01-24T20:18:01.128Z","0.3.0":"2024-01-31T19:36:28.405Z","0.3.1":"2024-02-01T10:50:24.283Z","0.3.2":"2024-02-01T11:49:44.008Z","0.3.3":"2024-02-13T06:07:35.852Z","0.3.4":"2024-02-16T09:25:46.968Z","0.3.5":"2024-02-26T13:22:09.520Z","0.3.6":"2024-02-26T14:39:23.385Z","0.3.7":"2024-06-12T15:41:53.208Z"},"maintainers":[{"name":"martincabala","email":"cabala.mato@gmail.com"},{"name":"jozefmorvay","email":"jozef.morvay1@gmail.com"},{"name":"pavelbosacky","email":"pavel.bosacky@gmail.com"}],"author":{"name":"Pavel Bosacky"},"repository":{"type":"git","url":"git+https://gitlab.com/buyloop/pricing-tiers.git"},"keywords":["react","components"],"license":"SEE LICENSE IN LICENSE","homepage":"https://gitlab.com/buyloop/pricing-tiers#readme","bugs":{"url":"https://gitlab.com/buyloop/pricing-tiers/issues"},"readme":"# Buyloop PricingTiers Component Documentation\nThe `PricingTiers` component is a React component for rendering a pricing list using Buyloop's public API. It allows you to display pricing information for different tiers, and you can customize its behavior with various properties.\n\n## Installation\nYou can install the `PricingTiers` component via npm:\n\n```bash\nnpm install @buyloop/pricing-tiers\n```\n## Usage\nImport the `PricingTiers` component into your React application and use it as follows:\n\n```tsx\nimport PricingTiers from \"@buyloop/pricing-tiers\";\n\nfunction MyApp() {\n    return (\n        <PricingTiers\n            buyloop-api-key={\"your_buyloop_public_api_key\"}\n            pricingTemplateId={\"your_pricing_template_id\"}\n            language={language}\n            callbackFunction={(pricingTier, selectedPrice) => \n                console.log(`Price tier selected: ${pricingTier.displayName}, price: ${selectedPrice.value}${selectedPrice.currency}`)}\n            showUnavailableFeatures={true} // Optional, set to true to display unavailable features with strikethrough\n        />\n    );\n}\n```\nMake sure to replace \"your_buyloop_public_api_key\" and \"your_pricing_template_id\" with your actual API key and pricing template ID.\n\n## Properties\nThe `PricingTiers` component accepts the following properties:\n\n- `buyloop-api-key` (string, required): Your Buyloop public API key, which can be generated in the \"Developers\" section of the Buyloop admin UI.\n- `pricingTemplateId` (string, required): The ID of the pricing template to render.\n- `language` (string, required): The language to render in [ISO 639-1](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) code format\n- `callbackFunction` (function, required): A callback function that will be called once a pricing tier is selected. It receives the selected PricingTier as an input argument. You can customize the behavior in this function.\n- `showUnavailableFeatures` (boolean, optional): If set to true, unavailable features on tiers will be rendered with strikethrough. If set to false, they will not be displayed. Default is false.\n\n## Styling the Component\nThe `PricingTiers` component uses standard Material-UI components and can be styled in various ways to match your application's design. You can apply styles globally through your application's theme, create a dedicated theme for the `PricingTiers` component, or directly use CSS to customize its appearance.\n\n### Global Theme Styling\nTo style the `PricingTiers` component using your application's global theme, you can define the styling options in your theme configuration. Here's an example of how to customize the component using the global theme:\n```js\nconst theme = createTheme({\n    palette: {\n        mode: 'light',\n        primary: {\n            main: '#8DDFCB',\n            contrastText: '#82A0D8',\n        },\n        secondary: {\n            main: '#ECEE81',\n        },\n        text: {\n            primary: '#414141',\n            secondary: '#555555',\n            disabled: '#E2E2E2',\n        },\n        background: {\n            paper: '#EDB7ED',\n        },\n        error: {\n            main: '#ac350c',\n        },\n    },\n    typography: {\n        fontFamily: 'courier',\n        h1: {\n            fontSize: '5rem',\n            fontWeight: 400,\n        },\n        h2: {\n            fontSize: '4rem',\n            fontWeight: 600,\n            color: '#8DDFCB'\n        },\n        button: {\n            textTransform: 'uppercase'\n        },\n    },\n    components: {\n        MuiCard: {\n            styleOverrides: {\n                root: {\n                    border: \"2px solid\",\n                    borderColor: \"#82A0D8\",\n                }\n            }\n        },\n        MuiButton: {\n            styleOverrides: {\n                root: {\n                    border: \"2px solid\",\n                    borderColor: \"#82A0D8\",\n                }\n            }\n        },\n    }\n});\n```\n\n","readmeFilename":"README.md"}