@alipay/ams-checkout 0.0.1732700846-dev.1 → 0.0.1732700846-dev.11

package/esm/plugin/component/component.popup.style.js

@@ -5,10 +5,10 @@
  * 1. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE; and
  * 2. If applicable, the use of the Software is also subject to the terms and conditions of any non-disclosure agreement signed by you and the relevant Ant Group entity.
  */
-import { ANIMATION_TIME, closeImg, COMPONENT_CLOSE_BLOCK_ID, COMPONENT_CONTAINER_ID, COMPONENT_RETENTION_ID, COMPONENT_SECTION_ID, LOADING_ID, MOCKUP_ID } from "../../constant";
+import { ANIMATION_TIME, closeImg, COMPONENT_CLOSE_BLOCK_ID, COMPONENT_CLOSE_MASK_BLOCK_ID, COMPONENT_CONTAINER_ID, COMPONENT_RETENTION_ID, COMPONENT_SECTION_ID, LOADING_ID, MOCKUP_ID } from "../../constant";
 import { PlatformEnum } from "../../types";
 import { addSetFontSizeEvent, amsSetSize, getDesignFontSize } from "../../util";
-var componentCss = ".ams-component-container-mobile {\n  width: 100%;\n  height: 1px;\n  position: fixed;\n  bottom: -1px;\n  left: 0;\n  z-index: 1001;\n  border-radius: 12px 12px 0 0;\n  overflow: hidden;\n}\n.ams-component-container-mobile-animation{\n  animation: ams-component-container-slide-in 0.3s ease-in-out;\n}\n\n.ams-component-section-desktop {\n  font-size: 0;\n}\n\n.ams-component-container-hidden-mobile {\n  width: 100%;\n  height: 0px;\n  position: fixed;\n  bottom: -1px;\n  left: 0;\n  z-index: 1001;\n  background-color: transparent;\n  border-radius: 12px 12px 0 0;\n  animation: ams-component-container-slide-out 0.26s ease-in forwards;\n  overflow: hidden;\n}\n\n.ams-component-section-mobile {\n  border-radius: 12px 12px 0 0;\n  overflow: hidden;\n  font-size: 0;\n  height: 100%;\n}\n\n.ams-component-container-desktop {\n  display: block;\n  width: 672px;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  z-index: 1001;\n  border-radius: 12px;\n  overflow: hidden;\n  transform-origin: 50% 50%;\n  transform: translate(-50%, -50%);\n}\n.ams-component-container-desktop-animation{\n  animation: ams-component-container-zoom-in 0.3s ease-in-out;\n  animation-fill-mode: forwards\n}\n\n@keyframes ams-component-container-zoom-out {\n  0% {\n    transform: translate(-50%, -50%) scale(1);\n    -webkit-transform: translate(-50%, -50%) scale(1);\n    opacity: 1\n  }\n\n  100% {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.4);\n    -webkit-transform: translate(-50%, -50%) scale(0.4);\n  }\n}\n\n@keyframes ams-component-container-zoom-in {\n  0% {\n    transform: translate(-50%, -50%) scale(0.4);\n    opacity: 0\n  }\n\n  100% {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n\n.ams-component-container-hidden-desktop {\n  display: block;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  z-index: 1001;\n  border-radius: 8px;\n  overflow: hidden;\n  animation: ams-component-container-zoom-out 0.3s ease-in-out;\n  animation-fill-mode: forwards;\n  transform-origin: 50% 50%;\n}\n\n.ams-component-loading {\n  width: 0.8em;\n  height:0.8em;\n  background: rgba(0, 0, 0, 0.5);\n  border-radius: 8px;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 1001;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n\n.ams-component-loading .line {\n  width: 40px;\n  height: 40px;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.ams-component-loading .line div {\n  position: absolute;\n  left: 17.67px;\n  top: 0;\n  width: 5.33px;\n  height: 40px;\n}\n\n.ams-component-loading .line div:before,\n.ams-component-loading .line div:after {\n  content: '';\n  display: block;\n  height: 13.33px;\n  background: #fcfcfc;\n  border-radius: 5.3px;\n}\n.ams-component-loading .line div:after {\n  margin-top: 13.33px;\n}\n\n.ams-component-loading .line div:nth-child(2) {\n  -webkit-transform: rotate(45deg);\n}\n\n.ams-component-loading .line div:nth-child(3) {\n  -webkit-transform: rotate(90deg);\n}\n\n.ams-component-loading .line div:nth-child(4) {\n  -webkit-transform: rotate(135deg);\n}\n\n/** \u52A0\u8F7D\u52A8\u753B **/\n@-webkit-keyframes load {\n  0% {\n      opacity: 0;\n  }\n\n  100% {\n      opacity: 1;\n  }\n}\n\n.ams-component-loading .line div:nth-child(1):before {\n  -webkit-animation: load 1s linear 0s infinite;\n}\n\n.ams-component-loading .line div:nth-child(2):before {\n  -webkit-animation: load 1s linear 0.125s infinite;\n}\n\n.ams-component-loading .line div:nth-child(3):before {\n  -webkit-animation: load 1s linear 0.25s infinite;\n}\n\n.ams-component-loading .line div:nth-child(4):before {\n  -webkit-animation: load 1s linear 0.375s infinite;\n}\n\n.ams-component-loading .line div:nth-child(1):after {\n  -webkit-animation: load 1s linear 0.5s infinite;\n}\n\n.ams-component-loading .line div:nth-child(2):after {\n  -webkit-animation: load 1s linear 0.675s infinite;\n}\n\n.ams-component-loading .line div:nth-child(3):after {\n  -webkit-animation: load 1s linear 0.75s infinite;\n}\n\n.ams-component-loading .line div:nth-child(4):after {\n  -webkit-animation: load 1s linear 0.875s infinite;\n}\n\n.ams-component-loading-logo {\n  width: 0.44em;\n  height: 0.44em;\n  -webkit-transform:rotate(360deg);\n  transform:rotate(360deg);\n  -webkit-transition:-webkit-transform 1s linear;\n  transition:transform 1s linear;\n  animation: ams-component-loading-logo 1s linear infinite;\n}\n\n.asm-component-close-block-desktop {\n  position: absolute;\n  width: 40px;\n  height: 40px;\n  right: 0;\n  top: 0;\n  cursor: pointer;\n}\n.asm-component-close-block-btn-desktop {\n  width: 11px;\n  height: 11px;\n  object-fit: fill;\n  position: absolute;\n  right: 18.7px;\n  top: 26.7px;\n}\n.asm-component-close-block-hidden {\n  width: 0px !important;\n  height: 0px !important;\n  visibility: hidden;\n}\n.asm-component-close-block-mobile {\n  position: absolute;\n  width: 0.4em;\n  height: 0.4em;\n  right: 0;\n  top: 0;\n  cursor: pointer;\n  z-index: 1009;\n}\n\n.asm-component-close-block-btn-mobile {\n  width: 0.11em;\n  height: 0.11em;\n  object-fit: fill;\n  position: absolute;\n  right: 0.147em;\n  top: 0.167em;\n}\n\n\n.ams-component-container-opacity{\n  opacity: 1;\n}\n\n.ams-component-container-opacity:after{\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  display: block;\n  content: \"\";\n  z-index: 1010;\n  background-color: rgba(0, 0, 0, 0.35);\n  border-radius: 12px 12px 0 0;\n}\n\n#ams-component-retention {\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  transform-origin: 50%;\n  height: auto;\n  display: none;\n  z-index: 1009;\n}\n\n.ams-component-retention-show {\n  display: flex !important;\n  animation: ams-component-container-zoom-in 0.3s ease-in-out;\n  animation-fill-mode: forwards\n}\n\n.ams-component-retention-hidden {\n  display: flex !important;\n  animation: ams-component-container-zoom-out 0.3s ease-in-out;\n  -webkit-animation: ams-component-container-zoom-out 0.3s ease-in-out;\n  animation-fill-mode: forwards;\n  -webkit-animation-fill-mode: forwards;\n}\n\n.ams-component-retention-mobile {\n  width: 294px;\n  border-radius: 12px;\n  padding: 24px 0;\n  background-color: #fff;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  box-sizing: border-box;\n}\n\n.ams-component-retention-desktop {\n  width: 544px;\n  border-radius: 12px;\n  padding: 32px;\n  background-color: #fff;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  box-sizing: border-box;\n}\n\n@media screen and (max-width: 300px) {\n  .ams-component-retention-mobile {\n      transform: translate(-50%, -50%) scale(0.8);\n  }\n}\n\n.ams-component-retention-title-mobile {\n  width: 100%;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 16px;\n  line-height: 24px;\n  color: #2A3A52;\n  text-align: center;\n  padding: 0 16px;\n  box-sizing: border-box;\n}\n\n.ams-component-retention-title-desktop {\n  text-align: left;\n  width: 100%;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 16px;\n  line-height: 24px;\n  color: #2A3A52;\n}\n\n.ams-component-retention-sub-title-mobile {\n  width: 100%;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 20px;\n  color: #7C8CA3;\n  margin-top: 8px;\n  text-align: center;\n  padding: 0 16px;\n  box-sizing: border-box;\n}\n\n.ams-component-retention-sub-title-desktop {\n  text-align: left;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 20px;\n  color: #7C8CA3;\n  margin-top: 10px;\n}\n\n.ams-component-retention-btn-block-mobile {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  margin-top: 24px;\n  padding: 0 24px;\n  box-sizing: border-box;\n}\n\n.ams-component-retention-btn-block-desktop {\n  width: 100%;\n  margin-top: 24px;\n}\n\n#ams-component-retention-remain {\n  background: #0079FF;\n  border-radius: 100px;\n  font-style: normal;\n  font-weight: 500;\n  text-align: center;\n  box-sizing: border-box;\n  color: #FFFFFF;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.ams-component-retention-remain-mobile {\n  width: 100%;\n  height: 44px;\n  font-size: 16px;\n  line-height: 44px;\n  padding: 0 6px;\n}\n\n.ams-component-retention-remain-desktop {\n  height: 44px;\n  font-size: 16px;\n  line-height: 44px;\n  display: inline-block;\n  padding: 0 24px;\n  float: right;\n  cursor: pointer;\n  padding: 0 16px;\n  max-width: 225px;\n  min-width: 159px;\n}\n\n#ams-component-retention-leave {\n  border-radius: 100px;\n  border: 1px solid #0079FF;\n  font-style: normal;\n  font-weight: 500;\n  text-align: center;\n  box-sizing: border-box;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.ams-component-retention-leave-mobile {\n  width: 100%;\n  height: 44px;\n  font-size: 16px;\n  line-height: 44px;\n  color: #1677FF;\n  margin-top: 12px;\n  padding: 0 6px;\n}\n\n.ams-component-retention-leave-desktop {\n  height: 44px;\n  font-size: 16px;\n  line-height: 44px;\n  color: #1677FF;\n  display: inline-block;\n  padding: 0 24px;\n  float: right;\n  margin-right: 16px;\n  cursor: pointer;\n  padding: 0 16px;\n  max-width: 225px;\n  min-width: 144px;\n}\n.".concat(MOCKUP_ID, "-hidden{\nanimation: ").concat(MOCKUP_ID, "-opacity 0.3s ease-in-out;\n  animation-fill-mode: forwards\n}\n/** \u52A0\u8F7D\u52A8\u753B **/\n@-webkit-keyframes ").concat(MOCKUP_ID, "-opacity {\n  0% {\n      opacity: 1;\n  }\n\n  100% {\n      opacity: 0;\n  }\n}\n");
+var componentCss = ".ams-component-container-mobile {\n  width: 100%;\n  height: 1px;\n  position: fixed;\n  bottom: -1px;\n  left: 0;\n  z-index: 1001;\n  border-radius: 12px 12px 0 0;\n  overflow: hidden;\n}\n.ams-component-container-mobile-animation{\n  animation: ams-component-container-slide-in 0.3s ease-in-out;\n}\n\n.ams-component-section-desktop {\n  font-size: 0;\n}\n\n.ams-component-container-hidden-mobile {\n  width: 100%;\n  height: 0px;\n  position: fixed;\n  bottom: -1px;\n  left: 0;\n  z-index: 1001;\n  background-color: transparent;\n  border-radius: 12px 12px 0 0;\n  animation: ams-component-container-slide-out 0.26s ease-in forwards;\n  overflow: hidden;\n}\n\n.ams-component-section-mobile {\n  border-radius: 12px 12px 0 0;\n  overflow: hidden;\n  font-size: 0;\n  height: 100%;\n}\n\n.ams-component-container-desktop {\n  display: block;\n  width: 672px;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  z-index: 1001;\n  border-radius: 12px;\n  overflow: hidden;\n  transform-origin: 50% 50%;\n  transform: translate(-50%, -50%);\n}\n.ams-component-container-desktop-animation{\n  animation: ams-component-container-zoom-in 0.3s ease-in-out;\n  animation-fill-mode: forwards\n}\n\n@keyframes ams-component-container-zoom-out {\n  0% {\n    transform: translate(-50%, -50%) scale(1);\n    -webkit-transform: translate(-50%, -50%) scale(1);\n    opacity: 1\n  }\n\n  100% {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.4);\n    -webkit-transform: translate(-50%, -50%) scale(0.4);\n  }\n}\n\n@keyframes ams-component-container-zoom-in {\n  0% {\n    transform: translate(-50%, -50%) scale(0.4);\n    opacity: 0\n  }\n\n  100% {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n\n.ams-component-container-hidden-desktop {\n  display: block;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  z-index: 1001;\n  border-radius: 8px;\n  overflow: hidden;\n  animation: ams-component-container-zoom-out 0.3s ease-in-out;\n  animation-fill-mode: forwards;\n  transform-origin: 50% 50%;\n}\n\n.ams-component-loading {\n  width: 0.8em;\n  height:0.8em;\n  background: rgba(0, 0, 0, 0.5);\n  border-radius: 8px;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 1001;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n\n.ams-component-loading .line {\n  width: 40px;\n  height: 40px;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.ams-component-loading .line div {\n  position: absolute;\n  left: 17.67px;\n  top: 0;\n  width: 5.33px;\n  height: 40px;\n}\n\n.ams-component-loading .line div:before,\n.ams-component-loading .line div:after {\n  content: '';\n  display: block;\n  height: 13.33px;\n  background: #fcfcfc;\n  border-radius: 5.3px;\n}\n.ams-component-loading .line div:after {\n  margin-top: 13.33px;\n}\n\n.ams-component-loading .line div:nth-child(2) {\n  -webkit-transform: rotate(45deg);\n}\n\n.ams-component-loading .line div:nth-child(3) {\n  -webkit-transform: rotate(90deg);\n}\n\n.ams-component-loading .line div:nth-child(4) {\n  -webkit-transform: rotate(135deg);\n}\n\n/** \u52A0\u8F7D\u52A8\u753B **/\n@-webkit-keyframes load {\n  0% {\n      opacity: 0;\n  }\n\n  100% {\n      opacity: 1;\n  }\n}\n\n.ams-component-loading .line div:nth-child(1):before {\n  -webkit-animation: load 1s linear 0s infinite;\n}\n\n.ams-component-loading .line div:nth-child(2):before {\n  -webkit-animation: load 1s linear 0.125s infinite;\n}\n\n.ams-component-loading .line div:nth-child(3):before {\n  -webkit-animation: load 1s linear 0.25s infinite;\n}\n\n.ams-component-loading .line div:nth-child(4):before {\n  -webkit-animation: load 1s linear 0.375s infinite;\n}\n\n.ams-component-loading .line div:nth-child(1):after {\n  -webkit-animation: load 1s linear 0.5s infinite;\n}\n\n.ams-component-loading .line div:nth-child(2):after {\n  -webkit-animation: load 1s linear 0.675s infinite;\n}\n\n.ams-component-loading .line div:nth-child(3):after {\n  -webkit-animation: load 1s linear 0.75s infinite;\n}\n\n.ams-component-loading .line div:nth-child(4):after {\n  -webkit-animation: load 1s linear 0.875s infinite;\n}\n\n.ams-component-loading-logo {\n  width: 0.44em;\n  height: 0.44em;\n  -webkit-transform:rotate(360deg);\n  transform:rotate(360deg);\n  -webkit-transition:-webkit-transform 1s linear;\n  transition:transform 1s linear;\n  animation: ams-component-loading-logo 1s linear infinite;\n}\n\n.asm-component-close-block-desktop {\n  position: absolute;\n  width: 40px;\n  height: 40px;\n  right: 0;\n  top: 0;\n  cursor: pointer;\n}\n\n.asm-component-close-block-mobile {\n  position: absolute;\n  width: 0.4em;\n  height: 0.4em;\n  right: 0;\n  top: 0;\n  cursor: pointer;\n  z-index: 1009;\n}\n\n.asm-component-close-block-hidden {\n  width: 0px !important;\n  height: 0px !important;\n  visibility: hidden;\n}\n\n.asm-component-close-block-btn-desktop {\n  width: 11px;\n  height: 11px;\n  object-fit: fill;\n  position: absolute;\n  right: 18.7px;\n  top: 26.7px;\n}\n\n.asm-component-close-block-btn-mobile {\n  width: 0.11em;\n  height: 0.11em;\n  object-fit: fill;\n  position: absolute;\n  right: 0.147em;\n  top: 0.167em;\n}\n\n.ams-component-mask-close-block-desktop {\n  position: absolute;\n  width: 40px;\n  height: 40px;\n  right: 18px;\n  top: 10px;\n  cursor: pointer;\n  z-index: 1013;\n}\n  \n.ams-component-mask-close-block-mobile {\n  position: absolute;\n  width: 40px;\n  height: 40px;\n  right: 18px;\n  cursor: pointer;\n  z-index: 1012;\n}\n\n.ams-component-mask-close-block-hidden {\n  width: 0px !important;\n  height: 0px !important;\n  visibility: hidden;\n}\n\n.ams-component-mask-close-block-btn {\n  width: 24px;\n  height: 24px;\n  object-fit: fill;\n  position: absolute;\n  right: 8px;\n  top: 8px;\n}\n\n.ams-component-container-opacity{\n  opacity: 1;\n}\n\n.ams-component-container-opacity:after{\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  display: block;\n  content: \"\";\n  z-index: 1010;\n  background-color: rgba(0, 0, 0, 0.35);\n  border-radius: 12px 12px 0 0;\n}\n\n#ams-component-retention {\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  transform-origin: 50%;\n  height: auto;\n  display: none;\n  z-index: 1009;\n}\n\n.ams-component-retention-show {\n  display: flex !important;\n  animation: ams-component-container-zoom-in 0.3s ease-in-out;\n  animation-fill-mode: forwards\n}\n\n.ams-component-retention-hidden {\n  display: flex !important;\n  animation: ams-component-container-zoom-out 0.3s ease-in-out;\n  -webkit-animation: ams-component-container-zoom-out 0.3s ease-in-out;\n  animation-fill-mode: forwards;\n  -webkit-animation-fill-mode: forwards;\n}\n\n.ams-component-retention-mobile {\n  width: 294px;\n  border-radius: 12px;\n  padding: 24px 0;\n  background-color: #fff;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  box-sizing: border-box;\n}\n\n.ams-component-retention-desktop {\n  width: 544px;\n  border-radius: 12px;\n  padding: 32px;\n  background-color: #fff;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  box-sizing: border-box;\n}\n\n@media screen and (max-width: 300px) {\n  .ams-component-retention-mobile {\n      transform: translate(-50%, -50%) scale(0.8);\n  }\n}\n\n.ams-component-retention-title-mobile {\n  width: 100%;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 16px;\n  line-height: 24px;\n  color: #2A3A52;\n  text-align: center;\n  padding: 0 16px;\n  box-sizing: border-box;\n}\n\n.ams-component-retention-title-desktop {\n  text-align: left;\n  width: 100%;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 16px;\n  line-height: 24px;\n  color: #2A3A52;\n}\n\n.ams-component-retention-sub-title-mobile {\n  width: 100%;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 20px;\n  color: #7C8CA3;\n  margin-top: 8px;\n  text-align: center;\n  padding: 0 16px;\n  box-sizing: border-box;\n}\n\n.ams-component-retention-sub-title-desktop {\n  text-align: left;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 20px;\n  color: #7C8CA3;\n  margin-top: 10px;\n}\n\n.ams-component-retention-btn-block-mobile {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  margin-top: 24px;\n  padding: 0 24px;\n  box-sizing: border-box;\n}\n\n.ams-component-retention-btn-block-desktop {\n  width: 100%;\n  margin-top: 24px;\n}\n\n#ams-component-retention-remain {\n  background: #0079FF;\n  border-radius: 100px;\n  font-style: normal;\n  font-weight: 500;\n  text-align: center;\n  box-sizing: border-box;\n  color: #FFFFFF;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.ams-component-retention-remain-mobile {\n  width: 100%;\n  height: 44px;\n  font-size: 16px;\n  line-height: 44px;\n  padding: 0 6px;\n}\n\n.ams-component-retention-remain-desktop {\n  height: 44px;\n  font-size: 16px;\n  line-height: 44px;\n  display: inline-block;\n  padding: 0 24px;\n  float: right;\n  cursor: pointer;\n  padding: 0 16px;\n  max-width: 225px;\n  min-width: 159px;\n}\n\n#ams-component-retention-leave {\n  border-radius: 100px;\n  border: 1px solid #0079FF;\n  font-style: normal;\n  font-weight: 500;\n  text-align: center;\n  box-sizing: border-box;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.ams-component-retention-leave-mobile {\n  width: 100%;\n  height: 44px;\n  font-size: 16px;\n  line-height: 44px;\n  color: #1677FF;\n  margin-top: 12px;\n  padding: 0 6px;\n}\n\n.ams-component-retention-leave-desktop {\n  height: 44px;\n  font-size: 16px;\n  line-height: 44px;\n  color: #1677FF;\n  display: inline-block;\n  padding: 0 24px;\n  float: right;\n  margin-right: 16px;\n  cursor: pointer;\n  padding: 0 16px;\n  max-width: 225px;\n  min-width: 144px;\n}\n.".concat(MOCKUP_ID, "-hidden{\nanimation: ").concat(MOCKUP_ID, "-opacity 0.3s ease-in-out;\n  animation-fill-mode: forwards\n}\n/** \u52A0\u8F7D\u52A8\u753B **/\n@-webkit-keyframes ").concat(MOCKUP_ID, "-opacity {\n  0% {\n      opacity: 1;\n  }\n\n  100% {\n      opacity: 0;\n  }\n}\n\n");
 export var componentAddCSS = function componentAddCSS() {
   var style = document.createElement('style');
   style.type = 'text/css';
@@ -47,6 +47,25 @@ export var createCloseBtn = function createCloseBtn(platform, closeBtnFunc) {
   });
   if (container) container.appendChild(closeBlock);
 };
