crmbonus-component-wake 2.0.51 → 2.0.52

package/dist/collection/components/giftback-form/subcomponents/giftback-info/giftback-info.css

@@ -0,0 +1,154 @@
+:host {
+    --text-color: #6D6D5F
+}
+
+.giftback-container {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+}
+
+h3 {
+    font-size: 1.2rem;
+    margin-bottom: 8px;
+    color: #333;
+}
+
+.container-description p {
+    font-size: 14px;
+    font-weight: 400;
+}
+
+
+p {
+    font-size: 12px;
+    color: #000;
+}
+
+.value-display h2 {
+    color: #6D6D5F;
+    /* Verde para o valor atual */
+    font-size: 1.6rem;
+    margin: 16px 0;
+}
+
+input[type='range'] {
+    width: 100%;
+    margin: 12px 0;
+    -webkit-appearance: none;
+    background: #ddd;
+    height: 4px;
+    border-radius: 4px;
+    outline: none;
+    padding: 3px;
+}
+
+input[type='range']::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 16px;
+    height: 16px;
+    background: var(--text-color);
+    /* Azul para o slider */
+    border-radius: 50%;
+    cursor: pointer;
+}
+
+.options {
+    margin: 0px 0;
+    display: flex;
+    gap: 10px;
+    flex-direction: column;
+}
+
+.options label {
+    display: block;
+    margin: 0px 0;
+    font-size: 0.9rem;
+    color: #333;
+}
+
+.options input[type='radio'] {
+    margin-right: 8px;
+    height: 16px;
+    width: 16px;
+}
+
+.options input[type='radio'] {
+    appearance: none;
+    -webkit-appearance: none;
+    margin-right: 8px;
+    width: 16px;
+    height: 16px;
+    border: 2px solid #ddd;
+    border-radius: 50%;
+    background-color: #fff;
+    cursor: pointer;
+    transition: all 0.3s;
+    padding: 0px;
+  }
+
+.options input[type='radio']:checked {
+    border-color: #000;
+    background-color: #FAFAFA;
+    border: 4px solid #000;
+}
+
+.info-box {
+    background-color: #f9f9f9;
+    border: 1px solid #e0e0e0;
+    border-radius: 4px;
+    padding: 8px;
+    font-size: 14px;
+    color: #262626;
+    line-height: 20px;
+}
+
+.info-icon {
+    font-size: 0.9rem;
+    cursor: pointer;
+    color: #888;
+}
+
+h3 {
+    font-size: 1.2rem;
+    margin-bottom: 8px;
+    color: #333;
+}
+
+.slider-wrapper {
+    position: relative;
+    margin: 21px 0px 0px 0px;
+}
+
+.slider {
+    width: 100%;
+    -webkit-appearance: none;
+    background: #ddd;
+    height: 4px;
+    border-radius: 2px;
+    outline: none;
+}
+
+.slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 16px;
+    height: 16px;
+    background: var(--text-color);
+    /* Azul para o slider */
+    border-radius: 50%;
+    cursor: pointer;
+}
+
+.slider-value {
+    position: absolute;
+    top: -30px;
+    /* Posição acima do slider */
+    font-size: 16px;
+    font-weight: 700;
+    color: var(--text-color);
+    /* Verde para o texto */
+    transform: translateX(-50%);
+    white-space: nowrap;
+}

package/dist/collection/components/giftback-form/subcomponents/giftback-info/giftback-info.js

