@designcrowd/fe-shared-lib 1.2.27 → 1.2.28-ast-upsell-1

package/dist/css/tailwind-brandCrowd.css

@@ -717,9 +717,6 @@ video {
 .tw-ml-4 {
   margin-left: 1rem;
 }
-.tw-ml-6 {
-  margin-left: 1.5rem;
-}
 .tw-ml-auto {
   margin-left: auto;
 }
@@ -1606,6 +1603,9 @@ video {
 .tw-p-4 {
   padding: 1rem;
 }
+.tw-p-5 {
+  padding: 1.25rem;
+}
 .tw-p-6 {
   padding: 1.5rem;
 }
@@ -1741,6 +1741,9 @@ video {
 .tw-pt-2 {
   padding-top: 0.5rem;
 }
+.tw-pt-4 {
+  padding-top: 1rem;
+}
 .tw-pt-6 {
   padding-top: 1.5rem;
 }

package/dist/css/tailwind-brandPage.css

@@ -717,9 +717,6 @@ video {
 .tw-ml-4 {
   margin-left: 1rem;
 }
-.tw-ml-6 {
-  margin-left: 1.5rem;
-}
 .tw-ml-auto {
   margin-left: auto;
 }
@@ -1454,6 +1451,9 @@ video {
 .tw-p-4 {
   padding: 1rem;
 }
+.tw-p-5 {
+  padding: 1.25rem;
+}
 .tw-p-6 {
   padding: 1.5rem;
 }
@@ -1589,6 +1589,9 @@ video {
 .tw-pt-2 {
   padding-top: 0.5rem;
 }
+.tw-pt-4 {
+  padding-top: 1rem;
+}
 .tw-pt-6 {
   padding-top: 1.5rem;
 }

package/dist/css/tailwind-crazyDomains.css

@@ -717,9 +717,6 @@ video {
 .tw-ml-4 {
   margin-left: 1rem;
 }
-.tw-ml-6 {
-  margin-left: 1.5rem;
-}
 .tw-ml-auto {
   margin-left: auto;
 }
@@ -1606,6 +1603,9 @@ video {
 .tw-p-4 {
   padding: 1rem;
 }
+.tw-p-5 {
+  padding: 1.25rem;
+}
 .tw-p-6 {
   padding: 1.5rem;
 }
@@ -1741,6 +1741,9 @@ video {
 .tw-pt-2 {
   padding-top: 0.5rem;
 }
+.tw-pt-4 {
+  padding-top: 1rem;
+}
 .tw-pt-6 {
   padding-top: 1.5rem;
 }

package/dist/css/tailwind-designCom.css

@@ -717,9 +717,6 @@ video {
 .tw-ml-4 {
   margin-left: 1rem;
 }
-.tw-ml-6 {
-  margin-left: 1.5rem;
-}
 .tw-ml-auto {
   margin-left: auto;
 }
@@ -1606,6 +1603,9 @@ video {
 .tw-p-4 {
   padding: 1rem;
 }
+.tw-p-5 {
+  padding: 1.25rem;
+}
 .tw-p-6 {
   padding: 1.5rem;
 }
@@ -1741,6 +1741,9 @@ video {
 .tw-pt-2 {
   padding-top: 0.5rem;
 }
+.tw-pt-4 {
+  padding-top: 1rem;
+}
 .tw-pt-6 {
   padding-top: 1.5rem;
 }

package/dist/css/tailwind-designCrowd.css

@@ -717,9 +717,6 @@ video {
 .tw-ml-4 {
   margin-left: 1rem;
 }
-.tw-ml-6 {
-  margin-left: 1.5rem;
-}
 .tw-ml-auto {
   margin-left: auto;
 }
@@ -1606,6 +1603,9 @@ video {
 .tw-p-4 {
   padding: 1rem;
 }
+.tw-p-5 {
+  padding: 1.25rem;
+}
 .tw-p-6 {
   padding: 1.5rem;
 }
@@ -1741,6 +1741,9 @@ video {
 .tw-pt-2 {
   padding-top: 0.5rem;
 }
+.tw-pt-4 {
+  padding-top: 1rem;
+}
 .tw-pt-6 {
   padding-top: 1.5rem;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.2.27",
+  "version": "1.2.28-ast-upsell-1",
   "scripts": {
     "start": "run-p storybook watch:translation",
     "build": "npm run build:css --production",
@@ -19,7 +19,7 @@
     "docker:publish": "docker build . --build-arg NPM_TOKEN=$NPM_TOKEN"
   },
   "dependencies": {
-    "@nuxtjs/i18n": "10.0.6",
+    "@nuxtjs/i18n": "9.5.4",
     "@storybook/react": "^9.0.4",
     "autoprefixer": "10.4.17",
     "axios": "1.6.7",

package/public/css/tailwind-brandCrowd.css

@@ -717,9 +717,6 @@ video {
 .theme-brandCrowd .tw-ml-4 {
   margin-left: 1rem;
 }
-.theme-brandCrowd .tw-ml-6 {
-  margin-left: 1.5rem;
-}
 .theme-brandCrowd .tw-ml-auto {
   margin-left: auto;
 }
@@ -1606,6 +1603,9 @@ video {
 .theme-brandCrowd .tw-p-4 {
   padding: 1rem;
 }
+.theme-brandCrowd .tw-p-5 {
+  padding: 1.25rem;
+}
 .theme-brandCrowd .tw-p-6 {
   padding: 1.5rem;
 }
@@ -1741,6 +1741,9 @@ video {
 .theme-brandCrowd .tw-pt-2 {
   padding-top: 0.5rem;
 }
+.theme-brandCrowd .tw-pt-4 {
+  padding-top: 1rem;
+}
 .theme-brandCrowd .tw-pt-6 {
   padding-top: 1.5rem;
 }

package/public/css/tailwind-brandPage.css

@@ -717,9 +717,6 @@ video {
 .theme-brandPage .tw-ml-4 {
   margin-left: 1rem;
 }
-.theme-brandPage .tw-ml-6 {
-  margin-left: 1.5rem;
-}
 .theme-brandPage .tw-ml-auto {
   margin-left: auto;
 }
@@ -1454,6 +1451,9 @@ video {
 .theme-brandPage .tw-p-4 {
   padding: 1rem;
 }
+.theme-brandPage .tw-p-5 {
+  padding: 1.25rem;
+}
 .theme-brandPage .tw-p-6 {
   padding: 1.5rem;
 }
@@ -1589,6 +1589,9 @@ video {
 .theme-brandPage .tw-pt-2 {
   padding-top: 0.5rem;
 }
+.theme-brandPage .tw-pt-4 {
+  padding-top: 1rem;
+}
 .theme-brandPage .tw-pt-6 {
   padding-top: 1.5rem;
 }

package/public/css/tailwind-crazyDomains.css

@@ -717,9 +717,6 @@ video {
 .theme-crazyDomains .tw-ml-4 {
   margin-left: 1rem;
 }
-.theme-crazyDomains .tw-ml-6 {
-  margin-left: 1.5rem;
-}
 .theme-crazyDomains .tw-ml-auto {
   margin-left: auto;
 }
@@ -1606,6 +1603,9 @@ video {
 .theme-crazyDomains .tw-p-4 {
   padding: 1rem;
 }
+.theme-crazyDomains .tw-p-5 {
+  padding: 1.25rem;
+}
 .theme-crazyDomains .tw-p-6 {
   padding: 1.5rem;
 }
@@ -1741,6 +1741,9 @@ video {
 .theme-crazyDomains .tw-pt-2 {
   padding-top: 0.5rem;
 }
+.theme-crazyDomains .tw-pt-4 {
+  padding-top: 1rem;
+}
 .theme-crazyDomains .tw-pt-6 {
   padding-top: 1.5rem;
 }

package/public/css/tailwind-designCom.css

@@ -717,9 +717,6 @@ video {
 .theme-designCom .tw-ml-4 {
   margin-left: 1rem;
 }
-.theme-designCom .tw-ml-6 {
-  margin-left: 1.5rem;
-}
 .theme-designCom .tw-ml-auto {
   margin-left: auto;
 }
@@ -1606,6 +1603,9 @@ video {
 .theme-designCom .tw-p-4 {
   padding: 1rem;
 }
+.theme-designCom .tw-p-5 {
+  padding: 1.25rem;
+}
 .theme-designCom .tw-p-6 {
   padding: 1.5rem;
 }
@@ -1741,6 +1741,9 @@ video {
 .theme-designCom .tw-pt-2 {
   padding-top: 0.5rem;
 }
+.theme-designCom .tw-pt-4 {
+  padding-top: 1rem;
+}
 .theme-designCom .tw-pt-6 {
   padding-top: 1.5rem;
 }

package/public/css/tailwind-designCrowd.css

@@ -717,9 +717,6 @@ video {
 .theme-designCrowd .tw-ml-4 {
   margin-left: 1rem;
 }
-.theme-designCrowd .tw-ml-6 {
-  margin-left: 1.5rem;
-}
 .theme-designCrowd .tw-ml-auto {
   margin-left: auto;
 }
@@ -1606,6 +1603,9 @@ video {
 .theme-designCrowd .tw-p-4 {
   padding: 1rem;
 }
+.theme-designCrowd .tw-p-5 {
+  padding: 1.25rem;
+}
 .theme-designCrowd .tw-p-6 {
   padding: 1.5rem;
 }
@@ -1741,6 +1741,9 @@ video {
 .theme-designCrowd .tw-pt-2 {
   padding-top: 0.5rem;
 }
+.theme-designCrowd .tw-pt-4 {
+  padding-top: 1rem;
+}
 .theme-designCrowd .tw-pt-6 {
   padding-top: 1.5rem;
 }

package/src/atoms/components/Modal/Modal.vue

@@ -15,7 +15,7 @@
       :class="[
         {
           'tw-w-full': !isImageMode,
-          'tw-p-4': !simple,
+          'tw-p-4': !removeHorizontalPadding && !simple,
           'tw-max-w-md': size === 'md',
           'tw-max-w-xl': size === 'xl',
           'tw-max-w-2xl': !size && !isImageMode,
@@ -91,6 +91,11 @@ export default {
       required: false,
       default: false,
     },
+    removeHorizontalPadding: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     visible: {
       type: Boolean,
       required: false,

package/src/bundles/bundled-translations.pt-BR.json

@@ -1 +1,24 @@
-{}
+{
+  "publishBrandPageModal": {
+    "firstTimePublishHeaderLabel": "Set the URL for {{brandPageDisplayName}}",
+    "sitePublishedLabel": "Site published!",
+    "publishSuccessLabel": "Your {{brandPageDisplayName}} is live! Start using your link:",
+    "freePublishCardTitleLabel": "Free Address",
+    "freePublishCardDescriptionLabel": "Choose a free address to publish now. You can always edit the URL later",
+    "slugInputPlaceholderYourNameLabel": "your-name",
+    "slugInputPlaceholderYourBusinessNameLabel": "your-business-name",
+    "freeDomainLabel": "Free domain",
+    "purchasedDomainLabel": "Purchased domain",
+    "setUrlLabel": "Set URL",
+    "publishLabel": "Publish",
+    "viewMoreDomainLabel": "VIEW MORE DOMAINS",
+    "viewMyWebsiteLabel": "View {{brandPageDisplayName}}",
+    "copyLabel": "Copy",
+    "copySuccessLabel": "Copied!",
+    "publishedSuccessDescriptionLabel": "Buy matching domain name for your brand",
+    "hasAlreadyPurchasedDomainCloseButtonLabel": "No thanks, maybe later",
+    "selectDomainDropdownPlaceholder": "Select domain name",
+    "websiteFriendlyName": "Website",
+    "digitalBusinessCardFriendlyName": "Digital Business Card"
+  }
+}

package/src/experiences/components/AuthFlow/SignIn.vue

@@ -375,7 +375,18 @@ export default {
     },
     getSignInAction() {
       const params = new URLSearchParams();
+
       params.set('locale', this.currentLocale);
+
+      if (this.$route?.query) {
+        Object.entries(this.$route.query).forEach(([key, value]) => {
+          if (key !== 'locale' && value != null) {
+            const paramValue = Array.isArray(value) ? value[0] : value;
+            params.set(key, paramValue);
+          }
+        });
+      }
+
       return `/identity/account/signin?${params.toString()}`;
     },
   },

package/src/experiences/components/PublishBrandPageModal/PublishBrandPageCard.vue

@@ -75,8 +75,8 @@ const props = defineProps({
     default: '',
   },
   imgUrl: {
-    type: Boolean,
-    default: true,
+    type: String,
+    default: '',
   },
   isDesignCom: {
     type: Boolean,

package/src/experiences/components/PublishBrandPageModal/PublishBrandPageModal.vue

@@ -1,26 +1,32 @@
 <template>
   <div class="publish-bp--container">
     <Modal
-      classes="publish-bp--modal tw-px-2 md:tw-px-8"
+      classes="publish-bp--modal tw-pt-4"
       close-on-esc
       :visible="visible"
       :hide-scrollbar="false"
       :show-modal-background-image="showModalBackgroundImage"
       :content-classes="isBusy ? ['tw-overflow-y-hidden'] : []"
+      :remove-horizontal-padding="showUpsellRotationContainer && !isCustomDomainActive && !hasPurchasedDomains"
+      :class="{
+        'tw-px-2 md:tw-px-8': !showUpsellRotationContainer && isCustomDomainActive && hasPurchasedDomains,
+      }"
       @close-modal="onCloseModal"
     >
       <template #header>
         <div v-if="isNotPublished || isSlugEditMode" class="tw-text-center tw-font-bold tw-mb-8 tw-mt-8 tw-text-4xl">
           <span>{{ firstTimePublishHeaderLabel }}</span>
         </div>
-        <div v-if="isPublished && !isSlugEditMode" class="tw-text-center tw-font-bold tw-mb-8 tw-mt-8">
+        <div v-if="isPublished && !isSlugEditMode" class="tw-text-center tw-font-bold tw-mt-8 tw-mb-8">
           <p class="tw-font-bold tw-text-black tw-mb-2 tw-text-4xl">{{ sitePublishedLabel }}</p>
-          <p v-if="hasPurchasedDomains || isCustomDomainActive" class="tw-text-grayscale-600 tw-mb-8">
-            {{ publishSuccessLabel }}
-          </p>
-          <p v-else class="tw-text-grayscale-600 tw-mb-8 tw-font-normal">
-            {{ publishedSuccessDescriptionLabel }}
-          </p>
+          <div v-if="!showUpsellRotationContainer">
+            <p v-if="hasPurchasedDomains || isCustomDomainActive" class="tw-text-grayscale-600 tw-mb-8">
+              {{ publishSuccessLabel }}
+            </p>
+            <p v-else class="tw-text-grayscale-600 tw-mb-8 tw-font-normal">
+              {{ publishedSuccessDescriptionLabel }}
+            </p>
+          </div>
         </div>
       </template>
       <template #default>
@@ -187,7 +193,7 @@
           </div>
         </div>
         <div v-else class="tw-font-sans">
-          <div v-if="!isCustomDomainActive && !hasPurchasedDomains" class="tw-mb-6 tw-text-left">
+          <div v-if="!showUpsellRotationContainer" class="tw-mb-6 tw-text-left">
             <div class="tw-mb-6">
               <SellDomainNameSearchWithResults
                 :is-design-com="isDesignCom"
@@ -195,17 +201,12 @@
                 :currency="userCurrency"
                 :display-result-limit="4"
                 :domain-search-location="sitePublishedModal"
+                show-view-more-button
                 @on-change-search="onSearchTextChanged"
                 @on-buy-now-click="onBuyNowClick"
+                @on-view-more="onViewMore"
               />
             </div>
-            <Button
-              :label="viewMoreDomainLabel"
-              variant="no-border"
-              size="small-medium"
-              class="tw-text-center"
-              @on-click="onViewMore"
-            />
           </div>
           <div class="tw-px-4 tw-text-center" :class="{ 'lg:tw-px-20': hasPurchasedDomains }">
             <TextCopyField
@@ -230,6 +231,9 @@
               @on-click="onBrandPageUrlClick"
             />
           </div>
+          <div v-if="showUpsellRotationContainer" class="tw-border-t tw-border-solid tw-border-grayscale-500 tw-p-5">
+            <slot name="upsellContainer" />
+          </div>
         </div>
       </template>
     </Modal>
@@ -405,6 +409,16 @@ export default {
       required: true,
       default: '',
     },
+    showUpsellRotation: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+    isSubsequentPublish: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
   },
   emits: [
     'close-modal',
@@ -503,6 +517,12 @@ export default {
         ? this.slugInputPlaceholderYourNameLabel
         : this.slugInputPlaceholderYourBusinessNameLabel;
     },
+    showUpsellRotationContainer() {
+      if (!this.isSubsequentPublish) {
+        return false;
+      }
+      return this.showUpsellRotation && !this.isCustomDomainActive && !this.hasPurchasedDomains;
+    },
   },
   watch: {
     brandPageSlug(slug) {

package/src/experiences/components/PublishBrandPageModal/i18n/publish-brand-page-modal.pt-BR.json

@@ -0,0 +1,24 @@
+{
+  "publishBrandPageModal" : {
+    "firstTimePublishHeaderLabel" : "Set the URL for {{brandPageDisplayName}}",
+    "sitePublishedLabel" : "Site published!",
+    "publishSuccessLabel" : "Your {{brandPageDisplayName}} is live! Start using your link:",
+    "freePublishCardTitleLabel" : "Free Address",
+    "freePublishCardDescriptionLabel" : "Choose a free address to publish now. You can always edit the URL later",
+    "slugInputPlaceholderYourNameLabel" : "your-name",
+    "slugInputPlaceholderYourBusinessNameLabel" : "your-business-name",
+    "freeDomainLabel" : "Free domain",
+    "purchasedDomainLabel" : "Purchased domain",
+    "setUrlLabel" : "Set URL",
+    "publishLabel" : "Publish",
+    "viewMoreDomainLabel" : "VIEW MORE DOMAINS",
+    "viewMyWebsiteLabel" : "View {{brandPageDisplayName}}",
+    "copyLabel" : "Copy",
+    "copySuccessLabel" : "Copied!",
+    "publishedSuccessDescriptionLabel" : "Buy matching domain name for your brand",
+    "hasAlreadyPurchasedDomainCloseButtonLabel" : "No thanks, maybe later",
+    "selectDomainDropdownPlaceholder" : "Select domain name",
+    "websiteFriendlyName" : "Website",
+    "digitalBusinessCardFriendlyName" : "Digital Business Card"
+  }
+}

package/src/experiences/components/SellDomainNameSearchWithResults/SellDomainNameSearchWithResults.vue

@@ -22,6 +22,14 @@
       :domain-search-location="domainSearchLocation"
       @on-buy-now-click="onBuyNowClick"
     />
+    <Button
+      v-if="showViewMoreButton"
+      :label="viewMoreDomainLabel"
+      variant="no-border"
+      size="small-medium"
+      class="tw-text-center tw-pt-6"
+      @on-click="onViewMore"
+    />
   </div>
 </template>
 <script>
@@ -30,6 +38,8 @@ import SellDomainNameSearchResult from '../SellDomainNameSearchResult/SellDomain
 
 import brandCrowdApiClient from '../../clients/brand-crowd-api.client';
 import Events from '../../constants/event-constants';
+import { publishBrandPageModalTr } from '../../../useSharedLibTranslate';
+import Button from '../../../atoms/components/Button/Button.vue';
 
 const TEXT_CHANGED_PARAM = 'textChanged';
 
@@ -37,6 +47,7 @@ export default {
   components: {
     SellDomainNameSearch,
     SellDomainNameSearchResult,
+    Button,
   },
   props: {
     currency: {
@@ -101,6 +112,16 @@ export default {
       type: Number,
       default: undefined,
     },
+    showViewMoreButton: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup() {
+    return {
+      publishBrandPageModalTr,
+      viewMoreDomainLabel: publishBrandPageModalTr('viewMoreDomainLabel'),
+    };
   },
   data: () => ({
     domainNameItems: undefined,
@@ -126,6 +147,7 @@ export default {
   methods: {
     async onSearchDomainName(args) {
       this.$emit('on-change-search', args.searchText);
+      this.$emit('on-domain-search');
       await this.searchDomainName(args.searchText, args.isUserTriggered);
     },
     async searchDomainName(searchText, isUserTriggered) {
@@ -184,6 +206,9 @@ export default {
       const urlParams = new URLSearchParams(window.location.search);
       return urlParams.get(TEXT_CHANGED_PARAM)?.toUpperCase() === 'TRUE' || false;
     },
+    onViewMore() {
+      this.$emit('on-view-more');
+    },
   },
 };
 </script>