Skip to content

Commit

Permalink
feat: connect catalog in whatsapp account tab
Browse files Browse the repository at this point in the history
  • Loading branch information
@paulobernardoaf
paulobernardoaf committed Nov 10, 2023
1 parent 9e1e42e commit eaae407
Show file tree
Hide file tree
Showing 10 changed files with 366 additions and 30 deletions.
Binary file added src/assets/vtex_small.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 3 additions & 3 deletions src/components/config/channels/whatsapp/Config.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,9 +156,9 @@
try {
const options = { code: this.app.code, appUuid: this.app.uuid };
this.skipLoad = skipLoad;
await this.fetchAppInfo(options);
await this.fetchProfile(options);
await this.getWhatsAppCloudCatalogs({ appUuid: this.app.uuid });
this.fetchAppInfo(options);
this.fetchProfile(options);
this.getWhatsAppCloudCatalogs({ appUuid: this.app.uuid });
this.skipLoad = false;
} catch (error) {
unnnicCallAlert({
Expand Down
211 changes: 211 additions & 0 deletions src/components/config/channels/whatsapp/components/CreateCatalogModalContent.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,211 @@
<template>
<div class="modal">
<div slot="message" class="modal__content">
<span class="modal__content__title">{{ $t('whatsapp.create_catalog.title') }}</span>

<div class="modal__content__header">
<span class="modal__content__header__title">{{
$t('whatsapp.create_catalog.header.title')
}}</span>
<span class="modal__content__header__description">{{
$t('whatsapp.create_catalog.header.description')
}}</span>
</div>

<div class="modal__content__form">
<div class="modal__content__form__options">
<div
:class="['modal__content__form__options__card', type === 'vtex' ? 'selected' : '']"
@click="type = 'vtex'"
>
<div class="modal__content__form__options__card__icon">
<img
class="modal__content__form__options__card__icon__image"
src="~@/assets/vtex_small.png"
/>
</div>

<div class="modal__content__form__options__card__content">
<span class="modal__content__form__options__card__content__title">{{
$t('whatsapp.create_catalog.option.vtex.title')
}}</span>
<span class="modal__content__form__options__card__content__description">
{{ $t('whatsapp.create_catalog.option.vtex.description') }}
</span>
</div>
</div>

<div
:class="['modal__content__form__options__card', type === 'default' ? 'selected' : '']"
@click="type = 'default'"
>
<div class="modal__content__form__options__card__icon">
<unnnic-icon icon="upload" />
</div>

<div class="modal__content__form__options__card__content">
<span class="modal__content__form__options__card__content__title">{{
$t('whatsapp.create_catalog.option.default.title')
}}</span>
<span class="modal__content__form__options__card__content__description">
{{ $t('whatsapp.create_catalog.option.default.description') }}
</span>
</div>
</div>
</div>

<span
v-html="$t('whatsapp.create_catalog.footer')"
class="modal__content__form__footer"
></span>
</div>
</div>
<div class="modal__buttons">
<unnnic-button slot="options" type="tertiary" @click="closeModal">
{{ $t('general.Cancel') }}
</unnnic-button>
<!-- TODO: Check if VTEX app is enabled to enable this button -->
<unnnic-button slot="options" @click="createCatalog">
{{ $t('general.continue') }}
</unnnic-button>
</div>
</div>
</template>

<script>
export default {
name: 'CreateCatalogModalContent',
data() {
return {
type: 'vtex',
};
},
methods: {
createCatalog() {
this.$emit('createCatalog', this.type);
},
closeModal() {
this.$emit('closeModal');
},
},
};
</script>

<style lang="scss" scoped>
.modal {
display: flex;
flex-direction: column;
gap: $unnnic-spacing-md;
&__buttons {
display: flex;
gap: $unnnic-spacing-lg;
widows: 100%;
flex: 1;
::v-deep .unnnic-button {
width: 100%;
}
}
&__content {
display: flex;
flex-direction: column;
gap: $unnnic-spacing-sm;
text-align: left;
&__title {
color: $unnnic-color-neutral-darkest;
font-size: $unnnic-font-size-title-sm;
font-weight: $unnnic-font-weight-black;
line-height: $unnnic-font-size-title-sm + $unnnic-line-height-medium;
}
&__header {
display: flex;
flex-direction: column;
gap: $unnnic-spacing-nano;
&__title {
color: $unnnic-color-neutral-darkest;
font-size: $unnnic-font-size-body-lg;
font-weight: $unnnic-font-weight-black;
line-height: $unnnic-font-size-body-lg + $unnnic-line-height-medium;
}
&__description {
color: $unnnic-color-neutral-cloudy;
font-size: $unnnic-font-size-body-md;
line-height: $unnnic-font-size-body-md + $unnnic-line-height-medium;
}
}
&__form {
display: flex;
flex-direction: column;
gap: $unnnic-spacing-sm;
&__options {
display: flex;
flex-direction: column;
gap: $unnnic-spacing-xs;
&__card {
display: flex;
padding: $unnnic-spacing-ant $unnnic-spacing-sm;
align-items: center;
gap: $unnnic-spacing-sm;
border-radius: $unnnic-border-radius-sm;
border: $unnnic-border-width-thinner solid $unnnic-color-neutral-cleanest;
background: $unnnic-color-neutral-lightest;
cursor: pointer;
&.selected {
border-radius: $unnnic-border-radius-sm;
border: $unnnic-border-width-thinner solid $unnnic-color-weni-600;
background: $unnnic-color-weni-50;
}
&__icon {
display: flex;
padding: $unnnic-spacing-xs;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: $unnnic-border-radius-sm;
background: rgba(59, 65, 77, 0.08);
}
&__content {
display: flex;
flex-direction: column;
align-items: flex-start;
&__title {
color: $unnnic-color-neutral-darkest;
font-size: $unnnic-font-size-body-gt;
font-weight: $unnnic-font-weight-bold;
line-height: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
}
&__description {
color: $unnnic-color-neutral-cloudy;
font-size: $unnnic-font-size-body-md;
line-height: $unnnic-font-size-body-md + $unnnic-line-height-medium;
}
}
}
}
&__footer {
margin-top: $unnnic-spacing-stack-xs;
color: $unnnic-color-neutral-cloudy;
font-size: $unnnic-font-size-body-gt;
line-height: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
}
}
}
}
</style>
57 changes: 48 additions & 9 deletions src/components/config/channels/whatsapp/components/tabs/AccountTab.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@

<unnnic-button
class="account-tab__content__info__templates__buttons__button"
@click="navigateToCatalogs"
@click="handleCatalogButtonClick"
type="primary"
size="small"
>
Expand Down Expand Up @@ -87,12 +87,38 @@
</div>
</div>
</div>

<unnnic-modal
v-if="showCreateCatalogModal || showConnectCatalogModal"
class="catalog-modal"
@close="showCreateCatalogModal = false"
@click.stop
:closeIcon="false"
>
<CreateCatalogModalContent
v-if="showCreateCatalogModal"
@closeModal="showCreateCatalogModal = false"
@createCatalog="handleCatalogCreateModalContinue"
/>

<ConnectCatalogModalContent
v-if="showConnectCatalogModal"
@closeModal="showConnectCatalogModal = false"
/>
</unnnic-modal>
</div>
</template>

<script>
import CreateCatalogModalContent from '../CreateCatalogModalContent.vue';
import ConnectCatalogModalContent from '../../../../ecommerce/vtex/ConnectCatalogModalContent.vue';
export default {
name: 'AccountTab',
components: {
CreateCatalogModalContent,
ConnectCatalogModalContent,
},
props: {
appInfo: {
type: Object,
Expand All @@ -103,6 +129,12 @@
default: false,
},
},
data() {
return {
showCreateCatalogModal: false,
showConnectCatalogModal: false,
};
},
methods: {
emitClose() {
this.$emit('close');
Expand All @@ -118,20 +150,20 @@
const { code, uuid } = this.appInfo;
this.$router.push({ path: `/apps/my/${code}/${uuid}/templates` });
},
navigateToCatalogs() {
handleCatalogButtonClick() {
if (!this.hasCatalog) {
// TODO: use business id and not waba_id
window
.open(
`https://business.facebook.com/latest/settings/product_catalogs?business_id=`,
'_blank',
)
.focus();
this.showCreateCatalogModal = true;
return;
}
const { code, uuid } = this.appInfo;
this.$router.push({ path: `/apps/my/${code}/${uuid}/catalogs` });
},
handleCatalogCreateModalContinue(type) {
if (type === 'vtex') {
this.showCreateCatalogModal = false;
this.showConnectCatalogModal = true;
}
},
},
computed: {
QRCodeUrl() {
Expand Down Expand Up @@ -367,4 +399,11 @@
margin-top: $unnnic-spacing-stack-lg;
}
}
.catalog-modal {
::v-deep .unnnic-modal-container-background {
width: 750px;
max-width: 90%;
}
}
</style>
24 changes: 19 additions & 5 deletions src/components/config/ecommerce/vtex/Config.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
<unnnic-button v-if="app.hasConnectedCatalog">
{{ $t('vtex.config.view_catalog') }}
</unnnic-button>
<unnnic-button v-else @click="() => (showConnectModal = true)">
<unnnic-button v-else @click="showConnectModal = true">
{{ $t('vtex.config.connect_catalog') }}
</unnnic-button>
</div>
Expand All @@ -51,18 +51,26 @@
</div>
</div>

<ConnectCatalogModal v-if="showConnectModal" @closeModal="() => (showConnectModal = false)" />
<unnnic-modal
v-if="showConnectModal"
class="connect-modal"
@close="showConnectModal = false"
@click.stop
:closeIcon="false"
>
<ConnectCatalogModalContent @closeModal="showConnectModal = false" />
</unnnic-modal>
</div>
</template>

<script>
import { mapActions, mapState } from 'vuex';
import { unnnicCallAlert } from '@weni/unnnic-system';
import ConnectCatalogModal from './ConnectCatalogModal.vue';
import ConnectCatalogModalContent from './ConnectCatalogModalContent.vue';
export default {
name: 'vtex-config',
components: { ConnectCatalogModal },
components: { ConnectCatalogModalContent },
props: {
app: {
type: Object,
Expand Down Expand Up @@ -100,7 +108,6 @@
},
async saveConfig() {
this.handleUpdateApp();
console.log('Save config');
this.$root.$emit('updateGrid');
},
closeConfig() {
Expand Down Expand Up @@ -315,4 +322,11 @@
// margin: 5px 0px -10px;
// }
}
.connect-modal {
::v-deep .unnnic-modal-container-background {
width: 750px;
max-width: 90%;
}
}
</style>
Loading

0 comments on commit eaae407

Please sign in to comment.