@@ -0,0 +1,156 @@
+import { h } from "@stencil/core";
+import i18next from "../../../../i18n/i18n";
+export class GiftbackInfo {
+    constructor() {
+        this.usedValue = 0;
+        this.selectedOption = 'none';
+        this.loading = false;
+        this.bonus = {
+            totalBonus: 52,
+            cartId: "",
+            minimumPurchase: 6000,
+            bonusBalance: 25,
+            calculatedValue: 25,
+            firstValidityDate: "",
+            totalValue: 200
+        };
+        this.reserve = undefined;
+        this.cancel = undefined;
+        this.sliderPosition = 50;
+    }
+    componentWillLoad() {
+        this.usedValue = parseFloat(this.bonus.bonusBalance.toString());
+        this.buildPositionSlider(0, this.bonus.totalBonus);
+    }
+    handleSliderChange(event) {
+        const input = event.target;
+        this.usedValue = parseFloat(input.value);
+        // Calculando a posição do texto com base no valor do slider
+        // const percentage = ((this.usedValue - parseInt(input.min)) / (parseInt(input.max) - parseInt(input.min))) * 100;
+        // this.sliderPosition = percentage;
+        this.buildPositionSlider(parseFloat(input.min), parseFloat(input.max));
+    }
+    buildPositionSlider(min, max) {
+        // Calculando a posição do texto com base no valor do slider
+        const percentage = ((this.usedValue - min) / (max - min)) * 100;
+        this.sliderPosition = percentage;
+    }
+    async handleOptionChange(option) {
+        this.selectedOption = option;
+        switch (this.selectedOption) {
+            case 'use':
+                await this.reserve(this.usedValue);
+                break;
+            case 'dontUse':
+                await this.cancel();
+                break;
+            default:
+        }
+    }
+    render() {
+        const remainingGiftback = this.bonus.minimumPurchase - this.bonus.totalValue;
+        const translateDescription = i18next.t("giftDescription", { amount: `${this.bonus.totalBonus.toFixed(2).replace(".", ",")}`, custom_name: "Giftback" });
+        return (h("div", { key: 'fbc3b08d2e77fc7312ecbf24e9e785284c08ea86', class: "giftback-container" }, h("div", { key: '3717e46c93ad2dc4547a042ba159c3d28de64beb', class: "container-description" }, h("p", { key: '2acb0e117f873348cd819faec028f9d27736a106', innerHTML: translateDescription })), h("div", { key: '59c662da7f9b3070004ff7fe9a782a4714bff125', class: "slider-wrapper" }, h("div", { key: '4ed2c4049deb9d5c32f12b251cec2acd56446fa5', class: "slider-value", style: {
+                left: `calc(${this.sliderPosition}% - 20px)`, // Ajuste para centralizar o texto
+            } }, "R$ ", this.usedValue.toFixed(2).replace(".", ",")), h("input", { key: '1a73c61a7b2fc20932773b69147b27dc6ca0247b', type: "range", min: "0", max: this.bonus.totalBonus, value: this.usedValue, class: "slider", step: "0.01", onInput: (event) => this.handleSliderChange(event), style: {
+                background: `linear-gradient(to right, #6D6D5F ${this.sliderPosition}%, #ddd ${this.sliderPosition}%)`,
+            } })), h("p", { key: 'f490f6b4eb0adae75140b34e36694b49feb241ed' }, "Adicione ", h("strong", { key: 'a7b67ed94043d2d55cc9748c956c5516ce535245' }, "R$ ", remainingGiftback < 0 ? "0,00" : remainingGiftback.toFixed(2).replace(".", ",")), " ao carrinho para atingir o valor m\u00E1ximo!"), h("div", { key: 'd0ce836a492168e7f8439fbc3b1a7bca85305248', class: "options" }, h("label", { key: 'dd661987e7df0d967b4fe930c47144718d31b9f6' }, h("input", { key: '3201b786de110c3071d14af6134f61b9f1ede2c0', type: "radio", name: "giftbackOption", value: "use", checked: this.selectedOption === 'use', onChange: () => this.handleOptionChange('use') }), "Usar o meu Giftback"), h("label", { key: 'c7da572b125d4ae515e4ca026bc25815e0701712' }, h("input", { key: 'b6d1aee5626923f8cf49ae90114fb8e5c35e3fbf', type: "radio", name: "giftbackOption", value: "dontUse", checked: this.selectedOption === 'dontUse', onChange: () => this.handleOptionChange('dontUse') }), "N\u00E3o usar o meu Giftback")), h("div", { key: '577c1869fc4cb58d2817f0ab7fb2c18fae99ed66', class: "info-box" }, "O Giftback ser\u00E1 aplicado na pr\u00F3xima etapa.")));
+    }
+    static get is() { return "giftback-info"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["giftback-info.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["giftback-info.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "loading",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "bonus": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Partial<IBonus>",
+                    "resolved": "{ hasBonus?: boolean; bonusBalance?: number; totalBonus?: number; minimumPurchase?: number; bonusIds?: string; firstValidityDate?: string; history?: [{ validityStart: string; validityEnd: string; value: number; }, { validityStart: string; validityEnd: string; value: number; }]; storeId?: number; userId?: number; cartId?: string; calculatedValue?: number; totalValue?: number; }",
+                    "references": {
+                        "Partial": {
+                            "location": "global",
+                            "id": "global::Partial"
+                        },
+                        "IBonus": {
+                            "location": "import",
+                            "path": "../../../../dto/validate.pin.bonus",
+                            "id": "src/dto/validate.pin.bonus.ts::IBonus"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "defaultValue": "{\n        totalBonus: 52,\n        cartId: \"\",\n        minimumPurchase: 6000,\n        bonusBalance: 25,\n        calculatedValue: 25,\n        firstValidityDate: \"\",\n        totalValue: 200\n    }"
+            },
+            "reserve": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(amountRedeemed: number) => void",
+                    "resolved": "(amountRedeemed: number) => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "cancel": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => void",
+                    "resolved": "() => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            }
+        };
+    }
+    static get states() {
+        return {
+            "usedValue": {},
+            "selectedOption": {},
+            "sliderPosition": {}
+        };
+    }
+}
+//# sourceMappingURL=giftback-info.js.map

package/dist/collection/components/giftback-form/subcomponents/giftback-info/giftback-info.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"giftback-info.js","sourceRoot":"","sources":["../../../../../../src/components/giftback-form/subcomponents/giftback-info/giftback-info.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, h } from \"@stencil/core\";\nimport { IBonus } from \"../../../../dto/validate.pin.bonus\";\n\nimport i18next from '../../../../i18n/i18n'\n\n@Component({\n    tag: 'giftback-info',\n    styleUrls: ['giftback-info.css']\n})\nexport class GiftbackInfo {\n    @State() usedValue: number = 0;\n    @State() selectedOption: string = 'none';\n\n    @Prop() loading: boolean = false;\n    @Prop() bonus: Partial<IBonus> = {\n        totalBonus: 52,\n        cartId: \"\",\n        minimumPurchase: 6000,\n        bonusBalance: 25,\n        calculatedValue: 25,\n        firstValidityDate: \"\",\n        totalValue: 200\n    };\n    @Prop() reserve: (amountRedeemed: number) => void;\n    @Prop() cancel: () => void;\n\n    @State() sliderPosition: number = 50;\n\n    componentWillLoad() {\n        this.usedValue = parseFloat(this.bonus.bonusBalance.toString());\n\n        this.buildPositionSlider(0, this.bonus.totalBonus);\n    }\n\n    handleSliderChange(event: Event) {\n        const input = event.target as HTMLInputElement;\n        this.usedValue = parseFloat(input.value);\n\n        // Calculando a posição do texto com base no valor do slider\n        // const percentage = ((this.usedValue - parseInt(input.min)) / (parseInt(input.max) - parseInt(input.min))) * 100;\n        // this.sliderPosition = percentage;\n\n        this.buildPositionSlider(parseFloat(input.min), parseFloat(input.max))\n    }\n\n\n    private buildPositionSlider(min:number, max: number) {\n        // Calculando a posição do texto com base no valor do slider\n        const percentage = ((this.usedValue - min) / (max - min)) * 100;\n        this.sliderPosition = percentage;\n    }\n\n    async handleOptionChange(option: string) {\n        this.selectedOption = option;\n        switch (this.selectedOption) {\n            case 'use':\n                await this.reserve(this.usedValue)\n                break;\n            case 'dontUse':\n                await this.cancel()\n                break;\n            default:\n        }\n    }\n    render() {\n        const remainingGiftback = this.bonus.minimumPurchase - this.bonus.totalValue;\n\n        const translateDescription = i18next.t(\"giftDescription\", { amount: `${this.bonus.totalBonus.toFixed(2).replace(\".\", \",\")}`, custom_name: \"Giftback\" })\n\n        return (\n\n            <div class=\"giftback-container\">\n                <div class=\"container-description\">\n                    <p innerHTML={translateDescription}></p>\n                </div>\n                <div class=\"slider-wrapper\">\n                    <div\n                        class=\"slider-value\"\n                        style={{\n                            left: `calc(${this.sliderPosition}% - 20px)`, // Ajuste para centralizar o texto\n                        }}\n                    >\n                        R$ {this.usedValue.toFixed(2).replace(\".\", \",\")}\n                    </div>\n                    <input\n                        type=\"range\"\n                        min=\"0\"\n                        max={this.bonus.totalBonus}\n                        value={this.usedValue}\n                        class=\"slider\"\n                        step=\"0.01\"\n                        onInput={(event) => this.handleSliderChange(event)}\n                        style={{\n                            background: `linear-gradient(to right, #6D6D5F ${this.sliderPosition}%, #ddd ${this.sliderPosition}%)`,\n                        }}\n                    />\n                </div>\n                <p>\n                    Adicione <strong>R$ {remainingGiftback < 0 ? \"0,00\" : remainingGiftback.toFixed(2).replace(\".\", \",\")}</strong> ao carrinho para atingir o valor\n                    máximo!\n                </p>\n                <div class=\"options\">\n                    <label>\n                        <input\n                            type=\"radio\"\n                            name=\"giftbackOption\"\n                            value=\"use\"\n                            checked={this.selectedOption === 'use'}\n                            onChange={() => this.handleOptionChange('use')}\n                        />\n                        Usar o meu Giftback\n                    </label>\n                    <label>\n                        <input\n                            type=\"radio\"\n                            name=\"giftbackOption\"\n                            value=\"dontUse\"\n                            checked={this.selectedOption === 'dontUse'}\n                            onChange={() => this.handleOptionChange('dontUse')}\n                        />\n                        Não usar o meu Giftback\n                    </label>\n                </div>\n                <div class=\"info-box\">\n                    O Giftback será aplicado na próxima etapa.\n                </div>\n            </div>\n        );\n    }\n}"]}

