npm package: @faume/account
Description: ___
Author: maevaPasteur
Latest version: 1.0.84
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Module compte
___

## Installation

```
yarn add @faume/account
```
<br>

### account.js

- Créer un fichier `account.js` à la racine de src
- Importer `account.js` dans le layout ou le snippet `layout-head`. Attention à l'importer uniquement lorsque `template.name == "account"`

```js
import Account from "@faume/account";

window.addEventListener('DOMContentLoaded', () => {

    new Account({
        shop_name: "Nom de la boutique",
        shop_website: "Url de la boutique",
        displayAccountSection: true,
        secondhand_shop_name: "Nom de la boutique vintage",
        secondhand_shop_website: "Url de la boutique vintage",
        voucherFromArticle: false,
        apiBaseUrl: "[Domaine]-app"
    })

})
```
**Il est important de mettre à ``true`` la valeur de `displayAccountSection` lors de l'installation, car ça va nous permettre de générer le contenu de la section `account.liquid`. Une fois le contenu de la section mis à jour, on pourra remettre à `false` sa valeur.**

<br>

### webpack.config.js

- Ajouter cette variable avant le `module-exports`
```js
const account = {
    entry: './account.js',
    output: {
        path: path.resolve(__dirname, '../assets/'),
        filename: 'account.js'
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        },
        extensions: ['*', '.js', '.vue', '.json']
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                resourceQuery: /blockType=i18n/,
                type: 'javascript/auto',
                loader: '@kazupon/vue-i18n-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader'
            },
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            }
        ]
    },
    plugins: [new VueLoaderPlugin()]
};
```

- Ajouter `account` dans la tableau `module.exports = [..., account];`

<br>

### template account

- Créer une nouvelle section account
- L'importer dans le template account

```html
{% section 'account' %}
<div class="vue-account"></div>
```

<br>
<br>

---

## Résumé de l'insallation

- Lancer ``yarn add @faume/account`` dans `src`
- Créer ``account.js`` dans `src`
- Copier coller le contenu et modifier ses arguments. **Attention** de mettre à ``true`` la valeur de `displayAccountSection`
- Modifier ``webpack.config.js``
- Créer une section ``account.liquid``
- Importer le fichier ``account.js`` dans le layout
- Remplacer le contenu du template ``account.liquid``
- Lancer ``theme watch --env=X`` à la racine
- Lancer ensuite ``yarn watch`` dans `src`
- Dans le navigateur, copier **l'intégralité** du dernier `console.log`, et coller le dans la section ``account.liquid``
- Dans ``account.js``, mettre à `false` la valeur de `displayAccountSection` pour ne plus afficher le `console.log`

<br>
<br>

---

## Mise à jour

- Lancer ``yarn add @faume/account@latest`` dans src
- Lancer ``theme watch --env=X`` à la racine
- Lancer ensuite ``yarn watch`` dans `src`
- Mettre à ``true`` la valeur de `displayAccountSection`
- Dans le navigateur, copier **l'intégralité** du dernier `console.log`, et coller le dans la section ``account.liquid``
- Dans ``account.js``, mettre à `false` la valeur de `displayAccountSection` pour ne plus afficher le `console.log`

---

<br>
<br>

## Personnalisation

### Les paramètres

```js
new Account({

    container: '.vue-container',
    
    shop_name: "Nom de la marque",
    shop_website: "Url du site officiel",
    
    secondhand_shop_name: "Nom du site vintage",
    secondhand_shop_website: "Url du site",
    
    voucherFromArticle: false,
    // true : Générer un bon d'achat à partir d'un article
    // false : Générer à partir d'un montant
    
    displayAccountSection: false, 
    // Générer et afficher le contenu de la section account dans la console
    // Attention à bien copier coller l'intégralité du console.log

    apiBaseUrl: "[Domaine]-app",
    
})
```
<br>

### Styles

Pour modifier l'apparence du module, on peut créer des fichiers `.scss` comme pour éditer n'importe quelle page.
<br>
On peut également, et c'est recommandé, modifier directement les variables `css` suivantes :

```css 
    --ac-color-red: #b81b1b;
    --ac-color-red-light: #FFECEB;
    --ac-color-green: #6c973d;
    --ac-color-green-light: #e9efe3;
    --ac-color-grey: #aaa;
    --ac-color-border: #ddd;
    --ac-color-text: #000;
    --ac-color-background: #eee;

    --ac-title-font: 'Helvetica', Arial, sans-serif;
    --ac-title-transform: uppercase;
    --ac-title-weight: 700;
    --ac-title-line-height: 1.2;
    --ac-title-letter: normal;

    --ac-text-font: 'Helvetica', Arial, sans-serif;
    --ac-text-weight: 300;
    --ac-text-line-height: 1.4;
    --ac-text-letter: normal;

    --ac-title-1-desktop: 2.6rem;
    --ac-title-1-mobile: 2.6rem;
    --ac-title-2-desktop: 2rem;
    --ac-title-2-mobile: 2rem;
    --ac-title-3-desktop: 1.6rem;
    --ac-title-3-mobile: 1.6rem;
    --ac-title-4-desktop: 1.3rem;
    --ac-title-4-mobile: 1.3rem;

    --ac-text-1: 1.3rem;
    --ac-text-2: 1.2rem;
    --ac-text-3: 1.1rem;
    --ac-text-4: 1rem;

    --ac-number-size: 4rem;

    --ac-btn-height: 44px;
```