+export var createMaskCloseButton = function createMaskCloseButton(platform, closeBtnFunc) {
+  var clickEventName = platform === PlatformEnum.mobile ? 'touchend' : 'click';
+  var closeBtnHTML = "<div class='".concat(COMPONENT_CLOSE_MASK_BLOCK_ID, "-btn'>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M19.5673 4.49829L19.424 4.36736L19.3027 4.27821L19.1702 4.19928C18.5417 3.86236 17.7834 3.96479 17.2841 4.46433L11.9986 9.7512L6.73275 4.4853L6.67045 4.42539C6.01464 3.85742 5.07067 3.85791 4.49751 4.42864L4.38538 4.54934L4.27757 4.69333L4.19868 4.8259C3.862 5.45451 3.96432 6.21286 4.46349 6.71225L9.75274 12.0006L4.42833 17.3276C3.85705 17.9874 3.85754 18.9315 4.42789 19.5048L4.54854 19.6169L4.6925 19.7248L4.82504 19.8038C5.45353 20.1407 6.21179 20.0383 6.71105 19.5388L11.9986 14.2489L17.321 19.574C17.9915 20.1551 18.9356 20.1352 19.5317 19.5388L19.6383 19.4206L19.7338 19.2891C20.1447 18.6603 20.0683 17.8276 19.5316 17.2907L14.2454 12.0016L19.5077 6.73713L19.605 6.63362C20.1455 6.00703 20.1297 5.06361 19.5673 4.49829Z\" fill=\"#EEEEEE\"/>\n</svg>\n  </div>");
+  var closeBlock = document.createElement('div');
+  closeBlock.classList.add("".concat(COMPONENT_CLOSE_MASK_BLOCK_ID, "-").concat(platform), "".concat(COMPONENT_CLOSE_MASK_BLOCK_ID, "-hidden"));
+  closeBlock.id = COMPONENT_CLOSE_MASK_BLOCK_ID;
+  closeBlock.innerHTML = closeBtnHTML;
+  closeBlock.addEventListener(clickEventName, function () {
+    closeBtnFunc();
+  });
+  document.body.appendChild(closeBlock);
+};
+
+/**
+ * 弹出离开挽留弹窗
+ * @param platform
+ * @param remainBtnFunc
+ * @param leaveBtnFunc
+ */
 export var createRetentionPopup = function createRetentionPopup(platform, remainBtnFunc, leaveBtnFunc) {
   var clickEventName = platform === PlatformEnum.mobile ? 'touchend' : 'click';
   // retention popup
@@ -109,6 +128,7 @@ export var createMockup = function createMockup(options) {
     options === null || options === void 0 || (_options$onClickOutsi = options.onClickOutside) === null || _options$onClickOutsi === void 0 || _options$onClickOutsi.call(options);
   });
   body.appendChild(mockup);