package/dist/collection/components/giftback-form/subcomponents/giftback-message/giftback-massage.js

@@ -0,0 +1,11 @@
+import { Component, Host, h } from "@stencil/core";
+Component({
+    tag: 'giftback-message',
+    styleUrls: ['giftback-message.css']
+});
+export class GiftbackMessage {
+    render() {
+        return (h(Host, { class: "container-message" }, h("h1", null, "Voc\u00EA n\u00E3o possui Giftback dispon\u00EDvel para essa compra.")));
+    }
+}
+//# sourceMappingURL=giftback-massage.js.map

package/dist/collection/components/giftback-form/subcomponents/giftback-message/giftback-massage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"giftback-massage.js","sourceRoot":"","sources":["../../../../../../src/components/giftback-form/subcomponents/giftback-message/giftback-massage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AAElD,SAAS,CAAC;IACN,GAAG,EAAE,kBAAkB;IACvB,SAAS,EAAE,CAAC,sBAAsB,CAAC;CACtC,CAAC,CAAA;AACF,MAAM,OAAO,eAAe;IACxB,MAAM;QACF,OAAO,CACH,EAAC,IAAI,IAAC,KAAK,EAAC,mBAAmB;YAC3B,qFAA8D,CAC3D,CACV,CAAA;IACL,CAAC;CACJ","sourcesContent":["import { Component, Host, h } from \"@stencil/core\"\n\nComponent({\n    tag: 'giftback-message',\n    styleUrls: ['giftback-message.css']\n})\nexport class GiftbackMessage {\n    render() {\n        return (\n            <Host class=\"container-message\">\n                <h1>Você não possui Giftback disponível para essa compra.</h1>\n            </Host>\n        )\n    }\n}"]}

