# @cloak-app/customer

> Cloak components for rendering customer components.

Latest version **1.0.0** (published 2022-09-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install @cloak-app/customer
pnpm add @cloak-app/customer
yarn add @cloak-app/customer
bun add @cloak-app/customer
```

## Health

**Score 5/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: insecure dependencies; abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2022-09-15 |
| First published | 2022-09-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 9 |
| Unpacked size | 76.8 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Bukwild |
| Maintainers | lemoswilson, mattaebersold, brokenhd, sjstark, jonjahr, weotch |

## Links

- npm: https://www.npmjs.com/package/@cloak-app/customer
- Repository: https://github.com/BKWLD/cloak-copy
- Homepage: https://github.com/BKWLD/cloak-copy#readme
- Issues: https://github.com/BKWLD/cloak-copy/issues
- npm.io page: https://npm.io/package/@cloak-app/customer

## Dependencies (9)

- [lodash](https://npm.io/package/lodash.md) ^4.0.0
- [atob-lite](https://npm.io/package/atob-lite.md) ^2.0.0
- [btoa-lite](https://npm.io/package/btoa-lite.md) ^1.0.0
- [js-cookie](https://npm.io/package/js-cookie.md) ^2.0.0
- [@nuxt/utils](https://npm.io/package/@nuxt/utils.md) ^2.0.0
- [@bkwld/vue-modal](https://npm.io/package/@bkwld/vue-modal.md) github:BKWLD/vue-modal#9dc40c6
- [@cloak-app/utils](https://npm.io/package/@cloak-app/utils.md) ^1.2.0
- [@nuxtjs/style-resources](https://npm.io/package/@nuxtjs/style-resources.md) ^1.0.0
- [vue-country-region-select](https://npm.io/package/vue-country-region-select.md) ^2.0.0

## Recent versions

- 1.0.0 (latest) — 2022-09-15

## README

# @cloak-app/customer

Cloak components for rendering Customer components.

- [View demo](https://cloak-customer.netlify.app)
- [Edit CodeSandbox](https://githubbox.com/BKWLD/cloak-customer)

## Install

1. Install with `yarn add @cloak-app/customer`
2. Add to `nuxt.config` with `buildModules: ['@cloak-app/customer']`
3. Make sure components is set to true in the project's nuxt.config so the components can be auto-loaded
4. Set Shopify admin api permissions
  - create a private 'develop' app
  - allow admin api access & allow permission to
  - write_customers
  - read_customers
5. Make sure accounts are at least set to optional on the shop (/admin/settings/checkout)
6. Redirect account pages to the nuxt site (this will need to be placed either in `shopify-theme/main.coffee` or `shopify-theme/plugins/routing.coffee`)
```
# Redirect account pages to www site
if match = location.pathname.match /^\/(account)/
then location.href = makeNuxtUrl location.pathname
```

### Options

- `cloak.customer:`
  - `authenticatedRoute` - The route to redirect users who aren't authenticated. Defaults to `/account`
  - `unauthenticatedRoute` - The route to redirect users who aren't authenticated. Defaults to `/account/login`
  - `layout` - The Nuxt layout to use within the customer pages. Defaults to `default`.

## Expected project components
- `<btn>`

### Expected Styus vars
- radius
- spacing (xs - xxl)
- ui-grey
- primary-color
- ui-error
- tablet-up() and tablet-down() breakpoint helpers

### Expected ENV vars
- SHOPIFY_URL
- APP_ENV
- SHOPIFY_STOREFRONT_TOKEN

### Module Options

<!-- - `cloak.copy:`
  - `maxWidthClass` - The max width class to use to `max-w-medium` -->

## Components

<!-- ### `cloak-copy`

This is a generic copy renderer that can be used by other Cloak components so they can stay ignorant of the CMS.  For instance, a FAQ component with a CMS-specific adapater.  In this case, the FAQ component can just pass along the `content` content it was provided to `cloak-copy` and never know whether it is rendering markup from Redactor or rich text from Contentful.

- props:
  - `content` - Either an HTML string or a Contentful rich text JSON document
  - `balanceText` - Boolean, enables [vue-balance-text](https://github.com/BKWLD/vue-balance-text)
  - `unorphan` - Boolean, enables [vue-unorphan](https://github.com/BKWLD/vue-unorphan)
 -->

---
_Source: https://npm.io/package/@cloak-app/customer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._