+  createMaskCloseButton(options === null || options === void 0 ? void 0 : options.platform, options === null || options === void 0 ? void 0 : options.closeBtnFunc);
 };
 export var addPopupLoading = function addPopupLoading() {
   var loading = document.createElement('div');

package/esm/plugin/component/index.d.ts

@@ -1,6 +1,6 @@
 import type AMSCheckout from '../../core/instance';
 import type { EventPayload, EventPayloadContext, IappendIframeNodesParams, IMerchantAppointParam, Iselector } from '../../types';
-import { ComponentSignEnum, DeviceIdParameter, PlatformEnum, DisplayTypeEnum } from '../../types';
+import { ComponentSignEnum, DeviceIdParameter, DisplayTypeEnum, PlatformEnum } from '../../types';
 type IrenderFuncParams = (context: ComponentApp, selector: Iselector, renderDisplayType: DisplayTypeEnum) => Promise<void>;
 export default class ComponentApp {
     app: null | HTMLIFrameElement;
@@ -85,6 +85,7 @@ export default class ComponentApp {
     _handleAppMessage(data: EventPayload): void;
     private logEventCallback;
     private dismissLoadingFunc;
+    private updateMaskCloseBtn;
     private handleSizeChanged;
     private handleAuthUrlInfo;
     private handleRedirect;
@@ -94,6 +95,7 @@ export default class ComponentApp {
     private isAppAttached;
     private isWindowVisible;
     private handleCloseBtnShow;
+    private handleMaskCloseBtnShow;
     /**
      * @description Send message to SDK
      */

package/esm/plugin/component/index.js

@@ -19,16 +19,16 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { v4 as uuid } from 'uuid';
 import { sdkVersion } from "../../config";
-import { COMPONENTPLUGINID, COMPONENT_CLOSE_BLOCK_ID, COMPONENT_CONTAINER_ID, COMPONENT_RETENTION_ID, COMPONENT_SECTION_ID, ERRORMESSAGE, EVENT, LISTENER_PREFIX, LOADING_ID, LOADTIME_LIMIT, MOCKUP_ID, POPUP_LOADTIME_LOG_LIMIT, TIMEOUT_WEB_APP_HEART_BEAT, TIME_DELAY_SEND_HEART_BEAT } from "../../constant";
+import { COMPONENTPLUGINID, COMPONENT_CLOSE_BLOCK_ID, COMPONENT_CLOSE_MASK_BLOCK_ID, COMPONENT_CONTAINER_ID, COMPONENT_RETENTION_ID, COMPONENT_SECTION_ID, ERRORMESSAGE, EVENT, LISTENER_PREFIX, LOADING_ID, LOADTIME_LIMIT, MOCKUP_ID, POPUP_LOADTIME_LOG_LIMIT, TIMEOUT_WEB_APP_HEART_BEAT, TIME_DELAY_SEND_HEART_BEAT } from "../../constant";
 import { queryPaymentInfo, submitPayInfo } from "../../service";
-import { ComponentSignEnum, eventCodeEnum, MessageName, PlatformEnum, ProductSceneEnum, RedirectType, DisplayTypeEnum, TargetEnum } from "../../types";
+import { ComponentSignEnum, DisplayTypeEnum, eventCodeEnum, MessageName, PlatformEnum, ProductSceneEnum, RedirectType, TargetEnum } from "../../types";
 import { getType, isJsonString, isPC } from "../../util";
+import { getBackScheme } from "../../util/getBackScheme";
 import { isLocalMock } from "../../util/mock";
 import { matchVersion } from "../../util/versionCompare";
-import { getBackScheme } from "../../util/getBackScheme";
 import { handlePaymentSessionConfig } from "../payment-element/utils";
 import { createIframe, createPreloadIframe, getAppDomain, getIframeUrl } from "./cashierApp";
-import { getChannelBehavior, handleGooglePay } from "./channel";
+import { ApplePayService, getChannelBehavior, handleGooglePay } from "./channel";
 import { addInlineLoading, createInlineBaseElement } from "./component.inline.style";
 import { addPopupLoading, createBaseElement, createMockup, createRetentionPopup, handleDeclareInfo as _handleDeclareInfo, hideRetentionPopup, removeRetentionPopup as _removeRetentionPopup, slideInAndOutKeyframes } from "./component.popup.style";
 import { createModal, destroyModal, insertStyleSheet, removePopupLoading } from "./popupWindow.style";
@@ -110,7 +110,7 @@ var ComponentApp = /*#__PURE__*/function () {
         sdkVersion: sdkVersion,
         webAppVersion: this._appVersion,
         instanceId: this.AMSSDK._instanceId,
-        storageId: this.AMSSDK._storageId,
+        deviceId: this.AMSSDK._storageId,
         // the better way to use md5 paymentSesionID
         renderDisplayType: paymentSessionMetaData === null || paymentSessionMetaData === void 0 ? void 0 : paymentSessionMetaData.renderDisplayType,
         merchantId: paymentSessionMetaData === null || paymentSessionMetaData === void 0 ? void 0 : paymentSessionMetaData.clientId,
@@ -147,7 +147,7 @@ var ComponentApp = /*#__PURE__*/function () {
         this.AMSSDK.logger.logInfo({
           title: 'sdk_event_security_unneeded_scenarios'
         }, {
-          product: product
+          productScene: product
         });
       }
       var securitySDK = this.AMSSDK._getSecuritySDKByProductScene({
@@ -180,15 +180,13 @@ var ComponentApp = /*#__PURE__*/function () {
         this.AMSSDK.logger.logInfo({
           title: 'sdk_event_securitySdkGetTokenSuccess'
         }, {
-          deviceId: deviceId,
-          time: time
+          eventMessage: time
         }).send();
       } else {
         this.AMSSDK.logger.logInfo({
           title: 'sdk_error_securitySdkGetTokenFailed'
         }, {
-          deviceId: deviceId,
-          time: time
+          eventMessage: time
         }).send();
       }
     }
@@ -262,7 +260,7 @@ var ComponentApp = /*#__PURE__*/function () {
         _this$_renderParams6,
         _this$_renderParams7,
         _this$_renderParams8,
-        _this$_renderParams$p,
+        _this$_renderParams11,
         _this3 = this;
       if (this._isInitComponent) {
         this.dispatchToSDK(EVENT.error.name, ERRORMESSAGE.CREATECOMPONENT_ERROR.SINGLETON_COMPONENT_ERROR);
@@ -310,8 +308,7 @@ var ComponentApp = /*#__PURE__*/function () {
       this.AMSSDK.logger.logInfo({
         title: 'sdk_event_createComponent'
       }, {
-        version: productSceneVersion,
-        product: this.AMSSDK.options.product
+        productScene: this.AMSSDK.options.product
       }).send();
       if (ComponentSignEnum.EASY_PAY_WALLET === this._componentSign) {
         if (productScene === ProductSceneEnum.EASY_PAY && productSceneVersion === '1.0' && !autoDebitWithToken && requireFastSdk) {
@@ -360,14 +357,16 @@ var ComponentApp = /*#__PURE__*/function () {
         if (channelBehavior !== null && channelBehavior !== void 0 && channelBehavior.allowClickOutsideClose) {
           onClickOutside = this.closeBtnFunc.bind(this);
         }
+        var closeBtnFunc = this.closeBtnFunc.bind(this);
         createMockup({
           platform: this.platform,
-          onClickOutside: onClickOutside
+          onClickOutside: onClickOutside,
+          closeBtnFunc: closeBtnFunc
         });
         this.renderPopupLoading(renderParams);
       }
       this.createApp(renderParams);
-      if ((_this$_renderParams$p = this._renderParams.paymentSessionMetaData) !== null && _this$_renderParams$p !== void 0 && (_this$_renderParams$p = _this$_renderParams$p.connectFactor) !== null && _this$_renderParams$p !== void 0 && _this$_renderParams$p.enableConnect) {
+      if ((_this$_renderParams11 = this._renderParams) !== null && _this$_renderParams11 !== void 0 && (_this$_renderParams11 = _this$_renderParams11.paymentSessionMetaData) !== null && _this$_renderParams11 !== void 0 && (_this$_renderParams11 = _this$_renderParams11.connectFactor) !== null && _this$_renderParams11 !== void 0 && _this$_renderParams11.enableConnect) {
         this._createLoadAppPromise();
         return this.createIframeNode(this, insertedNode, this._renderDisplayType).then(function () {
           return Promise.resolve();
@@ -392,7 +391,6 @@ var ComponentApp = /*#__PURE__*/function () {
       this.AMSSDK.logger.logInfo({
         title: 'performance_optimization_preload'
       }, {
-        componentSign: componentSign,
         productSceneVersion: productSceneVersion
       });
     }
@@ -409,7 +407,7 @@ var ComponentApp = /*#__PURE__*/function () {
   }, {
     key: "renderInlineLoading",
     value: function renderInlineLoading(renderParams, selector) {
-      var _renderParams$appeara, _this$_renderParams11;
+      var _renderParams$appeara, _this$_renderParams12;
       var showLoading = renderParams === null || renderParams === void 0 || (_renderParams$appeara = renderParams.appearance) === null || _renderParams$appeara === void 0 ? void 0 : _renderParams$appeara.showLoading;
       showLoading = typeof showLoading === 'boolean' ? showLoading : true;
       var extendInfo = renderParams.paymentSessionMetaData.extendInfo;
@@ -422,7 +420,7 @@ var ComponentApp = /*#__PURE__*/function () {
       }
       if (showLoading) addInlineLoading(selector, this.platform, {
         componentSign: this._componentSign,
-        type: (_this$_renderParams11 = this._renderParams) === null || _this$_renderParams11 === void 0 || (_this$_renderParams11 = _this$_renderParams11.appearance) === null || _this$_renderParams11 === void 0 || (_this$_renderParams11 = _this$_renderParams11.layout) === null || _this$_renderParams11 === void 0 ? void 0 : _this$_renderParams11.type,
+        type: (_this$_renderParams12 = this._renderParams) === null || _this$_renderParams12 === void 0 || (_this$_renderParams12 = _this$_renderParams12.appearance) === null || _this$_renderParams12 === void 0 || (_this$_renderParams12 = _this$_renderParams12.layout) === null || _this$_renderParams12 === void 0 ? void 0 : _this$_renderParams12.type,
         isExpressCheckout: isExpressCheckout
       });
     }
@@ -649,8 +647,7 @@ var ComponentApp = /*#__PURE__*/function () {
                 _this5.AMSSDK.logger.logInfo({
                   title: 'sdk_event_sdkQuery'
                 }, {
-                  paymentSessionConfig: JSON.stringify(params.paymentSessionConfig),
-                  requestBody: params
+                  paymentSessionConfig: JSON.stringify(params.paymentSessionConfig)
                 }).send();
                 queryPaymentInfo(params, {
                   env: _this5.AMSSDK.options.env.environment,
@@ -664,8 +661,7 @@ var ComponentApp = /*#__PURE__*/function () {
                   _this5.AMSSDK.logger.logInfo({
                     title: 'sdk_event_sdkQueryEnd'
                   }, {
-                    paymentSessionConfig: JSON.stringify(params.paymentSessionConfig),
-                    responseBody: res
+                    paymentSessionConfig: JSON.stringify(params.paymentSessionConfig)
                   }).send();
                 }).catch(function (err) {
                   if ([ComponentSignEnum.CASHIER_PAYMENT_CARD, ComponentSignEnum.VAULTING_CARD, ComponentSignEnum.CASHIER_PAYMENT_APM].includes(_this5._componentSign)) {
@@ -680,7 +676,7 @@ var ComponentApp = /*#__PURE__*/function () {
                     title: 'sdk_event_sdkQuery_failed'
                   }, {
                     paymentSessionConfig: JSON.stringify(params.paymentSessionConfig),
-                    errorReason: err
+                    errorMessage: err
                   }).send();
                   reject(err);
                 });
@@ -701,19 +697,19 @@ var ComponentApp = /*#__PURE__*/function () {
   }, {
     key: "createSubmitPromise",
     value: function createSubmitPromise() {
-      var _this$_renderParams12,
-        _this$_renderParams13,
+      var _this$_renderParams13,
         _this$_renderParams14,
+        _this$_renderParams15,
         _this6 = this;
       this._performanceData.push({
         key: 'sdk_submit_start',
         value: Date.now()
       });
       var params = {
-        paymentSessionData: this._renderParams && ((_this$_renderParams12 = this._renderParams) === null || _this$_renderParams12 === void 0 ? void 0 : _this$_renderParams12.sessionData) || '',
-        paymentSessionConfig: (_this$_renderParams13 = this._renderParams) === null || _this$_renderParams13 === void 0 || (_this$_renderParams13 = _this$_renderParams13.paymentSessionMetaData) === null || _this$_renderParams13 === void 0 ? void 0 : _this$_renderParams13.paymentSessionConfig
+        paymentSessionData: this._renderParams && ((_this$_renderParams13 = this._renderParams) === null || _this$_renderParams13 === void 0 ? void 0 : _this$_renderParams13.sessionData) || '',
+        paymentSessionConfig: (_this$_renderParams14 = this._renderParams) === null || _this$_renderParams14 === void 0 || (_this$_renderParams14 = _this$_renderParams14.paymentSessionMetaData) === null || _this$_renderParams14 === void 0 ? void 0 : _this$_renderParams14.paymentSessionConfig
       };
-      var channelBehavior = getChannelBehavior((_this$_renderParams14 = this._renderParams) === null || _this$_renderParams14 === void 0 ? void 0 : _this$_renderParams14.paymentSessionMetaData);
+      var channelBehavior = getChannelBehavior((_this$_renderParams15 = this._renderParams) === null || _this$_renderParams15 === void 0 ? void 0 : _this$_renderParams15.paymentSessionMetaData);
       // eslint-disable-next-line no-async-promise-executor
       this._actionSubmitPromise = new Promise( /*#__PURE__*/function () {
         var _ref9 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(resolve) {
@@ -767,8 +763,7 @@ var ComponentApp = /*#__PURE__*/function () {
                 _this6.AMSSDK.logger.logInfo({
                   title: 'sdk_event_submitPay'
                 }, {
-                  paymentSessionConfig: JSON.stringify(params.paymentSessionConfig),
-                  requestBody: params
+                  paymentSessionConfig: JSON.stringify(params.paymentSessionConfig)
                 }).send();
                 extParams = (channelBehavior === null || channelBehavior === void 0 || (_channelBehavior$buil = channelBehavior.buildSubmitPayExtParams) === null || _channelBehavior$buil === void 0 ? void 0 : _channelBehavior$buil.call(channelBehavior, {
                   instanceId: _this6.AMSSDK._instanceId,
@@ -803,16 +798,14 @@ var ComponentApp = /*#__PURE__*/function () {
                   _this6.AMSSDK.logger.logInfo({
                     title: 'sdk_event_submitPayEnd'
                   }, {
-                    paymentSessionConfig: JSON.stringify(params.paymentSessionConfig),
-                    responseBody: res
+                    paymentSessionConfig: JSON.stringify(params.paymentSessionConfig)
                   }).send();
                   resolve(res);
                 }).catch(function (err) {
                   _this6.AMSSDK.logger.logError({
                     title: 'sdk_event_submitPay_failed'
                   }, {
-                    paymentSessionConfig: JSON.stringify(params.paymentSessionConfig),
-                    responseBody: err
+                    paymentSessionConfig: JSON.stringify(params.paymentSessionConfig)
                   }).send();
                   resolve({
                     success: false
@@ -888,8 +881,7 @@ var ComponentApp = /*#__PURE__*/function () {
         this.AMSSDK.logger.logError({
           title: 'performance_optimization_preload_path_error'
         }, {
-          path: path,
-          locationSearch: locationSearch
+          eventMessage: path
         });
       }
       return preloadIframe;
@@ -1044,7 +1036,7 @@ var ComponentApp = /*#__PURE__*/function () {
               this.AMSSDK.logger.logError({
                 title: (_context4.t0 === null || _context4.t0 === void 0 ? void 0 : _context4.t0.title) || 'sdk_error_create_pop_up'
               }, {
-                message: _context4.t0 === null || _context4.t0 === void 0 ? void 0 : _context4.t0.message,
+                errorMessage: _context4.t0 === null || _context4.t0 === void 0 ? void 0 : _context4.t0.message,
                 url: pageUrl
               });
               this.dispatchToSDK(EVENT.error.name, ERRORMESSAGE.CREATECOMPONENT_ERROR.LOAD_APP_TIMEOUT);
@@ -1183,7 +1175,8 @@ var ComponentApp = /*#__PURE__*/function () {
     key: "_handleAppMessage",
     value: function _handleAppMessage(data) {
       var _data$context2,
-        _this7 = this;
+        _this7 = this,
+        _data$context3;
       var eventKeyMap = Object.keys(EVENT).map(function (key) {
         return EVENT[key].name;
       });
@@ -1267,6 +1260,10 @@ var ComponentApp = /*#__PURE__*/function () {
         this.handleCloseBtnShow(true);
         return;
       }
+      if (data.context.event === EVENT.setMaskCloseButton.name) {
+        this.handleMaskCloseBtnShow(data.context.data);
+        return;
+      }
       if (data.context.event === EVENT.setAllowRetention.name) {
         if (data.context.data === true) this._isRetention = true;
         if (data.context.data === false) this._isRetention = false;
@@ -1328,14 +1325,41 @@ var ComponentApp = /*#__PURE__*/function () {
         });
         return;
       }
-
+      if (data.context.event === EVENT.onPollingEnd.name) {
+        this.dispatchToApp({
+          context: {
+            event: 'onPollingEnd',
+            data: data.context.data
+          }
+        });
+      }
+      if (data.context.event === EVENT.closePaymentPolling.name) {
+        this.dispatchToApp({
+          context: {
+            event: EVENT.closePaymentPolling.name,
+            data: {}
+          }
+        });
+      }
+      if ((data === null || data === void 0 || (_data$context3 = data.context) === null || _data$context3 === void 0 ? void 0 : _data$context3.event) === EVENT.getApplePayToken.name) {
+        var _data$context4, _this$_renderParams16, _this$_renderParams17;
+        var applePayService = new ApplePayService({
+          paymentMethod: data === null || data === void 0 || (_data$context4 = data.context) === null || _data$context4 === void 0 || (_data$context4 = _data$context4.data) === null || _data$context4 === void 0 ? void 0 : _data$context4.paymentMethod,
+          sessionData: (_this$_renderParams16 = this._renderParams) === null || _this$_renderParams16 === void 0 ? void 0 : _this$_renderParams16.sessionData,
+          paymentSessionMetaData: (_this$_renderParams17 = this._renderParams) === null || _this$_renderParams17 === void 0 ? void 0 : _this$_renderParams17.paymentSessionMetaData,
+          logger: this.AMSSDK.logger,
+          dispatchToApp: this.dispatchToApp.bind(this)
+        });
+        applePayService.submit();
+        return;
+      }
       // log event before sending the callback
-      this.logEventCallback(data, "sdk_event_event_callback");
+      this.logEventCallback(data, 'sdk_event_event_callback');
       try {
         // The plug-in communicates with the sdk after processing
         this.dispatchToSDK(data.context.event, data.context.data, data.context.eventCallbackId);
         // log event after sending the callback
-        this.logEventCallback(data, "sdk_event_afterEventCallback");
+        this.logEventCallback(data, 'sdk_event_afterEventCallback');
       } catch (e) {
         console.error(e);
       }
@@ -1344,11 +1368,11 @@ var ComponentApp = /*#__PURE__*/function () {
     key: "logEventCallback",
     value: function logEventCallback(data, title) {
       if (data.context.event === EVENT.eventCallback.name) {
-        var _data$context4;
-        var callbackData = "";
+        var _data$context6;
+        var callbackData = '';
         try {
-          var _data$context3;
-          callbackData = JSON.stringify((data === null || data === void 0 || (_data$context3 = data.context) === null || _data$context3 === void 0 ? void 0 : _data$context3.data) || "");
+          var _data$context5;
+          callbackData = JSON.stringify((data === null || data === void 0 || (_data$context5 = data.context) === null || _data$context5 === void 0 ? void 0 : _data$context5.data) || '');
         } catch (e) {
           console.error(e);
         }
@@ -1356,7 +1380,7 @@ var ComponentApp = /*#__PURE__*/function () {
           title: title
         }, {
           callbackData: callbackData,
-          callbackId: (data === null || data === void 0 || (_data$context4 = data.context) === null || _data$context4 === void 0 ? void 0 : _data$context4.eventCallbackId) || ""
+          callbackId: (data === null || data === void 0 || (_data$context6 = data.context) === null || _data$context6 === void 0 ? void 0 : _data$context6.eventCallbackId) || ''
         }).send();
       }
     }
@@ -1372,13 +1396,28 @@ var ComponentApp = /*#__PURE__*/function () {
       }
       (_document$getElementB2 = document.getElementById(LOADING_ID)) === null || _document$getElementB2 === void 0 || _document$getElementB2.remove();
     }
+  }, {
+    key: "updateMaskCloseBtn",
+    value: function updateMaskCloseBtn(data) {
+      var maskCloseBtn = document.getElementById("".concat(COMPONENT_CLOSE_MASK_BLOCK_ID));
+      if (maskCloseBtn) {
+        if (this.platform === 'desktop') {
+          var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
+          var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+          maskCloseBtn.style.top = "".concat((windowHeight - data.height) / 2 - 42, "px");
+          maskCloseBtn.style.right = "".concat((windowWidth - data.width) / 2 + 18, "px");
+        } else {
+          maskCloseBtn.style.bottom = "".concat(data.height + 2, "px");
+        }
+      }
+    }
   }, {
     key: "handleSizeChanged",
     value: function handleSizeChanged(data) {
-      var _this$_renderParams15, _this$_renderParams16, _this$_renderParams17, _this$_renderParams18, _this$_renderParams19, _this$_renderParams20, _data$context$data4, _cashier$style;
-      var _selector = (this === null || this === void 0 || (_this$_renderParams15 = this._renderParams) === null || _this$_renderParams15 === void 0 || (_this$_renderParams15 = _this$_renderParams15.selector) === null || _this$_renderParams15 === void 0 || (_this$_renderParams16 = _this$_renderParams15.indexOf) === null || _this$_renderParams16 === void 0 ? void 0 : _this$_renderParams16.call(_this$_renderParams15, '#')) === -1 ? this === null || this === void 0 || (_this$_renderParams17 = this._renderParams) === null || _this$_renderParams17 === void 0 ? void 0 : _this$_renderParams17.selector : this === null || this === void 0 || (_this$_renderParams18 = this._renderParams) === null || _this$_renderParams18 === void 0 || (_this$_renderParams18 = _this$_renderParams18.selector) === null || _this$_renderParams18 === void 0 || (_this$_renderParams19 = _this$_renderParams18.slice) === null || _this$_renderParams19 === void 0 ? void 0 : _this$_renderParams19.call(_this$_renderParams18, 1);
+      var _this$_renderParams18, _this$_renderParams19, _this$_renderParams20, _this$_renderParams21, _this$_renderParams22, _this$_renderParams23, _data$context$data4, _cashier$style;
+      var _selector = (this === null || this === void 0 || (_this$_renderParams18 = this._renderParams) === null || _this$_renderParams18 === void 0 || (_this$_renderParams18 = _this$_renderParams18.selector) === null || _this$_renderParams18 === void 0 || (_this$_renderParams19 = _this$_renderParams18.indexOf) === null || _this$_renderParams19 === void 0 ? void 0 : _this$_renderParams19.call(_this$_renderParams18, '#')) === -1 ? this === null || this === void 0 || (_this$_renderParams20 = this._renderParams) === null || _this$_renderParams20 === void 0 ? void 0 : _this$_renderParams20.selector : this === null || this === void 0 || (_this$_renderParams21 = this._renderParams) === null || _this$_renderParams21 === void 0 || (_this$_renderParams21 = _this$_renderParams21.selector) === null || _this$_renderParams21 === void 0 || (_this$_renderParams22 = _this$_renderParams21.slice) === null || _this$_renderParams22 === void 0 ? void 0 : _this$_renderParams22.call(_this$_renderParams21, 1);
       // 修改需当前文件搜索，这段注释appendAliasContainerId
-      var appendAliasContainerId = this === null || this === void 0 || (_this$_renderParams20 = this._renderParams) === null || _this$_renderParams20 === void 0 ? void 0 : _this$_renderParams20.appendAliasContainerId;
+      var appendAliasContainerId = this === null || this === void 0 || (_this$_renderParams23 = this._renderParams) === null || _this$_renderParams23 === void 0 ? void 0 : _this$_renderParams23.appendAliasContainerId;
       var selectorId = appendAliasContainerId ? "".concat(COMPONENT_CONTAINER_ID, "-").concat(_selector) : COMPONENT_CONTAINER_ID;
       var cashier = document.getElementById(selectorId);
       if (((_data$context$data4 = data.context.data) === null || _data$context$data4 === void 0 ? void 0 : _data$context$data4.height) <= 1 || data.context.data.height === parseInt(cashier === null || cashier === void 0 || (_cashier$style = cashier.style) === null || _cashier$style === void 0 ? void 0 : _cashier$style.height)) return;
@@ -1416,6 +1455,8 @@ var ComponentApp = /*#__PURE__*/function () {
         }
         // 关闭loading，保留蒙层
         this.dismissLoadingFunc();
+        // 更新弹窗关闭按钮位置
+        this.updateMaskCloseBtn(data.context.data);
       }
       if (this._renderDisplayType === DisplayTypeEnum.inline) {
         var _document$getElementB3;
@@ -1448,6 +1489,9 @@ var ComponentApp = /*#__PURE__*/function () {
       var _data$isDestroy,
         _data$isCallApp,
         _data$callAppDetectSu,
+        _data$isDestroy2,
+        _data$isCallApp2,
+        _data$callAppDetectSu2,
         _this8 = this;
       var fromFastSdk = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       var _data = typeof data === 'string' ? {
@@ -1461,9 +1505,20 @@ var ComponentApp = /*#__PURE__*/function () {
         isCallApp: (_data$isCallApp = data === null || data === void 0 ? void 0 : data.isCallApp) !== null && _data$isCallApp !== void 0 ? _data$isCallApp : false,
         callAppDetectSuccessDelay: (_data$callAppDetectSu = data === null || data === void 0 ? void 0 : data.callAppDetectSuccessDelay) !== null && _data$callAppDetectSu !== void 0 ? _data$callAppDetectSu : 2000
       });
+      var logParams = {
+        applinkUrl: (data === null || data === void 0 ? void 0 : data.applinkUrl) || '',
+        schemeUrl: (data === null || data === void 0 ? void 0 : data.schemeUrl) || '',
+        normalUrl: (data === null || data === void 0 ? void 0 : data.normalUrl) || '',
+        target: data === null || data === void 0 ? void 0 : data.target,
+        isDestroy: (_data$isDestroy2 = data === null || data === void 0 ? void 0 : data.isDestroy) !== null && _data$isDestroy2 !== void 0 ? _data$isDestroy2 : true,
+        isCallApp: (_data$isCallApp2 = data === null || data === void 0 ? void 0 : data.isCallApp) !== null && _data$isCallApp2 !== void 0 ? _data$isCallApp2 : false,
+        callAppDetectSuccessDelay: (_data$callAppDetectSu2 = data === null || data === void 0 ? void 0 : data.callAppDetectSuccessDelay) !== null && _data$callAppDetectSu2 !== void 0 ? _data$callAppDetectSu2 : 2000
+      };
       this.AMSSDK.logger.logInfo({
         title: 'sdk_event_call_url_start'
-      }, _objectSpread({}, data)).send();
+      }, {
+        redirectInfo: JSON.stringify(logParams)
+      }).send();
       var successCallback = function successCallback(type, url, durationInSeconds) {
         _this8.dispatchToSDK(EVENT.eventCallback.name, {
           code: eventCodeEnum.SDK_CALL_URL_SUCCESS,
@@ -1645,6 +1700,16 @@ var ComponentApp = /*#__PURE__*/function () {
         closeBlock === null || closeBlock === void 0 || closeBlock.classList.add("".concat(COMPONENT_CLOSE_BLOCK_ID, "-hidden"));
       }
     }
+  }, {
+    key: "handleMaskCloseBtnShow",
+    value: function handleMaskCloseBtnShow(data) {
+      var closeBlock = document.getElementById(COMPONENT_CLOSE_MASK_BLOCK_ID);
+      if ((data === null || data === void 0 ? void 0 : data.status) === 'show') {
+        closeBlock === null || closeBlock === void 0 || closeBlock.classList.remove("".concat(COMPONENT_CLOSE_MASK_BLOCK_ID, "-hidden"));
+      } else {
+        closeBlock === null || closeBlock === void 0 || closeBlock.classList.add("".concat(COMPONENT_CLOSE_MASK_BLOCK_ID, "-hidden"));
+      }
+    }
 
     /**
      * @description Send message to SDK
@@ -1703,7 +1768,7 @@ var ComponentApp = /*#__PURE__*/function () {
     key: "sendRenderEvent",
     value: (function () {
       var _sendRenderEvent = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee8() {
-        var _this$_renderParams21, _this$_renderParams22, _this$_renderParams23, _this$_renderParams24, _this$_renderParams25, _this$_renderParams26, _this$_renderParams27, _this$_renderParams28, _this$_renderParams29, _this$AMSSDK$logger, _this$_renderParams30, _this$_renderParams31, _this$_renderParams32, _this$AMSSDK, _this$_renderParams33, isAddressElement, res, submitRes;
+        var _this$_renderParams24, _this$_renderParams25, _this$_renderParams26, _this$_renderParams27, _this$_renderParams28, _this$_renderParams29, _this$_renderParams30, _this$_renderParams31, _this$_renderParams32, _this$AMSSDK$logger, _this$_renderParams33, _this$_renderParams34, _this$_renderParams35, _this$AMSSDK, _this$_renderParams36, _this$_renderParams37, isAddressElement, res, submitRes;
         return _regeneratorRuntime().wrap(function _callee8$(_context8) {
           while (1) switch (_context8.prev = _context8.next) {
             case 0:
@@ -1733,34 +1798,35 @@ var ComponentApp = /*#__PURE__*/function () {
                   data: {
                     queryResult: res,
                     submitResult: submitRes,
-                    sessionResult: (_this$_renderParams21 = this._renderParams) === null || _this$_renderParams21 === void 0 ? void 0 : _this$_renderParams21.paymentSessionMetaData,
-                    paymentSessionData: (_this$_renderParams22 = this._renderParams) === null || _this$_renderParams22 === void 0 ? void 0 : _this$_renderParams22.sessionData,
+                    sessionResult: (_this$_renderParams24 = this._renderParams) === null || _this$_renderParams24 === void 0 ? void 0 : _this$_renderParams24.paymentSessionMetaData,
+                    paymentSessionData: (_this$_renderParams25 = this._renderParams) === null || _this$_renderParams25 === void 0 ? void 0 : _this$_renderParams25.sessionData,
                     heightOfVisible: Math.max(window.changingPageHeight, window.innerHeight),
-                    renderDisplayType: (_this$_renderParams23 = this._renderParams) === null || _this$_renderParams23 === void 0 ? void 0 : _this$_renderParams23.renderDisplayType,
-                    appearance: (_this$_renderParams24 = this._renderParams) === null || _this$_renderParams24 === void 0 ? void 0 : _this$_renderParams24.appearance,
-                    notRedirectAfterComplete: ((_this$_renderParams25 = this._renderParams) === null || _this$_renderParams25 === void 0 ? void 0 : _this$_renderParams25.notRedirectAfterComplete) === true,
+                    renderDisplayType: (_this$_renderParams26 = this._renderParams) === null || _this$_renderParams26 === void 0 ? void 0 : _this$_renderParams26.renderDisplayType,
+                    appearance: (_this$_renderParams27 = this._renderParams) === null || _this$_renderParams27 === void 0 ? void 0 : _this$_renderParams27.appearance,
+                    notRedirectAfterComplete: ((_this$_renderParams28 = this._renderParams) === null || _this$_renderParams28 === void 0 ? void 0 : _this$_renderParams28.notRedirectAfterComplete) === true,
                     isAppWebview: this._isAppWebview,
                     merchantAppointParam: this._merchantAppointParam,
                     allowSubmitPayCallAhead: this._allowSubmitPayCallAhead,
                     /** 地址组件集成的参数 */
-                    configParams: (_this$_renderParams26 = this._renderParams) === null || _this$_renderParams26 === void 0 ? void 0 : _this$_renderParams26.configParams,
-                    prefillValue: (_this$_renderParams27 = this._renderParams) === null || _this$_renderParams27 === void 0 ? void 0 : _this$_renderParams27.prefillValue,
-                    componentSession: (_this$_renderParams28 = this._renderParams) === null || _this$_renderParams28 === void 0 ? void 0 : _this$_renderParams28.componentSession,
+                    configParams: (_this$_renderParams29 = this._renderParams) === null || _this$_renderParams29 === void 0 ? void 0 : _this$_renderParams29.configParams,
+                    prefillValue: (_this$_renderParams30 = this._renderParams) === null || _this$_renderParams30 === void 0 ? void 0 : _this$_renderParams30.prefillValue,
+                    componentSession: (_this$_renderParams31 = this._renderParams) === null || _this$_renderParams31 === void 0 ? void 0 : _this$_renderParams31.componentSession,
                     envInfo: {
                       screenHeight: screen.height,
                       screenWidth: screen.width
                     },
                     logMetaData: _objectSpread(_objectSpread({
-                      trackId: (_this$_renderParams29 = this._renderParams) === null || _this$_renderParams29 === void 0 ? void 0 : _this$_renderParams29.sessionData,
+                      trackId: (_this$_renderParams32 = this._renderParams) === null || _this$_renderParams32 === void 0 ? void 0 : _this$_renderParams32.sessionData,
                       platform: this.platform,
                       firstLogTime: (_this$AMSSDK$logger = this.AMSSDK.logger) === null || _this$AMSSDK$logger === void 0 ? void 0 : _this$AMSSDK$logger.getComponentStartTime()
-                    }, ((_this$_renderParams30 = this._renderParams) === null || _this$_renderParams30 === void 0 || (_this$_renderParams30 = _this$_renderParams30.paymentSessionMetaData) === null || _this$_renderParams30 === void 0 ? void 0 : _this$_renderParams30.paymentSessionConfig) || {}), {}, {
-                      renderDisplayType: (_this$_renderParams31 = this._renderParams) === null || _this$_renderParams31 === void 0 ? void 0 : _this$_renderParams31.renderDisplayType,
+                    }, ((_this$_renderParams33 = this._renderParams) === null || _this$_renderParams33 === void 0 || (_this$_renderParams33 = _this$_renderParams33.paymentSessionMetaData) === null || _this$_renderParams33 === void 0 ? void 0 : _this$_renderParams33.paymentSessionConfig) || {}), {}, {
+                      renderDisplayType: (_this$_renderParams34 = this._renderParams) === null || _this$_renderParams34 === void 0 ? void 0 : _this$_renderParams34.renderDisplayType,
                       sdkVersion: this._appVersion,
-                      merchantId: (_this$_renderParams32 = this._renderParams) === null || _this$_renderParams32 === void 0 || (_this$_renderParams32 = _this$_renderParams32.paymentSessionMetaData) === null || _this$_renderParams32 === void 0 ? void 0 : _this$_renderParams32.clientId,
+                      merchantId: (_this$_renderParams35 = this._renderParams) === null || _this$_renderParams35 === void 0 || (_this$_renderParams35 = _this$_renderParams35.paymentSessionMetaData) === null || _this$_renderParams35 === void 0 ? void 0 : _this$_renderParams35.clientId,
                       instanceId: (_this$AMSSDK = this.AMSSDK) === null || _this$AMSSDK === void 0 ? void 0 : _this$AMSSDK._instanceId,
                       performanceData: this._performanceData,
-                      paymentMethodType: (_this$_renderParams33 = this._renderParams) === null || _this$_renderParams33 === void 0 || (_this$_renderParams33 = _this$_renderParams33.paymentSessionMetaData) === null || _this$_renderParams33 === void 0 || (_this$_renderParams33 = _this$_renderParams33.paymentMethodInfoView) === null || _this$_renderParams33 === void 0 ? void 0 : _this$_renderParams33.paymentMethodType
+                      paymentMethodType: (_this$_renderParams36 = this._renderParams) === null || _this$_renderParams36 === void 0 || (_this$_renderParams36 = _this$_renderParams36.paymentSessionMetaData) === null || _this$_renderParams36 === void 0 || (_this$_renderParams36 = _this$_renderParams36.paymentMethodInfoView) === null || _this$_renderParams36 === void 0 ? void 0 : _this$_renderParams36.paymentMethodType,
+                      skipRenderPaymentMethod: (_this$_renderParams37 = this._renderParams) === null || _this$_renderParams37 === void 0 || (_this$_renderParams37 = _this$_renderParams37.paymentSessionMetaData) === null || _this$_renderParams37 === void 0 ? void 0 : _this$_renderParams37.skipRenderPaymentMethod
                     })
                   }
                 }
@@ -1801,9 +1867,11 @@ var ComponentApp = /*#__PURE__*/function () {
     key: "cleanContainer",
     value: function cleanContainer() {
       var _document$getElementB4,
+        _document$getElementB5,
         _this10 = this;
       var immediately = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-      (_document$getElementB4 = document.getElementById(LOADING_ID)) === null || _document$getElementB4 === void 0 || _document$getElementB4.remove();
+      (_document$getElementB4 = document.getElementById(COMPONENT_CLOSE_MASK_BLOCK_ID)) === null || _document$getElementB4 === void 0 || _document$getElementB4.remove();
+      (_document$getElementB5 = document.getElementById(LOADING_ID)) === null || _document$getElementB5 === void 0 || _document$getElementB5.remove();
       this.hideComponentAnimation();
       var mockup = document.getElementById(MOCKUP_ID);
       mockup === null || mockup === void 0 || mockup.classList.add("".concat(MOCKUP_ID, "-hidden"));
@@ -1820,10 +1888,10 @@ var ComponentApp = /*#__PURE__*/function () {
   }, {
     key: "hideComponentAnimation",
     value: function hideComponentAnimation() {
-      var _this$_renderParams34, _this$_renderParams35, _this$_renderParams36, _this$_renderParams37, _this$_renderParams38, _this$_renderParams39, _container$style;
+      var _this$_renderParams38, _this$_renderParams39, _this$_renderParams40, _this$_renderParams41, _this$_renderParams42, _this$_renderParams43, _container$style;
       // 修改需当前文件搜索，这段注释appendAliasContainerId
-      var _selector = (this === null || this === void 0 || (_this$_renderParams34 = this._renderParams) === null || _this$_renderParams34 === void 0 || (_this$_renderParams34 = _this$_renderParams34.selector) === null || _this$_renderParams34 === void 0 || (_this$_renderParams35 = _this$_renderParams34.indexOf) === null || _this$_renderParams35 === void 0 ? void 0 : _this$_renderParams35.call(_this$_renderParams34, '#')) === -1 ? this === null || this === void 0 || (_this$_renderParams36 = this._renderParams) === null || _this$_renderParams36 === void 0 ? void 0 : _this$_renderParams36.selector : this === null || this === void 0 || (_this$_renderParams37 = this._renderParams) === null || _this$_renderParams37 === void 0 || (_this$_renderParams37 = _this$_renderParams37.selector) === null || _this$_renderParams37 === void 0 || (_this$_renderParams38 = _this$_renderParams37.slice) === null || _this$_renderParams38 === void 0 ? void 0 : _this$_renderParams38.call(_this$_renderParams37, 1);
-      var appendAliasContainerId = this !== null && this !== void 0 && (_this$_renderParams39 = this._renderParams) !== null && _this$_renderParams39 !== void 0 && _this$_renderParams39.appendAliasContainerId ? "-".concat(_selector) : '';
+      var _selector = (this === null || this === void 0 || (_this$_renderParams38 = this._renderParams) === null || _this$_renderParams38 === void 0 || (_this$_renderParams38 = _this$_renderParams38.selector) === null || _this$_renderParams38 === void 0 || (_this$_renderParams39 = _this$_renderParams38.indexOf) === null || _this$_renderParams39 === void 0 ? void 0 : _this$_renderParams39.call(_this$_renderParams38, '#')) === -1 ? this === null || this === void 0 || (_this$_renderParams40 = this._renderParams) === null || _this$_renderParams40 === void 0 ? void 0 : _this$_renderParams40.selector : this === null || this === void 0 || (_this$_renderParams41 = this._renderParams) === null || _this$_renderParams41 === void 0 || (_this$_renderParams41 = _this$_renderParams41.selector) === null || _this$_renderParams41 === void 0 || (_this$_renderParams42 = _this$_renderParams41.slice) === null || _this$_renderParams42 === void 0 ? void 0 : _this$_renderParams42.call(_this$_renderParams41, 1);
+      var appendAliasContainerId = this !== null && this !== void 0 && (_this$_renderParams43 = this._renderParams) !== null && _this$_renderParams43 !== void 0 && _this$_renderParams43.appendAliasContainerId ? "-".concat(_selector) : '';
       var inlineId = "".concat(COMPONENT_CONTAINER_ID).concat(appendAliasContainerId);
       var container = document.getElementById(inlineId);
       if (this.app && container) this.app.style.height = container === null || container === void 0 || (_container$style = container.style) === null || _container$style === void 0 ? void 0 : _container$style.height;

package/esm/plugin/paypal/index.js

@@ -346,7 +346,7 @@ export var PaypalBusSubscriber = /*#__PURE__*/function (_BusSubscriber) {
             _this2.logger.logError({
               title: 'button_render_failed'
             }, {
-              message: error
+              errorMessage: error
             });
             _this2.onEventCallback({
               code: eventCodeEnum.SDK_PAYMENT_FAIL,