package/dist/collection/components/giftback-form/subcomponents/phone-form/phone-form.js

@@ -0,0 +1,103 @@
+import { Host, h } from "@stencil/core";
+export class PhoneForm {
+    constructor() {
+        this.value = undefined;
+        this.loading = undefined;
+        this.handlerSubmit = undefined;
+        this.config = undefined;
+    }
+    async handlePhone() {
+        const phone = await this.phoneInputMask.getPhone();
+        await this.handlerSubmit(phone);
+    }
+    render() {
+        var _a;
+        return (h(Host, { key: 'a1fa8f1b45d663be5a434ac12af569100ad05f99', class: "crm-phone-form" }, h("label", { key: 'b374c22ba75e76f482379a7bfc1d1c202e72d9a9', class: "crm-subtitle" }, "Digite o seu celular para verificar se h\u00E1 desconto dispon\u00EDvel nessa compra"), h("phone-input-mask", { key: 'f0816190a397e74a9afb6fc3fe90ee3b00eab3be', initialValue: this.value, ref: ref => this.phoneInputMask = ref }), h("crm-button", { key: '1102ce8d88adf95fb46e3e1eaaa34830ecaa0be5', txtBtn: ((_a = this.config) === null || _a === void 0 ? void 0 : _a.btnApplyBonusLabel) || "Avançar", loading: this.loading, onClick: () => this.handlePhone() })));
+    }
+    static get is() { return "phone-form"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../../giftback-form.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../../giftback-form.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "value",
+                "reflect": false
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "loading",
+                "reflect": false
+            },
+            "handlerSubmit": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(phone: string) => void",
+                    "resolved": "(phone: string) => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "config": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "IInfoStore",
+                    "resolved": "IInfoStore",
+                    "references": {
+                        "IInfoStore": {
+                            "location": "import",
+                            "path": "../../../../helpers/info.config.helper",
+                            "id": "src/helpers/info.config.helper.ts::IInfoStore"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            }
+        };
+    }
+}
+//# sourceMappingURL=phone-form.js.map

package/dist/collection/components/giftback-form/subcomponents/phone-form/phone-form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"phone-form.js","sourceRoot":"","sources":["../../../../../../src/components/giftback-form/subcomponents/phone-form/phone-form.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,SAAS;;;;;;;IAWlB,KAAK,CAAC,WAAW;QAEb,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAA;QAElD,MAAM,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC;IAGD,MAAM;;QACF,OAAO,CACH,EAAC,IAAI,qDAAC,KAAK,EAAC,gBAAgB;YACxB,8DAAO,KAAK,EAAC,cAAc,2FAAoF;YAC/G,yEAAkB,YAAY,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,cAAc,GAAG,GAAG,GAAI;YAErF,mEAAY,MAAM,EAAE,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,kBAAkB,KAAI,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,GAAK,CAC5H,CACV,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Host, Prop, h } from \"@stencil/core\";\nimport { IInfoStore } from \"../../../../helpers/info.config.helper\";\n\n@Component({\n    tag: 'phone-form',\n    styleUrl: '../../giftback-form.css'\n})\nexport class PhoneForm {\n\n    private phoneInputMask: HTMLPhoneInputMaskElement;\n\n    @Prop() value: string;\n    @Prop() loading: boolean;\n    @Prop() handlerSubmit: (phone: string) => void;\n\n    @Prop() config: IInfoStore;\n\n\n    async handlePhone() {\n\n        const phone = await this.phoneInputMask.getPhone()\n\n        await this.handlerSubmit(phone);\n    }\n\n\n    render() {\n        return (\n            <Host class=\"crm-phone-form\">\n                <label class=\"crm-subtitle\" >Digite o seu celular para verificar se há desconto disponível nessa compra</label>\n                <phone-input-mask initialValue={this.value} ref={ref => this.phoneInputMask = ref} />\n\n                <crm-button txtBtn={this.config?.btnApplyBonusLabel || \"Avançar\"} loading={this.loading} onClick={() => this.handlePhone() } />\n            </Host>\n        )\n    }\n}"]}

package/dist/collection/components/giftback-form/subcomponents/pin-form/pin-form.css

@@ -0,0 +1,84 @@
+:host {
+    display: block;
+    font-family: Arial, sans-serif;
+}
+
+.form-container-pin {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.pin-container {
+    display: flex;
+    /* margin: 26px 0; */
+    justify-content: start;
+    gap: 10px;
+}
+
+input {
+    width: 40px;
+    height: 48px;
+    font-size: 14px;
+    text-align: center;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+button {
+    padding: 10px 20px;
+    background-color: #ddd;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+
+.success {
+    color: green;
+    margin-top: 10px;
+}
+
+.button {
+    top: 50%;
+    background-color: #6c6c7e;
+    color: #fff;
+    border: none;
+    border-radius: 10px;
+    padding: 15px;
+    min-height: 30px;
+    min-width: 120px;
+    font-size: 20px;
+    cursor: pointer;
+}
+
+.button-cancel {
+    top: 50%;
+    background-color: #ffffff;
+    color: #1e1c1c;
+    border: 1px solid gray;
+    border-radius: 10px;
+    padding: 10px;
+    min-height: 30px;
+    min-width: 120px;
+    font-size: 19px;
+    cursor: pointer;
+}
+
+.crm-description {
+    font-size: 14px;
+    width: 100%;
+    display: flex;
+    gap: 9px;
+}
+
+.crm-description a {
+    font-weight: bold;
+    cursor: pointer;
+    text-decoration: underline;
+}
+
+.crm-description div {
+    display: flex;
+    gap: 5px;
+}